如何用jquery实现轮播图 效果

如何用jq实现轮播的效果

举个例子：

以下为样式结构

• 			</li>
  			<li style="background: url(img/bg2.jpg);">
  			
  			</li>
  			<li style="background: url(img/bg3.jpg);">
  			
  			</li>
  			<li style="background: url(img/bg4.jpg);">
  				
  			</li>
  			<li style="background: url(img/bg5.jpg);">
  			</li>
  
  		</ul>
  	</div>
  	<div class="nav">
  		<ul>
  			<li class="select"></li>
  			<li></li>
  			<li></li>
  			<li></li>
  			<li></li>
  		</ul>
  	</div>
  
  </div>
  <div style="width: 100px; height: 100px; background: red; display: none;">
  </div>
  

以上面样式为例：

该轮播渲染主要使用定时器实现：

定时器函数setlnterval(function(){},time)

<script>
	$(function () {
		//轮播图自动播放功能
		var count = 0;//监听图片的索引
		move();
		setInterval(function () {
			count++;
			//当变量count的值 大于图片的个数是时，无法监听到图片索引导致轮播效果停止
			//所以判断一下 当count==图片集合的长度时，赋值为0 回到第一张图片
			if (count == $(".pic li").length) {
				count = 0;
			}
			move()//调用实现轮播动画的函数

		}, 2000)
		//实现轮播核心 取得各个li的索引 添加jq的动画方法  监听li的索引目的:
		//就是让这个被监听的li添加fadeIn()方法，其他兄弟li siblings()实现fadeOut()
		function move() {
			$(".pic li").eq(count).fadeIn()
				.siblings().fadeOut()
				

			$(".nav li").eq(count).addClass("select").siblings().removeClass("select");
		}

	})