<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<input id="Button1" type="button" value="button" onclick="Move()" />
<div id="effect1" style=" position:absolutebackground-color:Redwidth:100pxheight:50px"></div>
<div id="effect2" style=" position:absolutebackground-color:Bluewidth:100pxheight:50px"></div>
<script type="text/javascript">
var startNum=8
var endNum=800
var startNum0=31
var endNum0=300
function Effect(element,prop,start,end,seconds,stop)
{
stop=stop||this
var e =document.getElementById(element)
var fps=30
var step=0
var cur=start
var sid
function m()
{
step=(end-start)/(seconds*fps)
cur+=step
e.style[prop]=cur
if(end>start)
{if(prop=='left')
{if(e.offsetLeft>end)
{alert(stop)
stop()
clearInterval(sid)
}}
else{
if(e.offsetTop>end)
{alert(stop)
stop()
clearInterval(sid)
}
}
}
else{
if(prop=='left')
{if(e.offsetLeft<=end)
{alert(stop)
stop()
clearInterval(sid)
}}
else{
if(e.offsetTop<=end)
{
stop()
clearInterval(sid)
}
}
}
}
this.Start = function ()
{
sid = setInterval(m,1000/fps)
}
}
function OnStop()
{
//document.bgColor="red"
var eff2 = new Effect("effect2","top",startNum0,endNum0,3)
eff2.Start()
var t
t=startNum0
startNum0=endNum0
endNum0=t
}
function Move()
{
var eff1 = new Effect("effect1","left",startNum,endNum,1,OnStop)
eff1.Start()
var t
t=startNum
startNum=endNum
endNum=t
}
</script>
<div>
</div>
</form>
</body>
</html>
在IE8下能运行，虽然还有些许JS错误，但问题不大！！！
你看这样行吗？
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0
padding:0
}
.show{
border:5px solid #c1c1c1
margin:100px auto
width:500px
height: 200px
overflow: hidden
}
.box{
width:400%
position: relative
cursor: pointer
}
ul{
list-style-type: none
}
.box ul li{
float:left
display: block
}
</style>
<script>
window.onload=function(){
function $(id){
return document.getElementById(id)
}
var num=0
function autoplay(){
num--
$("box").style.left=num+"px"
if(num==-1200){
num=0
}
}
var int=setInterval(autoplay,30)
$("box").onmouseover=function(){
clearInterval(int)
}
$("box").onmouseout=function(){
int=setInterval(autoplay,30)
}
}
</script>
</head>
<body>
<div class="show">
<div class="box" id="box">
<ul>
<li><img src="image/01.jpg" alt=""/></li>
<li><img src="image/02.jpg" alt=""/></li>
<li><img src="image/03.jpg" alt=""/></li>
<li><img src="image/04.jpg" alt=""/></li>
<li><img src="image/01.jpg" alt=""/></li>
<li><img src="image/02.jpg" alt=""/></li>
</ul>
</div>
</div>
</body>
</html>
我们在 CSS 阶段就已经接触到轮播图。通过轮播图我们可以达到一些好玩的特效，但使用 CSS 做出来的轮播图只有左右切换，渐变切换和简单的点击切换。局限性较大，观看效果也不佳。但当我们接触 js 之后，你就发现使用js来实现轮播图后，在看CSS实现轮播的效果就是...。我想说啥你知道的。废话不多说，咱们一起看看如何使用js来实现轮播效果。
（本文以阴阳师中“平安世界”模块的轮播图为例）
这个轮播图，我们通过两大模块构成；左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。
在使用js实现轮播图的效果前，先使用HTML和CSS完善这一模块的布局。
本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。
左右点击切换模块：
我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。
当我们点击右边按钮后，我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果
对每一张图片进行编码，以此来达到循环切换图片的效果。在切换图片时，我们可以使用排他思想。当点击按钮切换下一张图片的时候，我们可以先遍历所有的图片，把所有的图片移动到两边，然后将要移动的图片移动到中央来达到切换效果
在移动的过程中的动画和定时器设置的延迟可以自己添加一下。
左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动，可能还会出现其他问题。
本次现讲一下左右切换的思路。
