利用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>
 
 <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>