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>
巴特西

jQuery轮播图

最新文章

热门文章
