前言: 轮播是一个很常见的特效,各大商城网站都看得到。所以就写过很多种轮播，今天跟大家分享的就是一个用JQuery实现的轮播。

效果图：

HTML代码：
              <div id="all">
			<div  id="img-left"></div>
			<div id="overall">
				<ul>
					<li><img src="../img/1.png"/></li>
					<li><img src="../img/2.png"/></li>
					<li><img src="../img/3.png"/></li>
					<li><img src="../img/44.jpg"/></li>
					<li><img src="../img/55.jpg"/></li>
					<li><img src="../img/66.jpg"/></li>
					<li><img src="../img/77.jpg"/></li>
				</ul>
			</div>
			<div id="img-right"></div>
		</div>

CSS代码：
              *{
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		#all{
			width: 1500px;
			height: 310px;
			margin: 200px auto;
		}
		#overall{
			float: left;
			width: 1200px;
			margin: 0px 110px;
			overflow: hidden;
		}
		img{
			width: 100%;
			height: 200px;
			transition: 0.5s;
		}
		ul{
			width: 2800px;
			position: relative;
			left: -400px;
		}
		li{
			width: 400px;
			line-height: 500px;
			vertical-align: middle;
			float: left;
		}
		.picClass{
			transform:scale(1.5);
			margin-top: 40px;
		}
		#img-left{
			float: left;
			width: 40px;
			height: 75px;
			position: relative;
			top: 115px;
			background: url(../img/控制按钮.png)0px -85px no-repeat;
		}
		#img-right{
			float: right;
			width: 40px;
			height: 75px;
			position: relative;
			top: 115px;
			background: url(../img/控制按钮.png)0px 0px no-repeat;
		}

JQuery代码：
                 $(function(){
			var pic = $("ul");
			$("li:eq(2) img").addClass("picClass"); //使用选择器获取要添加class的节点对象
			function cutPic(){
				pic.stop().animate({"margin-left":"-400px"},500,function(){
					pic.find("li").eq(0).appendTo(pic); //选取第一张图片添加到末尾
					pic.css("margin-left","0px");
				})
				$("li:eq(2) img").removeClass("picClass");
				$("li:eq(3) img").addClass("picClass");
			}
			var i = setInterval(cutPic,3000);
			$("#img-left").click(function(){
				pic.stop().animate({"margin-left":"400px"},500,function(){
					pic.find("li:last").prependTo(pic); //选取最后一张图片添加到最前面
					pic.css("margin-left","0px");
				})
				$("li:eq(2) img").removeClass("picClass");
				$("li:eq(1) img").addClass("picClass");
			});
			$("#img-right").click(function(){
				cutPic();
			});
			$("#img-left,#img-right").hover(function(){
				clearTimeout(i); //悬浮停止时间函数
			},function(){
				i = setInterval(cutPic,3000); //离开启动时间函数
			})
		});

总结：轮播已经写过很多种了，越写到后面就发现其实样式还是那些，展现出来的效果却不一样。所以最重要的还是思路、一样的代码、不一样的思路，展现出来的就是另一种效果。希望这篇文章能对有需要的同学有所帮助。