我实现的是，有5张图，每次只显示一张图片，点按钮切换。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<style type="text/css">
body{ margin:0font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif}
ul{margin:0padding:0list-style:none}
#imgList{ width:100pxheight:100px/* 定义显示窗口的大小 */
border:1px solid #000overflow:hidden}
#imgList ul{ width:500px} /* 定义全部图片的宽度和,这里有5张，每张宽100px,总宽度就是500px */
#imgList li{ width:100pxheight:100pxfloat:left} /* 单张图片的所在位置的大小，宽度就是图片宽度加左右边距 */
#imgList img{ width:90pxheight:90pxmargin:5px} /* 单张图片的尺寸，及外边距 */
</style>
<script>
function move(to){
var imgList = document.getElementById("imgList")
if(to == "left") imgList.scrollLeft += 100//li的宽度
else imgList.scrollLeft -= 100//li的宽度
}
</script>
</head>
<body>
<!-- 请使用以下html结构 -->
<div id="imgList">
<ul>
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
</ul>
</div>
<!-- 这个可以自己定义，把事件copy过去就行了 -->
<input type="button" value="left" onClick="move('left')">
<input type="button" value="right" onClick="move('right')">
</body>
</html>
看你是如何实现的一般来说，增加动画可以使用：animation ,想要过渡的话使用transition.
transition: 参考 http://www.w3school.com.cn/cssref/pr_transition.asp
animation:参考 http://www.w3school.com.cn/cssref/pr_animation.asp
W3school资料还是很好的。
我们在 CSS 阶段就已经接触到轮播图。通过轮播图我们可以达到一些好玩的特效，但使用 CSS 做出来的轮播图只有左右切换，渐变切换和简单的点击切换。局限性较大，观看效果也不佳。但当我们接触 js 之后，你就发现使用js来实现轮播图后，在看CSS实现轮播的效果就是...。我想说啥你知道的。废话不多说，咱们一起看看如何使用js来实现轮播效果。
（本文以阴阳师中“平安世界”模块的轮播图为例）
这个轮播图，我们通过两大模块构成；左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。
在使用js实现轮播图的效果前，先使用HTML和CSS完善这一模块的布局。
本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。
左右点击切换模块：
我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。
当我们点击右边按钮后，我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果
对每一张图片进行编码，以此来达到循环切换图片的效果。在切换图片时，我们可以使用排他思想。当点击按钮切换下一张图片的时候，我们可以先遍历所有的图片，把所有的图片移动到两边，然后将要移动的图片移动到中央来达到切换效果
在移动的过程中的动画和定时器设置的延迟可以自己添加一下。
左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动，可能还会出现其他问题。
本次现讲一下左右切换的思路。
