首頁 > 開發者 > JavaScript
基於javascript實現圖片左右轉場效果，javascript切換
本文執行個體介紹了javascript實現圖片左右轉場效果的詳細代碼，分享給大家供大家參考，具體內容如下
：
具體代碼：
<html> <head> <title>JS圖片左右轉場效果</title> <meta charset="utf-8"/> <style type="text/css"> *{ margin:0; padding:0; } .images-scroll{ border:1px solid #CCC; margin:100px auto; width:300px; height:200px; position:relative; } .images-scroll ul{ list-style:none; } .images-scroll li{ float:left; display:none; } .images-scroll .active{ display:block; } .images-scroll a{ } .images-scroll img{ width:300px; height:200px; border:none; } .images-scroll .left-scroll{ position:absolute; top:40%; left:-40px; opacity:0; background:url("images/bg_direction_nav.png"); background-repeat:no-repeat; background-position:0px 0px; height:27px; width:27px; cursor:pointer; } .images-scroll .right-scroll{ position:absolute; top:40%; opacity:0; right:-40px; background:url("images/bg_direction_nav.png"); background-repeat:no-repeat; background-position:-30px 0px; height:27px; cursor:pointer; width:27px; } .images-scroll .right-scroll:hover{ background-color:transparent; } </style> <script src="jquery-1.8.2.js"></script> </head> <body> <div id="images-scroll" class="images-scroll"> <ul> <li class="active"><a href=""><img src="images/1.jpg" alt=""></a></li> <li><a href=""><img src="images/2.jpg" alt=""></a></li> <li><a href=""><img src="images/3.jpg" alt=""></a></li> <li><a href=""><img src="images/4.jpg" alt=""></a></li> </ul> <span id="left-scroll" class="left-scroll"></span> <span id="right-scroll" class="right-scroll"></span> </div> <script type="text/javascript"> $("#images-scroll").mouseover(function(){ $("#left-scroll").animate({left: '10px',opacity:'1',},400); $("#right-scroll").animate({right: '10px',opacity:'1',},400); }) $("#images-scroll").mouseleave(function(){ $("#left-scroll").animate({left: '-40px',opacity:'0',},400); $("#right-scroll").animate({right: '-40px',opacity:'0',},400); }) imgScroll=setInterval("runScroll()",3000); var last_idx=$("#images-scroll ul li").index($("#images-scroll ul li:last")); function runScroll(){ var idx=$("#images-scroll ul li").index($("#images-scroll ul .active")[0]); $("#images-scroll li").eq(idx).removeClass("active").hide(); idx+=1; if(idx%(last_idx+1)==0){ idx=0; } $("#images-scroll li").eq(idx).addClass("active").show(); } $("#left-scroll").click(function(){ var idx=$("#images-scroll ul li").index($("#images-scroll ul .active")[0]); $("#images-scroll li").eq(idx).removeClass("active").hide(); idx-=1; if(idx==-1){ idx=last_idx; } $("#images-scroll li").eq(idx).addClass("active").show(); }) $("#right-scroll").click(function(){ runScroll(); }) </script> </body></html>
以上就是本文的全部內容，希望對大家學習javascript程式設計有所協助。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
