轮播-----一般轮播

轮播：

1：除了带有current类选择器的li，其余的display都为none;

2：当触发监听事件，把current样式给信号量所在的li

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}

		.carrousel{
			width: 750px;/*显示区域*/
			height: 500px;
			margin: 100px auto;
			overflow: hidden;
			position: relative;
			
		}
	
		.carrousel  ul{
			list-style:none;
		}
		.carrousel  ul li{
			float: left;
			display: none;

		}
		.carrousel  .current{
			display: block;
		}
		span{
			display: block;
			width: 37px;
			height: 63px;
			top: 50%;
			position: absolute;
			margin-top: -61px;
			background-image: url(images/banner.png);
			background-repeat: no-repeat;

		}
		 .leftBtn{
		 	left:10px;	
		 	background-position: 0 -430px;  	

		 }
		  .rightBtn{
		 	right:10px;
		 	background-position: 0 -578px;
		 }
		 .carrousel  ol{
		 	width : 120px;
		 	height: 20px;
		 	list-style: none;
		 	position: absolute;
		 	bottom: 10px;
		 	left:50%;
		 	margin-left: -60px;
	
		 }

		 .carrousel  ol li{
		 	float: left;
		 	margin:0 10px;
		 	background-color: skyblue;
		 	width: 10px;
		 	height: 10px;
		 	border-radius: 5px;

		 }
		 .carrousel  ol .cur{
		 	background-color: pink;
		 }
	</style>

	<div class="carrousel" id="carrousel">
			<ul>
				<li class="current">
					<a href="#">
						<img src="images/01.jpg" alt="" />
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/02.jpg" alt="" />
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/03.jpg" alt="" />
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/04.jpg" alt="" />
					</a>
				</li>
				
			</ul>
			<span class="leftBtn" id="leftBtn"></span>
			<span  class="rightBtn" id="rightBtn"></span>

			<ol id="ol">
				<li class="cur"></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		
	</div>

原生JS:

	<script type="text/javascript">
		//图片运动原理：点击按钮后，改变信号量的值，赋予current的样式
		var carrousel = document.getElementById("carrousel");
		var ullist = carrousel.getElementsByTagName("li");
		var Lbtn = document.getElementById("leftBtn");
		var Rbtn = document.getElementById("rightBtn");
		var OL = document.getElementById("ol");
		var ollist = OL.getElementsByTagName("li");

		var now = 0;//设置全局信号量，方便访问
		Lbtn.onclick = function() {
			now--;
			if(now < 0){
				now = 3;
			}
			changePic();
		}
		Rbtn.onclick = function() {
			now++;
			if(now > 3){
				now = 0;
			}
			changePic();
		}

		//第一种：设置信号量，防止闭包
		// for(var i= 0 ;i < lis2.length ;i++){
		// 	lis2[i].idx = i;
		// 	lis2[i].onmouseover = function() {
		// 			now = this.idx;//将idx赋值给now,代表现在的i
		// 			changePic();
		// 		}	
		// }

		//第二种：IIFE表达式
		for(var i= 0 ;i < ollist.length ;i++){
			(function(i){
			    ollist[i].onmouseover = function() {//为圆点设置监听
					now = i;//把当前的i赋给now
					changePic();
				}
			})(i);			
		}

	//业务：改变图片，圆点，排他原理
		function changePic() {
			for(var i= 0 ; i < ullist.length ;i++){
				ullist[i].className = "";
			}
			ullist[now].className = 'current';

			for(var j= 0 ; j  < ollist.length ; j++){
				ollist[j].className = "";
			}
			ollist[now].className = 'cur';
		}

	</script>

JQ:

$lis = $(".carrousel ul li");
		$leftBtn = $(".leftBtn");
		$rightBtn = $(".rightBtn");
		$circles = $("ol li");

		var idx = 0;

	setInterval(rightHandle ,2000);

	 $rightBtn.click(rightHandle);	
	
		function rightHandle() {
				idx++;
				if(idx> 4){
					idx = 0;
				}
				change();
			}

	$leftBtn.click(function() {
			idx--;
			if(idx < 0){
				idx = 4;
			}
			change();
		});

		$circles.each(function(i) {
			$(this).mouseenter(function() {
				idx = i;
				change();
			});
		});
		
		function change(){
			$lis.eq(idx).addClass('current').siblings().removeClass('current');
			$circles.eq(idx).addClass('cur').siblings().removeClass('cur');
		}