WEB前端開發：輪播圖的實現（H5+C3+JavaScript）(JQuery)
阿新 • • 發佈：2019-02-01
一、輪播圖的概念
輪播圖就是一種網站在介紹自己的主打產品或重要資訊的傳播方式。說的簡單點就是將承載著重要資訊的幾張圖片，在網頁的某一部位進行輪流的呈現，從而做到讓瀏覽者很快的瞭解到網站想要表達的主要資訊。例如：淘寶，京東，等大型的購物平臺。以及各種新聞網站的頭版頭條都是用這種方式呈現的重要資訊。
二、輪播圖的設計思想
輪播圖的實現方式：例如：有5張輪播的圖片，每張圖片的寬度為1024px、高度為512px.那麼輪播的視窗大小就應該為一張圖片的尺寸，即為：1024×512。之後將這5張圖片0px水平相接組成一張寬度為：5120px,高度依然為：512px。最後將這張合成後的大圖每次向左移動1024px即可實現輪播圖。下面介紹HTML程式碼：
根據上面的HTML程式碼：1.div banner就是上文中提到的輪播的視窗，它就是呈現圖片的部分。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="Style1.css" type="text/css" rel="stylesheet"> <script src="jquery-1.11.3.min.js"></script> <script src="JaScript.js"></script> </head> <body> <!--輪播圖整體div--> <div class="banner"> <!--無序列表承載輪播的圖片--> <ul class="img"> <li><a href="#"><img src="image/1.png" alt="第1張圖片"></a></li> <li><a href="#"><img src="image/2.png" alt="第2張圖片"></a></li> <li><a href="#"><img src="image/3.png" alt="第3張圖片"></a></li> <li><a href="#"><img src="image/4.png" alt="第4張圖片"></a></li> <li><a href="#"><img src="image/5.png" alt="第5張圖片"></a></li> <li><a href="#"><img src="image/6.png" alt="第6張圖片"></a></li> <li><a href="#"><img src="image/7.png" alt="第7張圖片"></a></li> </ul> <!--用來放置圓點具體實施在js程式碼中呈現--> <ul class="num"></ul> <!--左右點選按鈕--> <div class="btn"> <span class="prev"><</span> <span class="next">></span> </div> </div> </body> </html>
2.無序列表 img：用來存放要進行呈現的圖片，而圖片的水平放置與零間隙拼接會在後面的Css和Jquery程式碼中進行實現。
3.無序列表 num：用來存放圖片下方對應的圓點。可以看到在HTML程式碼中並沒有進行圓點的新增，這是因為通過Jquery程式碼首先獲取圖片的張數可以動態對應的新增圓點的個數，也可以動態的利用Css屬性為圓點新增相應屬性。
4.div btn ：輪播圖的左右按鈕的呈現通過<span>標籤以及後面的Css程式碼進行實現。
下面給出Css程式碼進行分析：
/*整體去除內外邊距*/
* {
margin: 0;
padding:0;
}
/*取消列表的圖示內容*/
ul{
list-style: none;
}
/*對整體部分的控制，瀏覽圖片的視窗*/
.banner{
width: 1024px;
height: 512px;
border: 2px solid #ccc;
margin: 100px auto;
position: relative;
overflow: hidden;
}
/*圖片的初步設定後面的動態內容會在js中實現*/
.img{
width:1024px;
height: 512px;
position: absolute;
top: 0;
left: 0;
}
/*讓沒長圖片向左浮動*/
.img li{
float: left;
}
/*圓點承載部分的設計*/
.num{
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
font-size: 0;
}
/*圓點設計*/
.num li{
width: 10px;
height: 10px;
background:rgba(0,0,0,0.5);
border-radius: 100%;
display: inline-block;
margin: 0 5px;
cursor: pointer;
}
/*按鈕部分初始不可見*/
.btn{
display: none;
}
/*按鈕形狀設計*/
.btn span{
display: block;
width: 50px;
height: 100px;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 40px;
line-height: 100px;
text-align: center;
cursor:pointer;
}
/*上一個設計*/
.btn .prev{
position: absolute;
left: 0;
top: 50%;
margin-top: -50px;
}
/*下一個設計*/
.btn .next{
position: absolute;
right: 0;
top: 50%;
margin-top: -50px;
}
/*對按妞動態呈現的變換進行類選擇器的設計為js程式碼部分進行鋪墊*/
.num .active{
background-color: #fff;
}
.hide{
display: none;
}下面對JavaScript程式碼進行分析：
//介面載入完畢執行以下程式
$(function(){
//定義i變數為動態控制圖片輪播做準備，i的值與每張圖片進行一一的對應
var i=0;
//時間變數，為自動輪播以及對游標的影響做出相應的反應
var timer=null;
//根據圖片的張數動態新增圓點個數
for (var j = 0; j < $('.img li').length; j++) {
$('.num').append('<li></li>');
}
//預設情況下的第一個圓點進行背景設計
$('.num li').first().addClass('active');
//根據游標的影響控制按鈕的顯示和隱藏
$('.banner').hover(function(){
$('.btn').show();
},function(){
$('.btn').hide();
});
//將第一張圖片複製並新增到img部分下與前五張圖片相接
var firstimg=$('.img li').first().clone(); //複製第一張圖片
$('.img').append(firstimg).width($('.img li').length*($('.img img').width()));
//定時器自動輪播
timer=setInterval(function(){
i++;
if (i==$('.img li').length) {
i=1;
$('.img').css({left:0});//保證無縫輪播，設定left值
}
//進行下一張圖片
$('.img').stop().animate({left:-i*1024},500);
//圓點跟著變化
if (i==$('.img li').length-1) {
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
}
},1000);
//滑鼠移入，暫停自動播放，移出，開始自動播放
$('.banner').hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(function(){
i++;
if (i==$('.img li').length) {
i=1;
$('.img').css({left:0});
};
//進行下一張圖片
$('.img').stop().animate({left:-i*1024},500);
//圓點跟著變化
if (i==$('.img li').length-1) {
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
}
},1000)
});
//上一個按鈕
$('.prev').click(function(){
i--;
if (i==-1) {
i=$('.img li').length-2;
$('.img').css({left:-($('.img li').length-1)*1024});
}
$('.img').stop().animate({left:-i*1024},500);
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
});
// 下一個按鈕
$('.next').click(function(){
i++;
if (i==$('.img li').length) {
i=1; //這裡不是i=0
$('.img').css({left:0});
};
$('.img').stop().animate({left:-i*1024},500);
if (i==$('.img li').length-1) { //設定小圓點指示
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
};
});
//滑鼠劃入圓點
$('.num li').mouseover(function(){
var _index=$(this).index();
//維持i變數控制的對應關係不變
i = _index;
$('.img').stop().animate({left:-_index*1024},300);
$('.num li').eq(_index).addClass('active').siblings().removeClass('active');
});
})這部分程式碼的難點在於是否瞭解JQuery中的相應方法，許多語句實現的功能我都在程式碼的註釋中進行了介紹，而一些方法，不知道的可以去查詢JQuery的API進行了解，再通過對不瞭解部分程式碼的刪除，執行。在比對中真切的瞭解其實現的功能。
實現效果截圖：
