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

本文实例介绍了javascript实现图片左右切换效果的详细代码，分享给大家供大家参考，具体内容如下

效果图：

具体代码：

  
    
    
    
      *{
 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;
      }
 
    
    
  
  
     
    
      

 

 

 

 

      
      
      
    
    
     
  

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。