這篇文章主要為大家介紹了基於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> <p 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> </p> <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>
#以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
jQuery和CSS3實作仿花瓣網固定頂部位置帶懸浮效果的導航選單
以上是利用javascript實現圖片左右切換的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!