java學習---前端---使用JavaScript和jQuery實現圖片輪播圖
圖片輪播圖
示例:京東商城
開發工具:VSCode
任務要求:
- 使用 HTML+CSS 佈局出如上圖所示頁面效果。
- 嵌入程式碼,定時輪換顯示圖片。
- 新增滑鼠移入移出事件,完成暫停和繼續輪換效果。
- 為左右按鈕新增點選事件,完成手動輪換商品圖片效果展示。
- 完成左下角圓點點選輪換商品圖片展示。
使用JavaScript方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圖片輪播</title>
<style>
/*設定內外填充0畫素*/
*{margin: 0px;padding: 0px;}
body{
user-select: none;
}
.out{
/*設定相對位置*/
position: relative;
width: 800px;
height: 450px;
margin: 20px auto;
}
.out.did{
/*設定絕對位置*/
position: absolute;
width: 100%;
height: 100%;
}
img{
position: absolute;
/*透明度*/
opacity: 0;
}
img.on{
opacity: 1;
}
.left,.right{
position: absolute;
top: 50%;
width: 30px;
margin-top: -30px;
font-size: 24px;
text-align: center;
line-height: 30px;
background-color: rgba(0, 0,0, 0.5);
color: rgb(248, 243, 242);
/*滑鼠變化*/
cursor: pointer;
}
/*設定button佈局和美化曲率,100px效果等同於50%*/
.left{
left: 0;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
}
.right{
right: 0;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
/*圓點佈局*/
.tab{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.tab li{
float: left;
list-style: none;
width: 14px;
height: 14px;
margin-right: 8px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
}
.tab li.on{
background-color: salmon;
}
</style>
</head>
<body>
<div class="out">
<div id="did">
<img class="on" src="./img/1.jpg" alt="圖片1" width="100%" height="100%">
<img src="./img/2.jpg" alt="圖片2" width="100%" height="100%">
<img src="./img/3.jpg" alt="圖片3" width="100%" height="100%">
<img src="./img/4.jpg" alt="圖片4" width="100%" height="100%">
</div>
<div class="button">
<div class="left"><</div>
<div class="right">></div>
</div>
<div class="tab">
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
<script>
//獲取左右button
var oLeft = document.querySelector('.left'),
oRight = document.querySelector('.right'),
//獲取全部圖片的集合
aImages = document.querySelectorAll('img'),
//獲取全部li的集合
aTab = document.querySelectorAll('li'),
aDid = document.getElementById('did'),
index = 0,//當前索引下標
lastIndex = 0;//上一次圖片的下標
//點選小圓點
for(var i = 0;i<aTab.length;i++){
aTab[i].index = i;
aTab[i].onclick = function(){
var This = this.index;//this作用域
change(function(){
index = This;
});
}
}
//自動播放
//3秒的定時器,滑鼠移入停止
var auto1 = setInterval(rightButton,3000);
aDid.onmouseenter = function(){
clearInterval(auto1);
}
//滑鼠移出開始
aDid.onmouseout = function(){
auto1 = setInterval(rightButton,3000);
}
//左單擊事件
oLeft.onclick = function(){
change(function(){
index--;
if(index < 0){
index = aImages.length-1;
}
});
}
//右單擊事件
oRight.onclick = rightButton;
function rightButton(){
change(function(){
index++;
index %= aImages.length;//迴圈
});
}
//變換函式
function change(callback){
aImages[lastIndex].className = '';//清除上一次
aTab[lastIndex].className = '';
callback();//回撥函式
aImages[index].className = 'on';
aTab[index].className = 'on';
lastIndex = index;
}
</script>
</html>
使用jQuery方法
先引入兩個js庫,可以去jQuery官網下載,body和style程式碼大部分和JavaScript相同,主要區別在script部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>重做輪播圖(jQuery)</title>
<style>
*{margin: 0px;padding: 0px;}
body{
user-select: none;
}
.outer{
position: relative;
width: 800px;
height: 450px;
margin: 20px auto;
}
.outer.inner{
position: absolute;
width: 100%;
height: 100%;
}
img{
position: absolute;
width: 100%;
height: 100%;
display: none;
}
/*將圖片的第一張設定為顯示*/
img:nth-child(1){
display: block;
}
.left,.right{
position: absolute;
top: 50%;
width: 30px;
margin-top: -30px;
font-size: 24px;
text-align: center;
line-height: 30px;
background-color: rgba(0, 0,0, 0.5);
color: rgb(248, 243, 242);
cursor: pointer;
}
.left{
left: 0;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
}
.right{
right: 0;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
.tab{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.tab li{
float: left;
list-style: none;
width: 14px;
height: 14px;
margin-right: 8px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
}
.tab li.on{
background-color: salmon;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<img src="./img/1.jpg" alt="圖片1">
<img src="./img/2.jpg" alt="圖片2">
<img src="./img/3.jpg" alt="圖片3">
<img src="./img/4.jpg" alt="圖片4">
</div>
<div class="button">
<div class="left"><</div>
<div class="right">></div>
</div>
<div class="tab">
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//當前顯示圖片的索引
var index = 0,
//下一張圖片的索引
nextIndex = 0,
//定時器
time;
//自動輪播
auto();
function auto(){
time = setInterval(function(){
if(nextIndex >= 3){
nextIndex = 0;
}else{
nextIndex++;
}
play();
index = nextIndex;
},3000);
}
//切換顯示的圖片和小圓點
function play(){
$(".inner img").eq(index).stop().fadeOut(500);
$(".inner img").eq(nextIndex).stop().fadeIn(500);
//小圓點變化
$(".tab li").eq(index).removeClass("on");
$(".tab li").eq(nextIndex).addClass("on");
}
//右點選事件
$(".right").click(function(){
if(nextIndex>=3){
nextIndex=0;
}else{
nextIndex++
}
play();
index = nextIndex;
//點選的時候關閉定時器
clearInterval(time);
//不點的時候啟動定時器
//如果不啟動,點選右箭頭後,快速移開,不經過inner區域,則不會繼續輪播,點選左箭頭同理
auto();
});
//左點選事件
$(".left").click(function(){
if(nextIndex<=0){
nextIndex=4;
}else{
nextIndex--;
}
play();
index = nextIndex;
clearInterval(time);
auto();
});
$(".inner").hover(function(){
//滑鼠移入事件,清除定時器
clearInterval(time);
},function(){
//滑鼠移出事件
auto();
});
//小圓點事件
$(".tab li").click(function(){
nextIndex = $(this).index();
play();
index = nextIndex;
});
});
</script>
</body>
</html>
總結:以上程式碼可以實現任務要求的效果,但是還可以繼續優化,讓程式碼的複用率更高!!!
相關文章
- (轉)jquery實現圖片輪播jQuery
- JQuery實現圖片輪播無縫滾動jQuery
- jQuery Mobile圖片輪轉輪播jQuery
- 圖片輪播元件實現元件
- jQuery實現3D圖片輪播詳解jQuery3D
- 使用jQuery實現的平滑滾動輪播圖jQuery
- jQuery輪播圖之上下輪播jQuery
- 【jquery前端開發】可調整的幻燈片(圖片輪播)薦jQuery前端
- Vue封裝Swiper實現圖片輪播Vue封裝
- 用原生js實現圖片輪播器JS
- 高效圖片輪播,兩個ImageView實現View
- 直播app原始碼,HTML + jQuery 實現輪播圖APP原始碼HTMLjQuery
- Android 和 iOS 圖片輪播AndroidiOS
- ViewPage實現輪播圖View
- Banner實現輪播圖
- js實現輪播圖JS
- ViewFlipper探索與使用——順便實現Android圖片輪播ViewAndroid
- 圖片輪播--純cssCSS
- [譯] 別再使用圖片輪播了
- 用原生JS實現 圖片輪播切換 功能JS
- 實現簡單的輪播圖(單張圖片、多張圖片)
- 原生JS實現輪播圖--第一章圖片展示JS
- 原生js實現輪播圖JS
- web前端入門到實戰:簡單的圖片輪播Web前端
- jQuery打造淘寶展示效果和淘寶輪播圖jQuery
- javascript實現的焦點圖輪播效果詳解JavaScript
- iOS無限輪播圖片iOS
- jQuery-demos輪播圖練習(一)jQuery
- 文字輪播與圖片輪播?CSS 不在話下CSS
- jQuery實現輪播效果jQuery
- 兩種方式實現輪播圖
- 記一個JavaScript圖片輪播思路與程式碼JavaScript
- 輪播圖(JavaScript定時器)JavaScript定時器
- 造輪子之圖片輪播元件(swiper)元件
- 直播平臺搭建原始碼,bootstrap實現圖片輪播效果原始碼boot
- 一個基於Vue的圖片輪播元件的實現Vue元件
- 使用swiper實現不完全覆蓋輪播圖
- vue元件之輪播圖的實現Vue元件