点击/划过按钮，图片左右切换轮播效果代码最后做成的效果：
随着鼠标点击下面的1-5个按钮，上面的大图会进行左右自动切换。
Html部分：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>图片左右切换效果制作</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/style.js"></script>
</head>
<body>
<div class="banner">
<ul>
<li>
<a href="#"><img src="images/1.jpg" alt="装修效果图" width="550" height="368"></a>
</li>
<li>
<a href="#"><img src="images/2.jpg" alt="装修效果图" width="550" height="368"></a>
</li>
<li>
<a href="#"><img src="images/3.jpg" alt="装修效果图" width="550" height="368"></a>
</li>
<li>
<a href="#"><img src="images/4.jpg" alt="装修效果图" width="550" height="368"></a>
</li>
<li>
<a href="#"><img src="images/5.jpg" alt="装修效果图" width="550" height="368"></a>
</li>
</ul>
</div>
<div class="anniu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
Css部分：
*{margin:0px;padding:0px}
li{list-style:none}
img{border:0px}
.banner{width:550px;height:368px;margin:100px auto 10px auto;overflow:hidden}
.banner ul{width:9999px}
.banner ul li{width:550px;height:368px;float:left}
.anniu{width:100px;height:16px;margin:0px auto}
.anniu ul{width:100px;height:16px}
.anniu ul li{width:16px;height:16px;text-align:center;line-height:16px;background:red;
color:white;cursor:pointer;float:left;margin-left:2px;display:inline}
.anniu ul li.on{background:black}
Js部分：
$(function(){
$(".anniu ul li").click(function(){
$(this).addClass("on").siblings().removeClass("on");
$(".banner ul").animate({marginLeft:-550*$(this).index()},"slow")
})
})
#使用方法#：按照正常的网页制作流程，在本地新建站点文件夹，将以上代码分别放入对应的文件夹中即可看到效果。
（代码可复制）。
更多web前端开发及网页制作技术尽在本文库，欢迎持续关注！。