首頁 > 開發者 > CSS

jQuery+css實現的切換圖片功能代碼_jquery

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了jQuery+css實現的切換圖片功能代碼。分享給大家供大家參考，具體如下：

運行效果截圖如下：

具體代碼如下：

<!DOCTYPE html><html>  <head>  <title>demo</title>  <script type="text/javascript" src="jquery.js"></script>  <style type="text/css" >   body {    margin:0; padding:0;   }   .container {    border:6px solid gray; background:black;    width:600px; height:400px; position:relative;    left:50%; margin-left:-300px; border-radius:6px;    -webkit-border-radius:6px; -moz-border-radius:6px;    overflow:hidden;   }   .text-center {    text-align:center;   }   h1 {     font-size:50px; color:gray; font-weight:bolder;   }   .imgUL {    width:100%; height:100%; margin:0px; padding:0px; list-style:none;   }   .imgUL li {    float:left; margin:0px; padding:0px; height:100%;     color:gray; font-weight:bolder; text-align:center;    font-size:100px; line-height:400px;   }   .pageUL {    position:relative; top:-40px; height:40px; list-style:none;    margin:0px; padding:0px; float:right;   }   .pageUL li {    float:left; display:block; width:36px;    height:36px; border:2px solid red;     margin-left:5px; border-radius:4px;    -webkit-border-radius:4px; text-align:center;    -moz-border-radius:4px; line-height:36px;    color:gray; font-weight:bolder; cursor:pointer;   }   .pageUL li:hover {    background:#5ACF00; color:black;   }   .pageUL li.active {    background:#5ACF00; color:black;   }  </style>  <script type="text/javascript" >   $(document).ready(function(){    var autoInterval = null,     imgUL = $(".imgUL"),     imgliList = imgUL.children("li"),     liListLength = imgliList.length,     pageUL = $('.pageUL'),     pageLiList = pageUL.children('li'),     pageLiListLength = pageLiList.length,    // initialize    activePageLi = $(pageLiList[0]);    activePageLi.addClass('active');    imgliList.width(600);    imgUL.width(liListLength * 600);    $(".pageUL li").mouseover(function(){     mouseoverAnimate(this);    }).mouseout(function(){     createInterval();    });    createInterval();    function mouseoverAnimate(_this){     clearInterval(autoInterval);     activePageLi.removeClass('active');     activePageLi = $(_this);     var pageNo = parseInt(activePageLi.html());     activePageLi.addClass('active');     imgUL.animate({      'marginLeft': -600 * (pageNo - 1)     }, 10);    }    function createInterval(){     autoInterval = setInterval(function(){      var pageNo = parseInt(activePageLi.html());      pageNo++;      if(pageNo > pageLiListLength) {       pageNo = 1;      }      activePageLi.removeClass('active');      activePageLi = $(pageLiList[pageNo - 1]);      activePageLi.addClass('active');      imgUL.animate({       'marginLeft': -600*(pageNo - 1)      }, 1100);     }, 1500);    }   });  </script> </head> <body>  <h1 class="text-center">Demo</h1>  <div class="container" id="container">   <ul class="imgUL">    <li>Page1</li>    <li>Page2</li>    <li>Page3</li>    <li>Page4</li>    <li>Page5</li>    <li>Page6</li>   </ul>   <ul class="pageUL">    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>   </ul>  </div> </body></html>

更多關於jQuery特效相關內容感興趣的讀者可查看本站專題：《jQuery常見經典特效匯總》及《jQuery動畫與特效用法總結》

希望本文所述對大家jQuery程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More