jquery实现图片左右切换的方法
本文实例讲述了jquery实现图片左右切换的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>图片左右滚动</title> <scriptsrc="jquery-1.6.2.min.js"type="text/javascript"></script> <script> $(function(){ vari=0; varli=$(".lxfscrollli"); varn=li.length-1; varspeed=300; li.not(":first").css({left:"400px"}); li.eq(n).css({left:"-400px"}); lxfNext=function(){ if(!li.is(":animated")){ if(i>=n){i=0;li.eq(n).animate({left:"-400px"},speed); li.eq(i).animate({left:"0px"},speed); }else{i++;li.eq(i-1).animate({left:"-400px"},speed);li.eq(i).animate({left:"0px"},speed);}; li.not("eq(i)").css({left:"400px"}); $("i").text(i+1); }else{}; }; lxfLast=function(){ if(!li.is(":animated")){ if(i<=0){i=n;li.eq(0).animate({left:"400px"},speed);li.eq(n).animate({left:"0px"},speed); }else{i--;li.eq(i+1).animate({left:"400px"},speed);li.eq(i).animate({left:"0px"},speed);} li.not("eq(i)").css({left:"-400px"}); $("i").text(i+1); }; }; }); </script> <styletype="text/css"> *{ font-size:12px; color:#333; text-decoration:none; padding:0; margin:0; list-style:none; font-style:normal; font-family:Arial,Helvetica,sans-serif; } .lxfscroll{ width:400px; margin-left:auto; margin-right:auto; margin-top:20px; overflow:hidden; position:relative; height:300px; border:1pxdashed#CCC; } .button{ margin-right:auto; margin-left:auto; width:400px; text-align:center; padding-top:10px; } i{ color:#F00; font-weight:bold; } .buttoninput{ padding-top:4px; padding-right:12px; padding-bottom:4px; padding-left:12px; } .lxfscrollulli{ height:300px; width:400px; text-align:center; line-height:300px; position:absolute; font-size:40px; font-weight:bold; } </style> </head> <body> <divclass="lxfscroll"> <ul> <li>我是第1张图片</li> <li>我是第2张图片</li> <li>我是第3张图片</li> <li>我是第4张图片</li> <li>我是第5张图片</li> <li>我是第6张图片</li> <li>我是第7张图片</li> <li>我是第N张图片</li> </ul> </div> <divclass="button"> <inputname="a"type="button"onClick="lxfLast()"value="上一个"/> <inputname="a"type="button"onClick="lxfNext()"value="下一个"/> </div> <divclass="button">当前显示的是第<i>1</i>张图片</div> </body> </html>
希望本文所述对大家的jQuery程序设计有所帮助。