                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /焦点图轮播特效

在切换时有动画效果这里总是提示有错误：SyntaxError: expected expression, got keyword 'else' }else{ ，这是为什么呀？求救..非常感谢

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src='js/jquery.1.10.2.js' type="text/javascript"></script>
    <title>焦点轮播图</title>
    <style type="text/css">
*{ margin: 0; padding: 0; text-decoration: none;}
body { padding: 20px;}
#container {
    width: 600px;
    height: 400px;
    border: 3px solid #333;
    overflow: hidden;
    position: relative;
}
#list {
    width: 4200px;
    height: 400px;
    position: absolute;
    z-index: 1;
}
#list img { float: left;}

#buttons {
    position: absolute;
    height: 10px;
    width: 100px;
    z-index: 2;
    bottom: 20px;
    left: 250px;
}
#buttons span {
    cursor: pointer;
    float: left;
    border: 1px solid #fff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333;
    margin-right: 5px;
}
#buttons .on { background: orangered;}
.arrow {
    cursor: pointer;
    display: none;
    line-height: 39px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 2;
    top: 180px;
    background-color: RGBA(0,0,0,.3);
    color: #fff;
}
.arrow:hover {
    background-color: RGBA(0,0,0,.7);/*尖头的透明度修改效果css3的属性值*/
}
#container:hover .arrow { display: block;}/*尖头的隐藏效果*/
#prev { left: 20px;}
#next { right: 20px;}
    </style>

</head>
<script type="text/javascript">//1、获取5个标签2、点击按钮让它滚动3、小圆点亮起来
    //1、加载完后获取事件
    window.onload =function(){
    //通过get..来获取#container
    var container =document.getElementById('container');
    //通过get..来获取#list
    var list = document.getElementById('list');
    //通过get..来获取#buttons里的span
    var buttons = document.getElementById('buttons').getElementsByTagName('span');
    //通过get..来获取#prev
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    //定义一个变量用来存放当前是第几张图片或者说是当是第几张小图片的时候小圆点就移到哪
    var index =1;
      //3、小圆点亮起来
    function showButton(){
        //for循环让圆点亮一个关闭一个
        for (var i = 0; i < buttons.length; i++){
            if(buttons[i].className == 'on'){
                buttons[i].className ='';
                 break;
            }

        }
        //当图片在第一张图的时候圆点亮起来，所以改变下属性就可以啦，在css中有给它的属性定一个class="on",在这引用就可以啦
        buttons[index - 1].className = 'on';

    }

    //2、事件绑定
    /*next.onclick = function(){
    //点击右边它的时候右尖头向左移动，所以改变左边的值，一张图宽：600
        //实现了点击右边尖头的时候右尖头向左移动
        list.style.left = parseInt(list.style.left)-600 + 'px';//parseInt:转换成数值；
        };
    prev.onclick = function(){
        //实现了点击左边尖头的时候左尖头向右移动
        list.style.left = parseInt(list.style.left)+600 + 'px';
    };封装它，用的时候如下面传一个正值一个负值*/
    function animate(offset){
         var newLeft = parseInt(list.style.left) + offset;

        //切换时的动画效果
        var time = 300 ;//位移总的时间
        var interval = 10 ;//位移间隔时间
        var speed = offset/(time/interval);//每次位移量
        //判断什么时候位移
        function go(){
            if ((speed < 0 && parseInt(list.style.left)>newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft))//当它（speed<0)时向左移动或当（speed>0）时向右移动
                list.style.left = parseInt(list.style.left) + speed +'px';

        }else{//这句总是提示有错误，这是为什么呀？
            list.style.left = newLeft +'px';

                //做个判断让它一直循环下去
                if(newLeft > -600){
                   list.style.left = -3000 + 'px';
                }
                if(newLeft < -3000){
                    list.style.left = -600 +'px';
                }

        }


        /*list.style.left = newLeft +'px';
        //做个判断让它一直循环下去
        if(newLeft > -600){
            list.style.left = -3000 + 'px';
            }
        if(newLeft < -3000){
            list.style.left = -600 +'px';
            }*/
        }

    next.onclick = function(){
        if(index == 5){
            index = 1;
        }else{
            index += 1;
        }
        //index += 1;加了上面if就不需要它了
        showButton();//点右尖头要加1；
        animate(-600);
        }
    prev.onclick = function(){
        if(index == 1){
            index = 5;
        }else{
            index -= 1;
        }
        //index -= 1;加了上面if就不需要它了
        showButton();
        animate(600);
        }

//小圆点切换效果
for(var i=0;i<buttons.length;i++){
    buttons[i].onclick = function(){
       if(this.className == 'on'){
        return;
       }
        var myIndex = parseInt(this.getAttribute('index'))//获取节点本身的值
        //getAttributedomo二级的方法它可以获取自定义的属性
        var offset = -600 * (myIndex - index);//当前值-目标值*-600=点击圆点时的偏移量
        animate(offset);//用它把偏移量值传进去
        index = myIndex;//切换完了刷新下归位
        showButton();//样式调用下圆点背景色
        //debugger;调试器
    }
}

};

</script>
<body>

<div id="container">
    <div id="list" style="left: -600px;">
        <img src="img/5.jpg" alt="1"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="5"/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow"><</a>
    <a href="javascript:;" id="next" class="arrow">></a>
</div>

</body>

</html>