Jquery-简单轮播图的实现

基本实现四个效果

1. 图片每三秒自动播放
2. 点击左右按钮能切换图片
3. 点击图片下方横线能切换到对应图片
4. 点击对应图片切换到当前图片

html代码

<div class="box">
	    <div class="container1">
			<ul>
				<li class="p1"><img src="../images/1.jpg"></li>
				<li class="p2"><img src="../images/2.jpg"></li>
				<li class="p3"><img src="../images/3.jpg"></li>
				<li class="p4"><img src="../images/4.jpg"></li>	
				<li class="p5"><img src="../images/5.jpg"></li>
				<li class="p6"><img src="../images/6.png"></li>
			</ul>
		</div>
		<a href="javascript:;" class="prev btn"><</a>
		<a href="javascript:;" class="next btn">></a>
		<div class="buttons">
			<a href="javascript:;">
				<span class="active"></span>
			</a>
			<a href="javascript:;">
				<span></span>
			</a>
			<a href="javascript:;">
				<span></span>
			</a>
			<a href="javascript:;">
				<span></span>
			</a>
			<a href="javascript:;">
				<span></span>
			</a>
			<a href="javascript:;">
				<span></span>
			</a>
		</div>
</div>

javascript:;表示执行一段空白JAVASCRIPT语句 并且返回的也是空或者false值。这样对a标签的点击就不会有事件响应，如果写成href="#"的话，虽然也不会跳转页面，但是当有滚动条时点击会跳转到页面首部。

css代码

*
	{
		margin:0px;
		padding: 0px;
	}
	.box
	{
		margin-top: 50px;
		width: 100%;
		height: 400px;
		position: relative;
	}

	.container1
	{
		position: absolute;
		width: 1000px;
		height: 360px;
		left:50%;
		margin-left: -500px;
		overflow: hidden;
	}
	li
	{
		list-style: none;
		position: absolute;
		top:0;
		left: 0;
		opacity: 0;
		transition: all 0.3s ease-out;
	}
	
	.box ul li img
	{
		width:640px;
		border:none;
		float: left;
		cursor: pointer;
	}
	.btn
	{
		color:#e93215;
		cursor: pointer;
		position: absolute;
		font-size: 40px;
		width: 60px;
		top:50%;
		margin-top: -50px;
		height: 100px;
		text-decoration: none;
		background: #FFBD9B;
		line-height: 100px;
		text-align: center;
	}
	.prev
	{
		left: 80px;
	}
	.next
	{
		right:80px;
	}
	.p1
	{
		transform:translate3d(-180px,0,0) scale(0.81);
	}
	.p2
	{
		transform:translate3d(0px,0,0) scale(0.81);
		transform-origin:0 50%;
		opacity: 0.8;
		z-index: 2;
	}
	.p3
	{
		transform:translate3d(180px,0,0) scale(1);
		z-index: 3;
		opacity: 1;
	}
	.p4
	{
		transform:translate3d(360px,0,0) scale(0.81);
		transform-origin:100% 50%;
		opacity: 0.8;
		z-index: 2;
	}
	.p5
	{
		transform:translate3d(540px,0,0) scale(0.81);
	}
	.p6
	{
		transform:translate3d(720px,0,0) scale(0.81);
	}
	.buttons
	{
		position: absolute;
		width: 1000px;
		height: 30px;
		bottom:0;
		margin-left: -500px;
		left: 50%;
		padding-top: 10px;
		text-align: center;
	}
	.buttons a
	{
		display: inline-block;
		width: 35px;
		height: 5px;
		padding-top: 4px;
		cursor: pointer;
	}
	span
	{
		display: block;
		width: 35px;
		height: 2px;
		background-color: #e93215;
	}
	.active
	{
		background-color: #4F9D9D;
	}

 

   

jquery代码  

1. container1是一个div，包裹着整个ul，我把ul高度设置成正常图片大小的高度，设定了一个宽度1000px，并且让溢出部分隐藏.
2. translate3d(-180px,0,0)表示图片向左移动180px,根据container1-图片长度/2，可得为180px，scale(0.81)表示图片水平和垂直都缩小为原来的0.81
3. z-index属性指定一个元素的堆叠顺序，这里当前显示图片的z-index设置为最大，左右两边的图片数值依次减1，就可以实现图片的堆叠.
4. 我们没有使用transform-origin改变元素原点位置的情况下，css变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。所以这里用到了transform-origin.

var $a=$(".buttons a");
   		var $s=$(".buttons span");
    	var crr=["p1","p2","p3","p4","p5","p6"];//字符数组与类名一一对应
		var index=0;
		$(".prev").click(
			function(){
				previmg();
			})
		$(".next").click(
			function(){
				nextimg();
			})
		function previmg(){//前一张
			crr.unshift(crr[5]);//unshift()在数组前端添加项，数组长度+1
			crr.pop();//pop()在数组末端移除项，数组长度-1
			$("li").each(function(i,e) {
				$(e).removeClass().addClass(crr[i]);
			})
			index--;
			if(index<0)
				index=5;
			show();
		}
		function nextimg(){//改变crr数组中字符的排列顺序
			crr.push(crr[0]);//push()是用来在数组末端添加项，数组长度+1
			crr.shift();//shift()在移除数组的第一个项，数组长度-1
			$("li").each(function(i,e) {//i是选择器的位置，e是当前元素
				$(e).removeClass().addClass(crr[i]);
			})//用each函数为每个li增加样式，这时数组中的样式已经改变了，所以对应样式也要改变
			index++;
			if(index>5)
				index=0;
			show();
		}
		
    $a.each(function() {//也是通过改变数组中的成员顺序达到改变li的class样式
    	$(this).click(function(){
    		var myindex=$(this).index();//当前点击的图片下标
    		var b=myindex-index;
    		if(b==0)
    			return;
    		else if(b<0)//在当前图片左侧
    		{
    			var newcrr=crr.splice(0,-b);
    			crr=$.merge(crr,newcrr);//拼接到crr
    			$("li").each(function(i,e)
    			{
    				$(e).removeClass().addClass(crr[i]);
    			})
    			index=myindex;
    			show();
    		}
    		else
    		{
    			crr.reverse();//反转数组
    			var oldarr=crr.splice(0,b);  
    			crr=$.merge(crr,oldarr);
    			crr.reverse();//还原
    			$("li").each(function(i,e){
    				$(e).removeClass().addClass(crr[i]);
    			})
    			index=myindex;
    			show();
    		}
    	})
    })
    function show(){
    	$($s).eq(index).addClass("active").parent().siblings().children().removeClass("active");
    }

    $(document).on("click",".p4",function() {
		nextimg();
    	return false;
    });
	$(document).on("click",".p2",function() {
		previmg();
    	return false;
    });
    $(".box").mouseover(function() {//鼠标移入时清除定时器
    	clearInterval(timer);
    })
    $(".box").mouseleave(function() {//鼠标移出时重新设置定时器
    	timer=setInterval(nextimg,3000);
    })
    timer=setInterval(nextimg,3000);//按照指定的周期（毫秒）来调用函数nextimg

通过用jquery代码来控制数组中p1,p2,p3,p4,p5,p6的顺序，然后通过removeClass和addClass把样式加到li上，以此来达到图片的点击时的切换。