今天来分享一下【鼠标点击按钮，图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码】。
最后的效果如下：
Html代码部分：
<!doctype html><htmllang="en"><head><metacharset="UTF-8"><metaname="Generator"content="EditPlus®"><metaname="Author"content=""><metaname="KeyWords"content=""><metaname="Description"content=""><title>图片轮播效果制作_赵一鸣随笔博客</title><linkrel="stylesheet"type="text/CSS"href="css/style.css"><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/Javascript"src="js/style.js"></script></head><body><divclass="banner"><ulclass="pic"><li><ahref="#"><imgsrc="images/1.jpg"alt="美女"width="350"height="495"></a></li><li><ahref="#"><imgsrc="images/2.jpg"alt="美女"width="350"height="495"></a></li><li><ahref="#"><imgsrc="images/3.jpg"alt="美女"width="350"height="495"></a></li><li><ahref="#"><imgsrc="images/4.jpg"alt="美女"width="350"height="495"></a></li><li><ahref="#"><imgsrc="images/5.jpg"alt="美女"width="350"height="495"></a></li></ul><ulclass="anniu"><liclass="on"></li><li></li><li></li><li></li><li></li></ul><ulclass="lr"><liclass="PRe"><ahref="#"><</a></li><liclass="next"><ahref="#">></a></li></ul></div></body></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代码部分：
$(function(){//鼠标滑过banner，左右按钮进行显示和隐藏$(".banner").hover(function(){
$(".lr").show();
},function(){
$(".lr").hide();
});//点击下面的小按钮，图片进行左右切换效果$(".anniu li").click(function(){
$(this).addClass("on").siblings().removeClass("on");varnum=$(this).index();
$(".pic").animate({marginLeft:-350*num},"slow");
});//图片自动轮播效果vara=0;varautomatic=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");
});
});
更多web前端开发免费代码，尽在我的博客园，欢迎持续关注！
本文链接;http://www.cnblogs.com/zymSEO/articles/4777944.html