JQuery代码：
$(function () { $(".num li:first").addClass("on")///默认第一个li按钮class属性为on var timer = setInterval(function () {添加一个定时器方法 $(".slider li:first")选出第一个图片 .remove()///移除第一个li .appendTo(".slider");///插入到ul的最后一个 var img = $(".slider li:first img").attr("src");获取第一个图片的src属性 var index = img.match(/\d/)[0]-1;/获取当前图片的属性值内的对应索引并-1 $(".num li:eq(" + index+")").addClass("on").siblings().removeClass("on");给对应的索引的li加class样式其兄弟节点移除样式 }, 2000) $(".num li").bind("click mouseover", function () {给li按钮绑定单击和鼠标移入事件 var index = $(this).index();获取鼠标当前的选项索引; $(".slider").animate({ 给整个div加动画 "top": "-150" * index + "px"向上轮播 }); $(this).addClass("on").siblings().removeClass("on");给鼠标所点击li加背景并且移除其同胞选项的class样式 clearInterval(timer);///当鼠标单击和鼠标移li按钮时清空定时器 }).mouseout(function () {当鼠标移出时 timer = setInterval(function () {///添加定时器 $(".slider li:first") .remove() .appendTo(".slider"); var index = $(this).index $(".num li", index).attr("class", "on").siblings().removeClass("on"); }, 2000) })html代码：
<div class="content_right"> <div class="ad"> <ul class="slider"> <li><img src="images/ads/1.gif" /></li> <li><img src="images/ads/2.gif" /></li> <li><img src="images/ads/3.gif" /></li> <li><img src="images/ads/4.gif" /></li> <li><img src="images/ads/5.gif" /></li> </ul> <ul class="num"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div>效果图：
