动画效果，支持事件Callback调用，支持参数自定义配置，如：
speed：600 切换速度、autoplay:true
是否自动播放，在浏览器兼容方面，需要浏览器支持CSS3变换变形属性，不支持的将看不到3D特效！
跟普通的左右切换轮播图类似，但是它看起来是首尾相连的。
首先来讲一下我的思路：
我们要想无缝切换图片，必须要在所有图片的最后添加一张第一张图片，因为要实现从最后一张切换到第一张时有过渡效果；
之后我们要让你处在第一张时，向前向后切换都要进行 隐式切换 。
我们也可以将所有的轮播图的图片外面套一层div，并设置绝对定位，然后使用 父相子绝 ，来让图片可以相对父元素定位（父元素就是装轮播图的盒子）
之后，只要我们让不该显示的图片定位到盒子范围外的位置（父元素设置overflow:hidden），在需要切换图片时，我们就把当前图片前后的图片定位到对应位置，然后通过setInterval方法循环改变其位置实现轮播效果。之后更改当前图片的索引即可。
<!DOCTYPE HTML><html>
<head>
<title>JS无缝滚动图片</title>
<meta charset=UTF-8 />
<style type="text/css">
* {
margin: 0
padding: 0
}
#div2 {
margin: auto
width: 602px
overflow: hidden
left: 200px
}
#div1 {
position: relative
left: 0px
width: 1200px
}
#div1 li {
list-style-type: none
float: left
width: 200px
height: 180px
}
img {
width: 200px
height: 180px
}
ul#ul1 {
position: relative
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oUl = document.getElementById ('ul1')
var t,o
var speed = 0
var funny = function ()
{
t && clearInterval(t)
t = setInterval (function ()
{
speed -= 200/11
if(speed<-200){
speed=0
oUl.appendChild (oUl.children[0])
t && clearInterval(t)
t = null
o && clearTimeout(o)
o=setTimeout(funny,1000)
}
oUl.style.left = speed + "px"
}, 60)
}
funny ()
}
</script>
</head>
<body>
<div id="div2">
<div id="div1">
<ul id="ul1">
<li><img src="../../images/choose.png">
</li>
<li><img src="../../images/deck.png">
</li>
<li><img src="../../images/duel.png">
</li>
<li><img src="../../images/list.png">
</li>
</ul>
</div>
</div>
</body>
</html>
