今天主要给大家分享一段js和css代码组合实现鼠标点击按钮图片切换，图片自动切换，点击左右按钮图片切换三种效果网页js切换特效代码，代码非常简单网页js切换特效代码，需要的朋友一起来学习吧

  今天来分享一下鼠标点击按钮，图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码。

  最后的效果如下：

  Html代码部分：

  <pre class="brush:xhtml;">

图片轮播效果制作_赵一鸣随笔博客

 
   
      [![美女][3]][11]
   
   
      [![美女][4]][12]
   
   
      [![美女][5]][13]
   
   
      [![美女][6]][14]
   
   
      [![美女][7]][15]
   
 
 
   
   
   
   
   
 
 
   [ < ][16]
   [ > ][17]
 

</pre>

  Css代码部分：

  <pre class="brush: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}</pre>

  Javascript代码部分：

  <pre class="brush:js;">
$(function(){
//鼠标滑过banner，左右按钮进行显示和隐藏
$(".banner").hover(function(){

 $(".lr").show();

},function(){

 $(".lr").hide();

});
//点击下面的小按钮，图片进行左右切换效果
$(".anniu li").click(function(){

 $(this).addClass("on").siblings().removeClass("on");
 var num=$(this).index();
 $(".pic").animate({marginLeft:-350*num},"slow");

});
//图片自动轮播效果
var a=0;
var automatic=setInterval(function(){

 a++;
 a=a%5;
 $(".pic").animate({marginLeft:-350*a},"slow");
 $(".anniu li").eq(a).addClass("on").siblings().removeClass("on");

},6000);
//点击左右按钮，图片进行切换效果
$(".pre").click(function(){

 a--;
 a=(a+5)%5;
 $(".pic").animate({marginLeft:-350*a},"slow");
 $(".anniu li").eq(a).addClass("on").siblings().removeClass("on");

});
$(".next").click(function(){

 a++;
 a=a%5;
 $(".pic").animate({marginLeft:-350*a},"slow");
 $(".anniu li").eq(a).addClass("on").siblings().removeClass("on");

});
});</pre>