自动播放时小圆点鼠标移进移出问题 -慕课网

自动播放时小圆点鼠标移进移出问题

来源：7-1 自动播放

qq_且行且珍惜_32

2019-08-10 16:43

自动播放时鼠标移进移出没效果，小圆点每次移动到第二个。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <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);}
        #container:hover .arrow { display: block;}
        #prev { left: 20px;}
        #next { right: 20px;}
    </style>

</head>
<body>

<div id="container">
    <div id="list" style="left: -600px;">
        <img src="__STATIC__/index/images/pc/5.jpg" alt="1"/>
        <img src="__STATIC__/index/images/pc/1.jpg" alt="1"/>
        <img src="__STATIC__/index/images/pc/2.jpg" alt="2"/>
        <img src="__STATIC__/index/images/pc/3.jpg" alt="3"/>
        <img src="__STATIC__/index/images/pc/4.jpg" alt="4"/>
        <img src="__STATIC__/index/images/pc/5.jpg" alt="5"/>
        <img src="__STATIC__/index/images/pc/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">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>
</body>
<script src="__STATIC__/index/js/jquery.1.10.2.js"></script>
<script type="text/javascript">
    //数据初始化加载
    window.onload = function () {
        var container = document.getElementById('container')//获取容器
        var list = document.getElementById('list');
        var buttons = document.getElementById('buttons').getElementsByTagName('span');
        var prev = document.getElementById('prev');//左箭头容器
        var next = document.getElementById('next');//右箭头容器
        var index = 1;
        var animated = false; //动画是否在运行变量
        var timer ; //定时器变量

        //小圆点切换
        function showButton() {
            for(i=0; i<buttons.length; i++){
                if(buttons[i].className == 'on'){
                    buttons[i].className = '';
                    break;
                }
            }
            buttons[index - 1].className = 'on';

        }
        //点击箭头向左切换图片
        function animate(offset) {
            animated = true; //动画在运行时为true；
            var newLeft = parseInt(list.style.left) + offset;
            var time = 600;//位移总时间
            var interval = 10 ; //位移间隔10毫秒
            var speed = offset/(time/interval); //每次的位移量

            //图片位移动画效果
            function go(){
                if( (speed < 0 && parseInt(list.style.left)> newLeft) ||(speed > 0 && parseInt(list.style.left)< newLeft) ){
                    list.style.left =  parseInt(list.style.left) + speed + 'px';//把字符串转成数字
                    setTimeout(go,interval);//setTimeout:设置定时器（执行一次）
                }else{
                    animated = false; //动画在运行时为false；
                    list.style.left = newLeft + 'px';
                    if(newLeft > -600){
                        list.style.left = -3000 + 'px';
                    }
                    if(newLeft < -3000){
                        list.style.left = -600 + 'px';
                    }
                }
            }
            go();

        }
        //自动播放(原理：每隔1秒执行点击右箭头操作)
        function play(){
            timer = setInterval(function () { //setInterval:设置定时器（执行多次）
                next.onclick();
            },3000);
        }

        //鼠标移上去停止动画
        function stop(){
            clearInterval(timer);//清除定时器
        }

        //点击箭头向右切换图片
        next.onclick = function () {
            if(index == 5){
                index = 1;
            }else{
                index += 1;
            }

            showButton();
            if(!animated){
                animate(-600) //把字符串转成数字
            }

        };
        prev.onclick = function () {
            if(index == 1){
                index = 5;
            }else{
                index -= 1;
            }
            showButton();
            if(!animated){
                animate(600) //把字符串转成数字
            }

        };

        //点击某个小圆点 切换到当前原点对应的图片
        for (i=0; i<buttons.length; i++){
             buttons[i].onclick = function () {
                 if(this.className == 'on'){
                    return;
                 }
                 var myIndex = this.getAttribute('index');//获取span标签的index值  getAttribute：获取某个二级自定义属性的值
                 var offset = -600 * (myIndex - index);

                 if(!animated){
                     animate(600) //把字符串转成数字
                 }
                 index = myIndex;
                 showButton();
             };
        }
        container.onmouseover = stop();//鼠标移进停止位移动画
        container.onmouseout = play();//鼠标移出恢复位移动画
        play();//初始化 自动播放状态
    };
</script>
</html>

写回答关注