jQuery轮播图

		yii2 轮播	

	样式:

	<style type="text/css">
	*{margin:0;padding:0}
	body{margin:50px}
	li{list-style:none; float:left;}
    .div1{
	  overflow:hidden;
	  width:204px;
	  height:204px;
	  border:2px solid red;
	  position:relative;
	}
	.div1 ul{
	  width:1000px;
	  position:absolute;
	  left:0;
	  top:0;
	}
	.div1 ol{
	  position:absolute;
	  bottom:-5px;
	  left:50px;
      background:#ffffff;
	}
	.div1 ol li{
      height:30px;
	  line-height:30px;
	  padding:0 6px;
	  border:2px solid #000000;
	  cursor: pointer;
	}
	.wrap p{
	  position:absolute;
	  bottom:0;
	  left:10px;
      background:#00ff00;
	  opacity:50%;//不透明度
	}
	.current{
	   background:#ff0033;
	   color:#33ff99;
	 }
	</style>

	代码:

	<div class="div1">
	    <div class='img'>
			<ul>
				<li><img src="data:images/1.jpg" alt="逗比1" /></li>
				<li><img src="data:images/2.jpg" alt="逗比2" /></li>
				<li><img src="data:images/3.jpg" alt="逗比3" /></li>
				<li><img src="data:images/4.jpg" alt="逗比4" /></li>
				<li><img src="data:images/5.jpg" alt="逗比5" /></li>
			</ul>
		</div>
		<ol>
			<li class='current'>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ol>
		<p class="p">逗比1</p>
	</div>

<script src="jQueryvalidate/jquery.js"></script>

	jQuery代码:
<script>
	$(function(){
		//获取对象
		var puli = $('.div1 ul li');//图片 li
		var pul = $('.div1 ul');//图片 ul
		var poli = $('.div1 ol li');// 数字 li
		//定义一个计数器
		var n = 0;
		//点击数字
		poli.hover(function(){
			clearInterval(timer);
			var _this = $(this);
			timeout = setTimeout(function(){	//鼠标放到数字上面延迟显示
				var index = $(_this).index();//获取索引 //0 1 2 3 4
				$(_this).addClass('current').siblings().removeClass();//点击谁,谁改变颜色
				$('.p').html($('img').eq(index).attr('alt'));//获取对应的alt内容,显示p标签中
				//点击动画
				$(pul).animate({
					'left':'-'+index*200+'px'
				},200);
				n = index;
			},300);
		},function(){
			clearTimeout(timeout);
			timer = setInterval(slider,2000);
			var index = $(this).index();
			n = index;
		});
		//动画轮播
		function slider(){
			//判断计数器,等于4就从0开始
			if(n==4){
		    	n=0;
		  	}else{
		      n++;
		  	}
			$('.p').html($('img').eq(n).attr('alt'));//获取对应的alt内容,显示p标签中
			poli.eq(n).addClass('current').siblings().removeClass();//改变对应数字的颜色
			//图片的动画
			pul.animate({
				'left':'-'+n*200+'px'
			},200);
		}
		//定义计时器,执行动画轮播函数
		var timer = setInterval(slider,2000);
		//鼠标悬浮
		$('.img').hover(function(){
			//鼠标放上去停止,清除计时器
			clearInterval(timer);
		},function(){
			//重新定义计时器
			timer = setInterval(slider,2000);
		});
	});
</script>