解决方案：js鼠标单击该按钮可切换图片-图片将自动切换-单击左右按钮可切换特殊效果代码

js鼠标单击该按钮可切换图片-图片将自动切换-单击左右按钮可切换特殊效果代码

更新时间：2015年9月2日11:28:03转载：mrr

今天，我主要与大家分享js和css的组合代码，实现鼠标单击按钮图片的切换，图片会自动切换，单击左右按钮切换图片三个效果，代码非常简单，需要一起学习的朋友

今天，让我们分享一下用鼠标单击按钮，切换图片+自动切换图片+单击左右按钮切换图片这三种效果的组合代码。

最终效果如下：

HTML代码部分：

 
 
 
 
 
 
 
 
 
 
 
   

     

       

          
       
       

          
       
       

          
       
       

          
       
       

          
       
     
     

       

       

       

       

       

     
     

       
 < 
       
 > 
     
   
 

Css代码部分：

*{margin:0px;padding:0px}
li{list-style:none}
a{text-decoration:none}
img{border:0px}
.banner{width:350px;height:495px;margin:100px auto;position:relative;overflow:hidden}
.banner .pic{width:9999px;height:495px}
.banner .pic li{width:350px;height:495px;float:left}
.banner .anniu{width:100px;height:16px;position:absolute;left:165px;top:470px}
.banner .anniu li{width:16px;height:16px;background:white;float:left;margin:2px;display:inline;
cursor:pointer;border-radius:100%}
.banner .anniu li.on{background:red}
.banner .lr{width:350px;height:50px;position:absolute;top:250px;display:none}
.banner .lr a{color:white}
.banner .lr .pre{width:20px;height:50px;float:left;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}
.banner .lr .next{width:20px;height:50px;float:right;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}

JavaScript代码部分：

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-313990-1.html