js 实现图片翻页问题！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 * {
            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;
        }

    </style>

</head>
<body>
<div id="box">
    <div id="title">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
 <!--<div id="float"></div>-->
 </div>
    <div id="content">
        <div id="main">
            <div id="color1">page1</div>
            <div id="color2">page2</div>
            <div id="color3">page3</div>
            <div id="color4">page4</div>
            <div id="color5">page5</div>
        </div>
    </div>
    <div id="left-a">&lt</div>
    <div id="right-a">&gt</div>
</div>
</body>
</html>
下面是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.length;i++){
        links[i].index = i;
        links[i].onclick = function () {
            for(var j=0;j<links.length;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，所以想请教一下大神该怎么解决这个问题啊

慕九州7009252

浏览 1834回答 2

2回答

马崇瀚

给你个思路...你排图片是1 2 3 4 5,现在需要排成5 1 2 3 4 5 1，点击的时候判断，如果点击5，并且当前在1，就会往回退，动画结束后位置弹到第二个5，如果点击1，并且当前在5，就会往前进，动画结束后位置弹到第一个1，

0 0

随时随地看视频慕课网APP