前提：用JQ去實現輪播效果一步步的做一個梳理。
首先肯定是輪播的HTML和CSS樣式了：
<body> <div class="pic"> <div class="inner"> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> </div> <ul> <li><a href="#" class="active"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> <a href="#" class="prev"><img src="img/slider-prev.png" alt=""></a> <a href="#" class="next"><img src="img/slider-next.png" alt=""></a> </div> </body>
<style> ul{ list-style: none; position: absolute; bottom: 0; left: 175px; } ul li{ float: left; } ul li a{ display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #ffbeaa; margin-left: 5px; opacity: 0.6; } ul li a.active{ background-color: red; } .inner{ width: 3000px; height: 400px; } .inner img{ display: block; float: left; } .pic{ width: 600px; overflow: hidden; position: relative; } .prev,.next{ position: absolute; top: 190px; opacity: 0.6; } .next{ right: 0; } </style>
我用的是5張美女圖片，包括左右2個按鈕切換和中間5個小按鈕懸浮切換效果如下：
下面來一步一步的去實現輪播的效果。
第一步：實現懸浮在中間的五個按鈕去實現圖片的切換。
首先我來說一下思路：.pic盒子包含.inner盒子包含5張圖片。五張圖片都是 寬600px 高400px。.inner盒子寬度是3000px，里面的5張圖片左浮動，(注意這里給img設置display:block的原因是img為行內塊元素浮動后圖片之間會有間距)，.pic盒子的寬度設置為一張圖片的大小為600px，超出部分隱藏，這樣就做成了一個窗口，只能看到一張圖片，當懸浮在（中間的5個小按鈕我分別按按鈕1，2，3，4，5來描述）按鈕1時，.inner盒子設置margin-left:0px;,懸浮在按鈕2時, .inner盒子設置為margin-left:600px; ，這樣就顯示出了第二張圖片，后面的以此內推，下面是我畫的簡易圖：
然后懸浮在按鈕1時：
那么怎么具體去實現我懸浮在當前按鈕時.inner盒子去移動相應的距離呢？我們來一步步的去考慮：
懸浮在按鈕1時-->.inner盒子移動0px
懸浮在按鈕2時-->.inner盒子移動600px
懸浮在按鈕3時-->.inner盒子移動1200px
懸浮在按鈕4時-->.inner盒子移動1800px
懸浮在按鈕5時-->.inner盒子移動2400px
我們可能發現出了規律，5個li的索引分別是0，1，2，3，4 。.inner盒子的移動距離就是 li的索引值乘以負600px，這個值就是.inner盒子的移動距離。
<script> $("ul li a").mouseover(function(){ //獲取a元素的父級元素li的索引值存進變量num 可能的值分別為 0,1,2,3,4 var num=$(this).parent().index(); //根據索引值計算出應該移動的距離,存進變量movePx var movePx=num * -600 + "px"; //給.inner盒子添加邊距 $(".inner").css("marginLeft",movePx); //根據索引的值找到相應的a元素，並且添加一個紅色背景，同時移除其他a元素的紅色背景 $("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active"); }) </script>
上面的代碼效果我就不貼圖了，懸浮時圖片會動，同時當前的按鈕也會改變背景色,但是我想要的效果不是瞬間切換的過程，需要有個時間去過渡平移，，用.animate()事件，500毫秒為動作的時間,我們需要改變一下代碼:
<script> $("ul li a").mouseover(function(){ var num=$(this).parent().index(); var movePx=num * -600 + "px"; $(".inner").animate({"marginLeft":movePx},500); $("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active"); }) </script>
第二步：實現左右箭頭切換：
<script> $("ul li a").mouseover(function(){ var num=$(this).parent().index(); var movePx=num * -600 + "px"; $(".inner").animate({"marginLeft":movePx},500); $("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active"); }) var num=0; //點擊next切換 $(".next").click(function(){ //如果點擊一次next if(num<4){ num=num+1; }else{ num=0; } var movePx=num*-600+"px"; $(".inner").animate({"marginLeft":movePx},500); $("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active"); return false; }) //點擊prev切換 $(".prev").click(function(){ if(num>0){ num=num-1; }else{ num=4; } var movePx=num*-600+"px"; $(".inner").animate({"marginLeft":movePx},500); $("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active"); return false; }) </script>
第三步：加上自動輪播：
<script> $("ul li a").mouseover(function(){ var num=$(this).parent().index(); var movePx=num * -600 + "px"; $(".inner").animate({"marginLeft":movePx},500); $("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active"); }) //設置一個索引初始值為0 var num=0; //初始化一個變量來裝定時器 var timer=null; //點擊next切換 $(".next").click(function(){ if(num<4){ num=num+1; }else{ num=0; } var movePx=num*-600+"px"; $(".inner").animate({"marginLeft":movePx},500); $("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active"); return false; }) //點擊prev切換 $(".prev").click(function(){ if(num>0){ num=num-1; }else{ num=4; } var movePx=num*-600+"px"; $(".inner").animate({"marginLeft":movePx},500); $("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active"); return false; }) //定時器函數 function changeTab(){ if (num<4){ num++; }else{ num=0; } var movePx=num*-600+"px"; $(".inner").animate({"marginLeft":movePx},500); $("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active"); } //輪播定時器,3秒執行一次 timer=setInterval(changeTab,3000); </script>
第四步：當懸浮在.pic盒子上時輪播停止，移出.pic盒子時輪播開始
<script> $("ul li a").mouseover(function(){ var num=$(this).parent().index(); var movePx=num * -600 + "px"; $(".inner").animate({"marginLeft":movePx},500); $("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active"); }) //設置一個索引初始值為0 var num=0; //初始化一個變量來裝定時器 var timer=null; //點擊next切換 $(".next").click(function(){ if(num<4){ num=num+1; }else{ num=0; } var movePx=num*-600+"px"; $(".inner").animate({"marginLeft":movePx},500); $("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active"); return false; }) //點擊prev切換 $(".prev").click(function(){ if(num>0){ num=num-1; }else{ num=4; } var movePx=num*-600+"px"; $(".inner").animate({"marginLeft":movePx},500); $("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active"); return false; }) //定時器函數 function changeTab(){ if (num<4){ num++; }else{ num=0; } var movePx=num*-600+"px"; $(".inner").animate({"marginLeft":movePx},500); $("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active"); } //輪播定時器,3秒執行一次 timer=setInterval(changeTab,3000); //懸浮在窗口時停止輪播 $(".pic").mouseenter(function(){ clearInterval(timer); }) //鼠標移除窗口時開始輪播 $(".pic").mouseleave(function(){ timer=setInterval(changeTab,3000); }) </script>
第五步：代碼優化
出現的問題：
- 不停的點擊左右箭頭松開后圖片還會繼續跑
- 代碼中重復性太高，需要封裝成函數來優化
- 懸浮在按鈕上時圖片馬上切換，我需要懸浮500毫秒再去切換，時間不達到500毫秒不切換
<script>
var num=0;
var timer=null;
var timeout=null;
// 設置鼠標懸浮在按鈕切換事件
$("ul li a").mouseenter(function(event){
//設置定時器前應先判斷有沒有定時器，有就清除
if(timeout){
clearTimeout(timeout);
timeout=null;
}
num=$(this).parent().index();
//設置懸浮時500毫秒時切換，不足500毫秒時不會切換
timeout=setTimeout(changgeMg,500);
return false;
})
//懸浮在窗口時停止輪播
$(".pic").mouseenter(function(){
//清除定時器
clearInterval(timer);
})
//鼠標移除窗口時開始輪播
$(".pic").mouseleave(function(){
//設置一個3秒的自動輪播定時器
timer=setInterval(changeTab,1000);
})
//點擊next切換
$(".next").click(function(){
//設置定時器前應先判斷有沒有定時器，有就清除
if(timeout){
clearTimeout(timeout);
timeout=null;
}
if(num<4){
num++;
}else{
num=0;
}
//設置點擊后500毫秒去切換，如果點擊間隔小於500毫秒不停點擊則不會切換
timeout=setTimeout(changgeMg,500);
//不讓a元素去默認跳轉
return false;
})
//點擊prev切換
$(".prev").click(function(){
if(timeout){
clearTimeout(timeout);
timeout=null;
}
if(num>0){
num--;
}else{
num=4;
}
//設置點擊后500毫秒去切換，如果點擊間隔小於500毫秒不停點擊則不會切換
timeout=setTimeout(changgeMg,500);
return false;
})
//輪播定時器
timer=setInterval(changeTab,1000);
//移動盒子和給當前索引上色
function changgeMg(){
var movePx=num*-600+"px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
}
//定時器函數
function changeTab(){
if (num<4){
num++;
}else{
num=0;
}
changgeMg();
}
</script>
最后是實現的效果動畫：
最后不滿意的地方在於目前無法去實現無縫切換，第一張和最后一張圖片之間的切換會經過中間的三張圖片，我現在也不知道如何去實現他，(⊙﹏⊙)b，后面學習之后會加上無縫切換的實現方法，本來准備寫的更加詳細一點的，語言能力有限，再加上時間的關系只能到這種地步了，中間有疏漏和錯誤還希望能批評指教。