jquery实现图片左右切换的方法

关注

转载最新推荐文章于 2026-06-06 15:02:20 发布 2.1k 阅读 AI 写同款· GEO 优化 ›

jQuery实现轮播图（无缝轮播，附效果图），代码有详解。 jQuery实现轮播图的无缝衔接（附带原生JS版本）刚学JQuery的时候，想着要做些什么来检验一下自己的学习成果，这时候在逛一些设计得比较优秀的网页的时候就看到了在主页上面不断切换的图片（当时不知道叫什么），这是我第一次对轮播图有了一些概念。于是就想能不能自己也做一个跟它效果一样的东西出来。遂在网上搜了资料，再结合自己所学过的JQuery知识，实现了一个无缝衔接轮播图的简单版本。下面附上... 阅读详情

jquery实现图片左右切换的方法

投稿：shichen2014 字体：[ 增加减小] 类型：转载

这篇文章主要介绍了jquery实现图片左右切换的方法,设计jQuery操作页面元素及对应样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

id="cproIframe_u1892994_2" width="580" height="90" src="http://pos.baidu.com/acom?adn=3&at=231&aurl=&cad=1&ccd=24&cec=GBK&cfv=17&ch=0&col=zh-CN&conBW=0&conOP=1&cpa=1&dai=2&dis=0&ltr=&ltu=http%3A%2F%2Fwww.jb51.net%2Farticle%2F65661.htm&lu_161=0&lunum=6&n=jb51_cpr&pcs=1372x791&pis=10000x10000&ps=514x221&psr=1440x900&pss=1372x515&qn=1967955237105fba&rad=&rsi0=580&rsi1=90&rsi5=4&rss0=%23FFFFFF&rss1=%23F7FCFF&rss2=%230000ff&rss3=%23444444&rss4=%23008000&rss5=&rss6=%23e10900&rss7=&scale=&skin=tabcloud_skin_3&stid=5&td_id=1892994&titFF=%E5%AE%8B%E4%BD%93&titFS=12&titTA=left&tn=text_default_580_90&tpr=1432100377982&ts=1&version=2.0&xuanting=0&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&di=u1892994&ti=jquery%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E5%B7%A6%E5%8F%B3%E5%88%87%E6%8D%A2%E7%9A%84%E6%96%B9%E6%B3%95_jquery_%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6&tt=1432100377962.156.338.340" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true">

本文实例讲述了jquery实现图片左右切换的方法。分享给大家供大家参考。具体实现方法如下：

 
          <!DOCTYPE html PUBLIC 
          "-//W3C//DTD XHTML 1.0 Transitional//EN"
         
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
          >
         
          <html xmlns=
          "http://www.w3.org/1999/xhtml"
          >
         
          <head>
         
          <meta http-equiv=
          "Content-Type" 
           content=
          "text/html; charset=utf-8" 
           />
         
          <title>图片左右滚动</title>
         
          <script src=
          "jquery-1.6.2.min.js" 
           type=
          "text/javascript"
          ></script>
         
          <script>
         
          $(
          function
          (){
         
          var 
           i=0;
         
          var 
           li = $(
          ".lxfscroll li"
          );
         
          var 
           n=li.length-1;
         
          var 
           speed = 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>
         
          <style type=
          "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: 1px dashed 
           #CCC;
         
          }
         
          .button {
         
          margin-right:auto;
         
          margin-left:auto;
         
          width:400px;
         
          text-align:center;
         
          padding-top: 10px;
         
          }
         
          i {
         
          color:
          #F00;
         
          font-weight:bold;
         
          }
         
          .button input {
         
          padding-top: 4px;
         
          padding-right: 12px;
         
          padding-bottom: 4px;
         
          padding-left: 12px;
         
          }
         
          .lxfscroll ul li {
         
          height: 300px;
         
          width: 400px;
         
          text-align: center;
         
          line-height: 300px;
         
          position: absolute;
         
          font-size: 40px;
         
          font-weight: bold;
         
          }
         
          </style>
         
          </head>
         
          <body>
         
          <div class=
          "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>
         
          <div class=
          "button"
          >
         
          <input name=
          "a" 
           type=
          "button" 
           onClick=
          "lxfLast()" 
           value=
          "上一个" 
           />
         
          <input name=
          "a" 
           type=
          "button" 
           onClick=
          "lxfNext()" 
           value=
          "下一个" 
           />
         
          </div>
         
          <div class=
          "button"
          >当前显示的是第 <i>1</i> 张图片</div>
         
          </body>
         
          </html>