輪播是學習jquery開始的第二個實現的動效，也是學習時間最久的一個。在實現輪播的過程中總是會遇到各種各樣的問題，請教過很多人，也多次問過度娘。今天，也不敢果敢的說，可以馬上寫好一個輪播。希望是通過隨筆的方式，記錄下一些思維過程。
首先是html結構，一個簡單的輪播，單張圖片無縫輪播，主要分為三大層：div>ul>li，li里面的img圖片。
其次，css樣式：div固定住寬高，overflow：hidden；ul的寬度建議是動態獲取（下一步會講是怎么獲取）；關于li我習慣使用浮動，讓他們依次排列，在ul上要記得清楚浮動（clear：both）。
重要的是jquery的方法，主要有用到的有animate（），setInterval（），hover（）。在寫方法之前，縷清一下動效的邏輯：圖片依次循環自右向左滑過，當滑完最后一張時，第一張顯示，如此重復。
1、獲取li的個數length和寬度width
var len=$('li').length, liWidth=$('li').width, 因為是無縫輪播，要實現自然的過渡，我們還得做點什么，當圖片滑到最后一張時，怎么樣才會很自然的過渡到第一張，這個時候，如果第一張就在最后一張的后面，就可以了，所以，我們需要將第一張clone后append到li的最后
$('li:first').clone().appendTo('ul')
2、獲取ul的寬度：ul的寬度等于所有li的寬度加上克隆的li的寬度
ulWidth=liWidth*(len+1)
似乎準備工作都做好了，那下一步我們就嘗試讓他動起來，首先想到是animate（）方法：
animate( properties [, duration ] [, easing ] [, complete ] )，
第一個參數properties：css的屬性和值的對象，決定動畫的效果，是上下還是左右等；
第二個參數duration：完成一個動畫的時間，默認是400，單位是毫秒；
第三個參數easing：動畫過渡使用的緩動函數，默認是swing（linear，swing），一般不用這個參數；
第四個參數complete：是指完成動畫后執行的操作。
我們的動效是自右向左，所以通過改變ul的margin-left值來實現
$('ul').animate({ 'marign-left': -liWidth*index},3000,function(){ if(index==len){ index=0; $('ul').css({'margin-left':'0px'}) } }) 其中index指的是li的索引值，當li的索引值等于li的length值的時候，也就是動畫執行到了最后一張，那么直接讓ul的margin-left為0，li的索引值也為0。
這樣還存在一個隱患，暫時不提。
下一步，當鼠標離開div的時候，圖片自動播放。這是要用到hover（）和setInterval（）
setInterval（）在W3C是這樣解釋的：按照指定的周期（以毫秒計）來調用函數或計算表達式。不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。
var autoPlay;$('div').hover(function(){ clearInterval(autoPlay); },function(){ autoPlay=setInterval(function(){$('ul').animate({'marign-left': -liWidth*index},3000,function(){ if(index==len){ index=0; $('ul').css({'margin-left':'0px'})； index++; } });}，3000) }).trigger('mouseleave');這樣，一個自動播放的功能似乎就實現了，可是我們還可以發現一個bug，第一幀停留的時間似乎有些長，為什么呢？
這個問題還是昨天得到了解決，當圖片執行到最后一張時，他的index馬上變為0，然后會執行兩次，因此在這個判斷中，我們需要當index為0時，讓它自加1，index++，放到判斷條件下。
還有一個問題，是昨天發現的，在這個輪播里面有兩個時間，一個是動畫執行時間，一個是播放時間，前者的時間一定要比后者的時間小，原因是js的執行順序呢是自上而下的，，如果時間一致或者后者時間小于前者，那么，在這個時差里，動畫將進不到判斷條件里來，會一直播放，那么輪播就失敗了。今天就分享到這里，下一次分享加上左右箭頭和hover圓點的輪播效果。
附上完整的代碼：
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>輪播</title> <style> body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4{margin:0;padding:0;list-style:none;} body,button,input,select,textarea{font:12px Arial, Helvetica, sans-serif;color:#333;} input,select,textarea{font-size:100%;} .clearfix:after{display:block;content:".";height:0;visibility:hidden;clear:both;font-size:0;line-height:0;} .clearfix{*zoom:1;} .big-screen{width: 100%; height: 400px; overflow: hidden; margin: 40px 0;} .pic-list{height: 400px;} .pic-list li{float: left; width: 1920px; height: 400px;} </style></head><body> <div class="big-screen"> <ul class="pic-list clearfix"> <li> <a href="javascript:;"> <img src="http://fed.yhd.cn:9000/1920x400/27ae60xfff" alt="picture" width="1920" height="400"/> </a> </li> <li> <a href="javascript:;"> <img src="http://fed.yhd.cn:9000/1920x400/ae273axfff" alt="picture" width="1920" height="400"/> </a> </li> <li> <a href="javascript:;"> <img src="http://fed.yhd.cn:9000/1920x400/2757aexfff" alt="picture" width="1920" height="400"/> </a> </li> <li> <a href="javascript:;"> <img src="http://fed.yhd.cn:9000/1920x400/ae7d27xfff" alt="picture" width="1920" height="400"/> </a> </li> </ul> </div></body><script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){var ul=$('.pic-list'), li=ul.find('li'), liW=li.outerWidth(true), liLen=li.length, index=0, autoPlay; li.first().clone().appendTo(ul); ul.css({'width':liW*(liLen+1),'margin-left':-liW*index}); function play(){ if(!ul.is('animated')){ ul.stop().animate({ 'margin-left':-liW*index },480,function(){ if(index>liLen){ index=0; ul.css({'margin-left':-liW*index}); index++; } }); } } $('.big-screen').hover(function(){ clearInterval(autoPlay); },function(){ autoPlay=setInterval(function(){ play(); index++; },500) }).trigger('mouseleave');})</script></html> 以上就是為大家分享的jquery輪播效果完整代碼，希望對大家的學習有所幫助。
新聞熱點
疑難解答
