jQuery之轮播图向左滚动动画【原创】

最近在做项目时遇到轮播图的问题。一开始只是做了淡入淡出的效果，设计师要求是背景图不动，中间内容向左滚动。效果图如下：




主要的思路：就是设置一个大的div，把几张banner图从左往右排列。外面的大div给position:relative,而里面的内容设置position：absolute。

这样，给外面的大盒子定时滚动，里面的内容也就跟着滚动。从而达到向左滚动的效果。

下面是代码部分：

CSS代码：

/*轮播图*/
.banner{ min-width:1200px; height:350px; margin:0px auto; position:relative;overflow: hidden; }
.btn{ width:1000px; height:350px;  position:absolute; top:50%; left:50%; margin-left:-500px;  margin-top:-265px; z-index: 999;}
.btn_bottom{ background: rgba(0,0,0,0.19);  position:absolute; bottom:10px; left:48%; z-index:9999; padding:5px 10px; }
.btn_bottom div{ width:20px; height:10px; background: #bfbfbf; float:left; margin-left:10px;}
.content{ width:100%; height:350px; position:relative; background: url(../images/banner2_03.jpg) no-repeat; background-size:100% 100%; }
.content_box{ width:600%; height:350px; position:relative;}
.content_list{ height:350px; float:left; position:relative;}
.pic1{  background:url(../images/banner1_01.png) top center no-repeat;}
.pic2{ background:url(../images/banner2_01.png) top center no-repeat;}
.pic3{ background:url(../images/banner3.png) top center no-repeat;}
.pic4{ background:url(../images/banner4.png) top center no-repeat;}
.pic5{ background:url(../images/banner5.png) top center no-repeat;}
.pic6{ background:url(../images/banner1_01.png) top center no-repeat;}
.enter_btn{ display:block; width:200px; height:50px; background:#f76c6c; color: #fefefe; font-size:18px; text-align:center; line-height:50px; font-family:"微软雅黑"; 
 position: absolute; bottom:60px; left:58%; border-radius:5px;  margin-left:-100px; margin-right:100%;}

JS代码：

//轮播图
	 var windows = $(".content").width();//获取自适应banner的宽度
	 
	var index=0;
		var maxindex=$(".content_list").length;//获取轮播图的个数
		function check(){
			var width = -windows*index+"px";//计算每个轮播图需要向左滚动的距离
			$(".content_box").animate({left: width},800);//给大DIV向左滚动一个屏幕的距离
			$(".btn_bottom div").css("background","#bfbfbf");
			$(".btn_bottom div").eq(index).css("background","#ff7676");//给按钮添加切换的样式
		}
	
		function add(){
			index++;
			if(index==maxindex) {
				index=0;
			}//图片滚到最后一张时，回到第一张
			
		}

		function settimer(){
			timer=setInterval(function(){
				add();
				check();
			},3000);
		}//设置定时器
		
		settimer();//调用定时器函数
		$(".banner").mouseover(function(){
			clearInterval(timer);//鼠标移上去时，清除定时器
		})
		$(".banner").mouseout(function(){
				settimer();//鼠标移走时，再启动定时器
		})
		$(".btn_bottom div").click(function(){
			index=$(this).index();
			check();
		})//设置按钮切换功能