jQuery實作輪播圖
這裡用了一些有顔色的div塊當做圖檔，複制之後可以直接用，有需要的話再根據自己的需求替換就可以了。
功能：
（1）左右無縫輪播。
（2）滑鼠移上去會停止，移走繼續動。
（3）點選圓點切換到對應的圖檔。
（4）點選箭頭向對應的方向移動。
效果圖：
jQuery代碼（要引入jQuery檔案）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: ;
padding: ;
}
.banner {
width: px;
height: px;
border: px solid black;
margin: px auto;
overflow: hidden;
cursor: pointer;
position: relative;
}
.banner .slide {
width: px;
height: px;
position: absolute;
left: -px;
}
.banner .slide .pic {
width: px;
height: px;
line-height: px;
text-align: center;
float: left;
font-size: px;
color: white;
}
.banner .slide .a {
background-color: black;
}
.banner .slide .b {
background-color: pink;
}
.banner .slide .c {
background-color: purple;
}
.banner .dots{
width: px;
height: px;
position: absolute;
bottom: px;
left: %;
margin-left: -px;
z-index: ;/*讓圓點顯示在輪播圖上面*/
}
.banner .dots .dot{
/*圓點的一些樣式*/
width:px;
height: px;
float: left;
border-radius: %;
margin:px px;
background-color: rgba(,,,);
box-shadow: px rgba(,,,) inset;
cursor:pointer;
}
.banner .dots .active{
/*小圓點高亮的樣式*/
box-shadow: px rgba(,,,) inset;
background-color: #fff;
}
.banner .arrow{
/*左箭頭*/
width: ;
height: ;
border-right: px solid rgba(,,,.);
border-top: px solid transparent;
border-bottom: px solid transparent;
position: absolute;
left:;
top: %;
margin-top: -px;
z-index: ;
}
.banner .arrow:hover{
/*滑鼠移動到箭頭時候的樣式*/
border-right-color:white ;
}
.banner .next{
/*右箭頭*/
left:auto;
right: ;
top: %;
margin-top: -px;
transform: rotate(deg);
z-index: ;
}
</style>
</head>
<body>
<div class="banner">
<div class="slide">
<!-- 這邊多設定一張重複的圖檔就是我實作無縫輪播的關鍵之一啦，
當圖檔輪播到C的時候繼續讓它滑動，當切換到A（副本）的時候，
立馬用JS将圖檔替換成圖檔A，然後，再從第二張開始輪播
在視覺上我們感受到的就是無縫輪播了。
這個瞬間就是0ms，我們肉眼看不到的。-->
<div class="pic c">C</div><!-- C(副本)-->
<!-- 真正要輪播的就這三個ABC圖檔 -->
<div class="pic a">A</div>
<div class="pic b">B</div>
<div class="pic c">C</div>
<!-- 這邊也是同樣的道理，無縫輪播要添加的副本 -->
<div class="pic a">A</div><!-- A(副本)-->
</div>
<div class="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="arrow next"></div>
<div class="arrow prev"></div>
</div>
<!-- 這裡引用jQuery的源碼 -->
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript">
var index=;//這是記錄圖檔的索引，通過索引來控制圖檔的切換，
// 注意是從1開始的 [1,size-2]
var timer=null;//seInterval()函數會傳回一個值，這是用來接收那個值的，可以用來停止輪播的效果
var size=$('.slide').children().size();//圖檔的張數
var picWidth=$('.pic').width();//擷取圖檔的寬度
//滑鼠移上去的時候圖檔輪播要暫停
$('.banner').mouseover(function(){
clearInterval(timer);
});
//滑鼠移走的時候再次開始
$('.banner').mouseleave(function(){
autoSlide();
});
/*這裡要調用這個函數。這裡也是一個關鍵。
因為當你點進這個頁面以後不管你滑鼠放在哪裡，圖檔都是要動的吧。
這樣子寫的意思就是觸發這個.slide類的mouseover事件，
而上面那個是給這個元素綁定事件*/
$('.slide').mouseleave();
//自動播放
function autoSlide(){
timer=setInterval(function(){
index++;//通過索引來控制圖檔嘛，每隔一段時間當然要讓圖檔動起來。
changeImg();
changeDots();
},);//每隔1.5S就切換一次圖檔
};
// 圖檔切換函數
function changeImg(){
var slideWidth=-*picWidth*index;//移動的距離
$('.slide').animate({
'left':slideWidth+'px'//每次滑動一個圖檔的距離
},);//500的意思是動畫效果要在500ms内完成
if(index>=size-){
/*這是關鍵之三，
當移動到最後一張圖檔的時候,
瞬間（animate函數最後那個0代表轉換時間為0ms，是以就是一瞬間的事）
切換為第一張。*/
$('.slide').animate({'left':-picWidth+'px'},);// 圖檔切換過去
index=;//索引要也切換為第一幅圖的索引
}
if(index<){
//要注意在執行下面這段函數之前，已經切換到圖檔C了。
$('.slide').animate({'left':-(size-)*picWidth+'px'},);// 而這裡便是無縫切換的代碼
// (肉眼看不到),但實際已經切換到圖檔C了
index=size-;
}
}
//小圓點切換的函數
function changeDots(){
//給目前的小圓點添加高亮的樣式（active），然後把其他小圓點的樣式去掉。
/*這裡設定index-1的原因是因為點隻有三個。
當圖檔的索引為1，圓點的索引為0
圖檔索引為2，圓點索引為1
是以我們可以看到一直都差1*/
$('.dot').eq(index-).addClass('active').siblings().removeClass('active');
}
//點選小圓點，切換到對應的圖檔
$('.dot').click(function(event){
var target=event.target;//擷取點選到的小圓點，擷取到的是一個DOM元素
//擷取DOM元素的索引值。
index=$(target).index()+;// +1的原因：看上面changeDots()的注釋
changeImg();//改變圖檔
changeDots();// 小圓點的狀态也要跟着變
});
// 點選下一張切換圖檔
$('.next').click(function(){
index++;
changeImg();
changeDots();
});
// 點選上一張切換圖檔
$('.prev').click(function(){
index--;
changeImg();
changeDots();
});
</script>
</body>
</html>
剛學JQuery的時候，想着要做些什麼來檢驗一下自己的學習成果，這時候在逛一些設計得比較優秀的網頁的時候就看到了在首頁上面不斷切換的圖檔（當時不知道叫什麼），這是我第一次對輪播圖有了一些概念。于是就想能不能自己也做一個跟它效果一樣的東西出來。遂在網上搜了資料，再結合自己所學過的JQuery知識，實作了一個無縫銜接輪播圖的簡單版本。
![用js實作的一個加載中狀态的動态效果[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)