周末闲暇时，参照http://www.cnblogs.com/babyzone2004/archive/2010/08/30/1812682.html实现了个jquery图片轮播特效

界面效果：

















css实现：

*{margin:0;}div{position:relative;width:600px;height:400px;border:1px#000solid;overflow:hidden;margin:auto;}divul{list-style-type:none;position:absolute;bottom:0;z-index:11;right:25px;filter:Alpha(Opacity=80);opacity:0.8;}divulli{width:30px;line-height:30px;border-left:0;border-top:1px#FFFsolid;border-right:1px#FFFsolid;border-bottom:1px#FFFsolid;text-align:center;vertical-align:middle;float:left;background-color:#0ABB6A;cursor:pointer;font-size:15px;font-weight:600;color:#FFF;}.list{background-color:#AF0348;color:#000;}ulli:first-child{border-left:1px#FFFsolid;}a{position:fixed;}#banner_bg{width:600px;height:30px;background-color:#000;position:absolute;z-index:10;filter:Alpha(Opacity=40);opacity:0.4;bottom:0;}

js代码实现：

varn=0,i=0,count=0;vartimeout=2000;varnid;$(function(){$("div>diva").not(":first-child").hide();$("div>ulli").eq(0).addClass("list");count=$("div>ulli").length;varindex=0;$("div>ulli").hover(function(){index=$(this).index();$(this).addClass("list");$(this).parent().children().not(":eq("+index+")").removeClass("list");},function(){$(this).removeClass("list");$(this).parent().children().eq(n).addClass("list");});$("div>ulli").click(function(){i=$(this).text()-1;n=i;$("div>diva").eq(i).fadeIn(1500);$(this).addClass("list");$(this).parent().children().not(":eq("+i+")").removeClass("list");$("div>diva").not(":eq("+i+")").fadeOut(1500);});clearInterval(nid);nid=setInterval(function(){Change();},timeout);$("div*").hover(function(){clearInterval(nid);},function(){clearInterval(nid);nid=setInterval(function(){Change();},timeout);});});functionChange(){n=n>=count?0:++n;$("#banner>ulli").eq(n).trigger("click");}html实现：<html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>-jquery图片轮换-</title><linktype="text/css"rel="stylesheet"href="css/basic.css"/><scripttype="text/javascript"src="js/jquery-1.11.2.js"></script><scripttype="text/javascript"src="js/basic.js"></script></head><body><divid="banner"><divid="banner_bg"></div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><div><atarget="_blank"><imgsrc="p_w_picpaths/list_02.jpg"alt="图片轮播"title="图片轮播"/></a><atarget="_blank"><imgsrc="p_w_picpaths/list_03.jpg"alt="图片轮播"title="图片轮播"/></a><atarget="_blank"><imgsrc="p_w_picpaths/list_04.jpg"alt="图片轮播"title="图片轮播"/></a><atarget="_blank"><imgsrc="p_w_picpaths/list_05.jpg"alt="图片轮播"title="图片轮播"/></a><atarget="_blank"><imgsrc="p_w_picpaths/list_06.jpg"alt="图片轮播"title="图片轮播"/></a></div></div></body></html>