循环滚动幻灯片（无插件）

来源：互联网发布：如何修复内存卡数据编辑：程序博客网时间：2024/05/21 22:42

这是今天自己写的一个循环切换的幻灯片，没有使用插件，贴出来和大家分享下，互相交流交流，也希望找出其中的不足，加以更新。。。。另外在我的资源中也附下载.

js.代码

<script language="javascript" src="js/jquery-1.7.2.min.js" type="text/javascript"></script><script language="javascript" type="text/javascript">$(document).ready(function(){var $imgItems = $("#imgPlay #actor li");           //获取所有的图片信息var count = $imgItems.length;                      //总数var $move = $("#imgPlay #actor");                   var moveWidth = $imgItems.eq(0).outerWidth(true); //移动宽度var index = 0;           //当前索引var $spans;  //焦点图标集合//添加焦点var addFocus = function(){    var span = "";for(var i=0;i<count;i++){span += i==0 ? "<span class='on'></span>" : "<span></span>";}$spans = $(span);$("#numInner").empty().append($spans);$("#imgPlay div.num p.mc").width($("#numInner").width());$("#imgPlay div.num p.mc").append($spans);}addFocus();//焦点单击事件$spans.click(function(){var currentIndex = $spans.filter(".on")         //获取当前存在焦点的索引.prevAll().length;index = $(this).prevAll().length;               //获取当前点击的索引if(currentIndex==count-1 && index==0){          //如果存在焦点的索引为最后一个，用点击的为第一个change("last",500,-(count)*moveWidth);}else if(currentIndex==0 && index==count-1){   //如果存在焦点的索引为第一个，用户点击的为最后一个change("first",500,0);}else{//普通切换change("",500,-index*moveWidth);}});var autoMove = function(){ //自动切换index==count-1 ?  index = 0 : index++;index==0 ?　change("last",500,-(count)*moveWidth) : change("",500,-index*moveWidth);}var timeObj = setInterval(autoMove,5000);//图片切换  类型first，last :时间:位移var change = function(type,timer,moveX){if(type=="first"){    //当前为第一张时，用户点击上一页var $last = $imgItems.eq($imgItems.length-1).clone(true);$last.prependTo($move);                                     $move.width($move.width()+moveWidth);$move.stop(true,true).css("marginLeft",-moveWidth).animate({marginLeft:0},timer,function(){$move.css("marginLeft",-index*moveWidth);    //将move的margnleft值变为0；$last.remove();                                     //移除克隆的最后一张});}else if(type=="last"){                                //当前为最后一张时，用户点击下一张var $first = $imgItems.eq(0).clone(true);$first.appendTo($move);$move.width($move.width()+moveWidth);$move.stop(true,true).animate({marginLeft:moveX},timer,function(){$move.css("marginLeft",0);        //将move的margnleft值变为0；$first.remove();                //移除克隆来的第一张}); }else{                                                 //普通切换$move.stop(true,true).animate({marginLeft:moveX},timer);}$("div.num p.mc span").eq(index).addClass("on")        //切换当前索引图标.siblings("span").removeClass("on");}//鼠标进入清除计时器，鼠标离开添加计时器$("div.next ,div.prev ,p.mc").mouseout(function(){timeObj = setInterval(autoMove,5000);}).mouseover(function(){clearInterval(timeObj);})//点击下一张/上一张$("div.next ,div.prev").click(function(){  $(this).attr("class")=="prev" ? index-- : index++;     //上一张index--，下一张index++if(index>=count){index = 0;change("last",500,-(count)*moveWidth);return;}if(index<0){index = count - 1;change("first",500,-moveWidth);return;}change("",500,-index*moveWidth);});});</script>

html.代码

<body style="text-align:center"><DIV id=imgPlay>  <UL class=imgs id=actor>    <LI><A href="#" target=_blank><IMG title=板长寿司2010罗志祥舞法舞天北京演唱会 src="images/01.jpg"></A>      <DIV class=btn><A title=立即购买 href="#" target=_blank>立即购买</A></DIV>    </LI>    <LI><A href="#" target=_blank><IMG title=张学友2011巡回演唱会北京站 src="images/02.jpg"></A>      <DIV class=btn><A title=立即购买 href="#" target=_blank>立即购买</A></DIV>    </LI>    <LI><A href="#" target=_blank><IMG title=爱无止境Air Supply空气补给站北京演唱会 src="images/03.jpg"></A>      <DIV class=btn><A title=立即购买 href="#" target=_blank>立即购买</A></DIV>    </LI>    <LI><A href="#" target=_blank><IMG title=2010迈克学摇滚中国巡演北京演唱会  src="images/04.jpg"></A>      <DIV class=btn><A title=立即购买 href="#" target=_blank>立即购买</A></DIV>    </LI>    <LI><A href="#" target=_blank><IMG title=2010张杰北京演唱会 src="images/05.jpg"></A>      <DIV class=btn><A title=立即购买 href="#" target=_blank>立即购买</A></DIV>    </LI>    <LI><A href="#" target=_blank><IMG title=海上良宵”蔡琴2010北京演唱会 src="images/06.jpg"></A>      <DIV class=btn><A title=立即购买 href="#" target=_blank>立即购买</A></DIV>    </LI>  </UL>  <DIV class=num>    <P class=lc></P>    <P class=mc></P>    <P class=rc></P>  </DIV>  <DIV class=num id=numInner></DIV>  <DIV class=prev>上一张</DIV>  <DIV class=next>下一张</DIV></DIV></body>