如何使用jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左右按鈕滑動(dòng)切換

這篇文章主要為大家展示了“如何使用jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左右按鈕滑動(dòng)切換”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左右按鈕滑動(dòng)切換”這篇文章吧。

使用jQuery實(shí)現(xiàn)點(diǎn)擊左右滑動(dòng)切換特效：

HTML代碼如下：

<!--整體背景div-->
 <div class="warp">
  <!--中間內(nèi)容div-->
 <div class="divContent">
   <div class="content">
    <ul class="contentUl">
     <li>
     <img src="/JS1/img/1.jpg" />
      <span>生命如歌，春天似夢(mèng) </span>
      <hr />
      <p>生命如歌，春天似夢(mèng)，初春更是如詩(shī)如畫(huà)。春似花季靚女，讓人悸動(dòng)，春似那雍容少婦，令人憧憬</p>
     </li>
     <li id="second">
      <img src="/JS1/img/2.jpg" />
      <span>如花的季節(jié)，贊揚(yáng) </span>
      <hr />
      <p>一切的生命力開(kāi)始復(fù)蘇，溫暖如我，正是如花的季節(jié)，不是嗎？</p>
     </li>
     <li>
      <img src="/JS1/img/3_1.jpg" />
      <span>夢(mèng)想，不休不止</span>
      <hr />
      <p>畏懼忍受痛苦比忍受痛苦本身更加糟糕。沒(méi)有一個(gè)心靈在追逐它的夢(mèng)想時(shí)會(huì)忍受痛苦。</p>
     </li>
     <li>
      <img src="/JS1/img/4.jpg" />
      <span>時(shí)間在葉子的擺動(dòng)里</span>
      <hr />
      <p>時(shí)間會(huì)消磨一切的，她會(huì)讓我們忘記的。突然想：如果我們忘記了時(shí)間，是不是想忘掉的就都能忘掉。</p>
     </li>
     <li>
      <img src="/JS1/img/5.jpg" />
      <span>異鄉(xiāng)的海韻,落日的余輝</span>
      <hr />
      <p>每個(gè)人或許都有一個(gè)愿望，希望在某年某月某天可以和相愛(ài)的人牽手漫步在夕陽(yáng)西下，落日余暉的海灘中，細(xì)數(shù)彼此生活的點(diǎn)點(diǎn)滴滴。</p>
     </li>
     <li>
      <img src="/JS1/img/6.jpg" />
      <span>城市夜，一個(gè)靜謐的夜</span>
      <hr />
      <p>城市夜，一個(gè)靜謐的夜。城市里，寒風(fēng)瑟瑟。酒吧燈紅酒綠，這，才是夜市的開(kāi)始。</p>
     </li>
    </ul>
   </div>
   <!--向左按鈕-->
   <div class="leftBtn"><img src="/JS1/img/left.png" /></div>
   <!--向右按鈕-->
   <div class="rightBtn"><img src="/JS1/img/right.png" /></div>
  </div>
 </div>

js代碼如下：

 $(document).ready(function(){ 
  //向左按鈕點(diǎn)擊事件
  var index = 0;
  var liLen;
  $(".leftBtn").click(function(){
   index++;
   liLen = $(".content ul.contentUl li").length; //目前長(zhǎng)度返回值為6
   if(index >= 4)
   {
    $(".content ul.contentUl").stop();
    alert("已經(jīng)到達(dá)最后一頁(yè)！");
    index = 3;
   }else{
    if(index == 1)
    {
     $(".content ul.contentUl").animate({left:-index*330},700);
    }else{
     $(".content ul.contentUl").animate({left:-index*305},700);
    }
   }
  });
  //向右按鈕點(diǎn)擊事件
  $(".rightBtn").click(function(){
   if(index == 0)
   {
    $(".content ul.contentUl").stop();
    alert("這是第一頁(yè)，不能再往前翻了！");
   }else{
    index--;
    if(index == 0)
    {
     $(".content ul.contentUl").animate({left:-40},700);
    }else{
     $(".content ul.contentUl").animate({left:-index*310},700);
    }
   }
  });
 });

以上是“如何使用jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左右按鈕滑動(dòng)切換”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！