jQuery +css實作定時器輪播圖效果

大家好這裡是逍遙君，很高興見到大家，今天寫了一篇實作定時器輪播圖效果，有興趣的同學可以一起學習~

效果圖

→

圖檔是滾動切換（因為暫時沒有動态截圖工具，請大家自行腦補）

思路：

布置一個div作為顯示内容，

再布置一個ul和ul中的li放在div後面，

設定一個定時器，時間到達後自動調用一個方法一定ul的位置以此達到滾動圖的效果

使用的語言：html，css，JavaScript，jQuery

然後就是源代碼~

html部分

<!--//輪播圖-->
			<div id="index_lunbotu_div" style="overflow: hidden; float: left; width: 40%;height:400px;">
				<ul id="index_lunbotu" style="list-style: none;height: 400px;position: relative;">
					<li >
						<img src="img/index_slider1.jpg" />
					</li>
					<li >
						<img src="img/index_slider2.jpg" />
					</li>
					<li >
						<img src="img/index_slider3.jpg" />
					</li>
				</ul>
				
			</div>
           

這裡沒什麼太大的不同 隻是html 的基本布局，重點在于div中要添加overflow:hidden，與ul中的position：relative兩個屬性；

css實作滾動動畫的部分

#index_lunbotu{
	-webkit-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	-moz-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	-o-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	-ms-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	transition: all 0.3s cubic-bezier(1,.01,.32,1);	
}
           

js部分

window.onload=function(){
				 var pos =0;
				 var main_slider_length =$('#index_lunbotu').children('li').length;
				 var main_slider_width = $('#index_lunbotu').width();
				 var main_autoSlider = setInterval(main_slideRight, 3000);
				
				$("#index_lunbotu").width(main_slider_length*main_slider_width);
					function main_slideRight(){
						pos++;
						if(pos==main_slider_length){ pos = 0; }
						$('#index_lunbotu').css('left', -(main_slider_width*pos)); 
					}
					
					function main_slideLeft(){
						pos--;
						if(pos==-1){ pos = main_slider_length-1; }
						$('#index_lunbotu').css('left', -(main_slider_width*pos)); 	
				
					}

		}
           

這樣 一個簡單的定時器輪播圖就實作啦~

當然 ，如有需要，你也可以設定按鈕控制它