基于javascript实现图片左右切换效果

时间：2021-05-25

本文实例介绍了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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章