用JQ去实现一个轮播效果
生活随笔
收集整理的這篇文章主要介紹了
用JQ去实现一个轮播效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前提：用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,4var num=$(this).parent().index();//根據索引值計算出應該移動的距離,存進變量movePxvar 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(){//如果點擊一次nextif(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");})//設置一個索引初始值為0var 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");})//設置一個索引初始值為0var 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毫秒不切換
最后是實現的效果動畫：
最后不滿意的地方在于目前無法去實現無縫切換，第一張和最后一張圖片之間的切換會經過中間的三張圖片，我現在也不知道如何去實現他，(⊙﹏⊙)b，后面學習之后會加上無縫切換的實現方法，本來準備寫的更加詳細一點的，語言能力有限，再加上時間的關系只能到這種地步了，中間有疏漏和錯誤還希望能批評指教。
轉載于:https://www.cnblogs.com/yewenxiang/p/6100206.html
總結
以上是生活随笔為你收集整理的用JQ去实现一个轮播效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Thinkphp框架中D()和M()的区
- 下一篇： 分布式搜索引擎ElasticSearch