html5怎么实现图片翻页,js 实现图片翻页问题！

html>

Title

* {

margin: 0;

padding: 0;

}

#box {

width: 700px;

height: 300px;

border: 1px solid #ccc;

margin: 20px auto;

position: relative;

overflow: hidden;

}

/* .box:hover .right-a,.box:hover .left-a{

display: block;

}*/

#box #title {

height: 30px;

width: 100%;

background: #eee;

position: relative;

}

#box #title a {

text-decoration: none;

width: 20%;

height: 100%;

line-height: 30px;

font-size: 15px;

color: #009797;

float: left;

text-align: center;

position: relative;

}

#box #content {

width: 700px;

height: 270px;

position: relative;

}

#box #content #main{

width:3500px;

height: 270px;

position: absolute;

left:0;

top:0;

}

#box #content #main div {

width: 700px;

height: 270px;

float: left;

color: white;

font-size: 50px;

text-align: center;

line-height: 270px;

}

#box #left-a {

height: 70px;

width: 50px;

background: rgba(0, 0, 0, 0.5);

position: absolute;

left: 0;

top: 45%;

color: white;

font-size: 20px;

line-height: 70px;

text-align: center;

cursor: pointer;

display: none;

}

#box #right-a {

height: 70px;

width: 50px;

background: rgba(0, 0, 0, 0.5);

position: absolute;

top: 45%;

right: 0;

color: white;

font-size: 20px;

line-height: 70px;

text-align: center;

cursor: pointer;

display: none;

}

#box #content #main #color1 {

background: #ffb12f;

}

#box #content #main #color2 {

background: #00C378;

}

#box #content #main #color3 {

background: #26B2E3;

}

#box #content #main #color4 {

background: #E84C3D;

}

#box #content #main #color5 {

background: #F831FD;

}

1

2

3

4

5

page1

page2

page3

page4

page5

&lt

&gt

下面是js的内容window.onload = function () {

var box = document.getElementById('box');

var oTitle = document.getElementById('title');

var links = oTitle.getElementsByTagName('a');

var float = document.getElementById('float');

var oContent = document.getElementById('content');

//var divs = oContent.getElementsByTagName('div');

var oLeft = document.getElementById('left-a');

var oRight = document.getElementById('right-a');

var oMain = document.getElementById('main');

var timer = null;

var num1 = 0;

var num2 = 0;

box.onmouseover = function () {

oLeft.style.display = 'block';

oRight.style.display = 'block';

}

box.onmouseout = function () {

oLeft.style.display = 'none';

oRight.style.display = 'none';

}

for(var i=0;i

links[i].index = i;

links[i].onclick = function () {

for(var j=0;j

links[j].style.background = 'none';

}

this.style.background = 'red';

startMove(oMain,{left:-this.index*700})

}

}

}

function startMove(obj,json,fn){

var flag = true;//假设所有目标都到达目标值

clearInterval(obj.timer);

obj.timer = setInterval(function(){

for(var attr in json){

//1.取当前的值

var icur = 0;

if(attr =='opacity'){

icur = Math.round(parseFloat(getStyle(obj, attr))*100);

}else{

icur=parseInt(getStyle(obj, attr));

}

//2.算速度

var speed = (json[attr]-icur)/3;

speed = speed>0?Math.ceil(speed):Math.floor(speed);

//3.检测停止

if(icur!=json[attr]){

flag = false;

}

if(attr=='opacity'){

obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';

obj.style.opacity =(icur+speed)/100;

}else{

obj.style[attr]=icur+speed+"px";

}

}

if(flag){

clearInterval(obj.timer);

if(fn){

fun();

}

}

},30);

}

没做完，做到这我发现要是本来在1的时候点5中间可以看到是从234这几张图片这样过去的，我看那些用jquery做的1和5切换中间就不会这样，但是我还不会jquery，所以想请教一下大神该怎么解决这个问题啊