基于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程序设计有所帮助。