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)); 	
				
					}

		}

这样一个简单的定时器轮播图就实现啦~

当然，如有需要，你也可以设置按钮控制它

jQuery +css实现定时器轮播图效果

猜你喜欢