萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> JQuery 圖片滾動輪播示例代碼

JQuery 圖片滾動輪播示例代碼

 這篇文章主要介紹了JQuery實現圖片滾動輪播,需要的朋友可以參考下

完整的項目在附件中   代碼如下: <!DOCTYPE html>  <html>  <head>  <title>圖片切換</title>  <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>  <script type="text/javascript" >  var num = 0  $(function(){  $("div ol li").mouseover(function(e){  $(this).attr("class","current");  $(this).siblings().attr("class",""); //兄弟節點的class屬性設置為空  //alert($('ul').index())  num = $('ul').index() + 2  var index = $(this).index(); //記錄選定的li標簽在ul中的索引  //圖片會出現層疊現象為了顯示當前的圖片,把當前的圖片的z-index 值設置為大於其他的兄弟元素  $("div ul li").eq(index).css({"left":"650px","zIndex":num})  $("div ul li").eq(index).siblings().css("zIndex",num-1);  //動畫效果,圖片從右側飛入  $("div ul li").eq(index).animate({left:"0"},500)    });    });  </script>  <style type="text/css">  *{margin: 0px;padding: 0px;border: 0px;}  ul,ol{list-style: none;}  .all{width:650px;height: 250px;margin: 100px auto;position: relative;border: 1px solid crimson;overflow: hidden;}  .all ul{position: relative;z-index: 1;position: relative;}    /*子 絕 父 相*/  .all ul li{position: absolute;left: 0;top: 0px;}    .all ol{position: absolute;z-index: 2; right: 10px;bottom: 10px;}  .all ol li{width: 20px;height: 20px;background: #333;border: 1px solid #509629;font-weight:  bold;text-align: center;line-height: 20px;float: left;margin-left: 10px;margin-top: 10px;}    .all ol .current{width: 30px;height: 30px;line-height: 30px;border: 1px solid red;margin-top: 0px;  cursor: pointer;}  </style>  </head>  <body>  <div class="all">  <ul>  <li><img src="src/1.jpg" /></li>  <li><img src="src/2.jpg" /></li>  <li><img src="src/3.jpg" /></li>  <li><img src="src/4.jpg" /></li>  </ul>  <ol>  <li class="current">1</li>  <li>2</li>  <li>3</li>  <li>4</li>  </ol>  </div>  </body>  </html>   
copyright © 萬盛學電腦網 all rights reserved