切换页面一段时间后，再切回来轮播图使劲滚！-慕课网

首页课程实战体系课手记专栏慕课教程

切换页面一段时间后，再切回来轮播图使劲滚！

来源：6-1 动画函数

穷仔仔3432743

2016-10-27 20:27

切换页面一段时间后，再切回来轮播图使劲滚！求大神帮忙解决，快快。拜托

写回答关注

4回答

debug新手: 2018-07-17 20:28:17

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
 * {
            margin: 0;
 padding: 0;
 }
        ul li {
            list-style: none;
 float: left;
 /*display: none;*/
 }
        ul li a {
            draggable: false;
 }
        img {
            vertical-align: top;
 draggable: false;
 -webkit-tap-highlight-color:transparent;
 }
        #box {
            position: relative;
 width: 520px;
 height: 280px;
 border: 1px solid #666;
 /*padding: 5px;*/
 margin: 200px auto;
 overflow: hidden;
 }
        #slider {
            width: 520px;
 height: 280px;
 position: relative;
 }
        ul {
            width: 1000%;
 position: absolute;
 left: 0;
 top: 0;
 }
        ol {
            /*width: 200px;*/
            /*height: 20px;*/
 position: absolute;
 left: 50%;
 bottom: 20px;
 transform: translateX(-50%);
 }
        ol li {
            float: left;
 list-style: none;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: silver;
 color: #fff;
 text-align: center;
 margin: 5px;
 cursor: pointer;
 -webkit-touch-callout: none; /* iOS Safari */
 -webkit-user-select: none; /* Chrome/Safari/Opera */
 -khtml-user-select: none; /* Konqueror */
 -moz-user-select: none; /* Firefox */
 -ms-user-select: none; /* Internet Explorer/Edge */
 user-select: none; /* Non-prefixed version, currently
         not supported by any browser */

 }
        .current {
            background-color: orange;
 }
    </style>
</head>
<body>
    <div id="box">
        <div id="slider">
            <ul>
                <li><a href="" ondragstart='return false;'><img src="images/01.jpg" alt=""/></a></li>
                <li><a href=""><img src="images/02.jpg" alt=""/></a></li>
                <li><a href=""><img src="images/03.jpg" alt=""/></a></li>
                <li><a href=""><img src="images/04.jpg" alt=""/></a></li>
                <li><a href=""><img src="images/05.jpg" alt=""/></a></li>
            </ul>
        </div>
    </div>
</body>
<script>
//    document.ondragstart=function(e){
//        e.preventDefault();
//        return false;
//    }
//
//    document.onselectionchange =function(e){
//        e.preventDefault();
//        return false;
//    }


 let box = document.getElementById("box");
 let slider = document.getElementById("slider");
 let ul = slider.children[0];
 ul.appendChild(ul.children[0].cloneNode(true));
 let ulLis = ul.children;
 let ol = document.createElement("ol");
 box.appendChild(ol);
 for ( let i = 0; i < ulLis.length - 1; i++) {
 let li = document.createElement("li");
 ol.appendChild(li);
 li.innerText = i + 1;
    }
 let olLis = ol.children;
 olLis[0].className = "current";
 function animate(obj, target) {
 if(obj.timer){
 clearInterval(obj.timer);
        }
 let speed = target > obj.offsetLeft ? 10 : -10;
 obj.timer = setInterval(function() {
 obj.style.left = obj.offsetLeft + speed + "px";
 let result = target - obj.offsetLeft;
 if(Math.abs(result) <= 10) {
 clearInterval(obj.timer);
 obj.style.left = target + "px";
            }

        }, 10)
    }
 for (let i = 0; i < olLis.length; i++) {
 olLis[i].index = i;
 olLis[i].onclick = function () {
 for (let i = 0; i < olLis.length; i++) {
 olLis[i].className = "";
            }
 this.className = "current";

 animate(ul, -this.index * 520);
//            ul.style.left=-this.index * 520+'px';
 squre = key = this.index;
        }
    }
 let timer = null;
 let key = 0;
 let squre = 0;
 timer = setInterval(autoplay,1000);
 document.addEventListener('visibilitychange',function(){ //浏览器切换事件
 if(document.visibilityState=='hidden') { //状态判断
//                timer = null;
 clearInterval(timer);

    }else {
 timer = setInterval(autoplay,1000);
//        key++;
////        alert(key,squre);
//            timer;
//        if (key > ulLis.length - 1) {
//            ul.style.left = 0;
//            key = 1;
//        }
//        animate(ul, -key * 520);
//        squre++;
//        if (squre > olLis.length -1) {
//            squre = 0;
//        }
//        for (let i = 0; i < olLis.length; i++) {
//            olLis[i].className = "";
//        }
//        olLis[squre].className = "current";

 }
});

document.addEventListener('visibilitychange',function() { //浏览器切换事件
 if (document.visibilityState == 'visible') { //状态判断
//                timer = null;
 timer;

    }
})






 function autoplay () {
//        console.log(1);
//        let jilu = location.href;
//        if (location.href !== jilu) {
//            return;
//        }
 key++;
 if (key > ulLis.length - 1) {
 ul.style.left = 0;
 key = 1;
        }
 animate(ul, -key * 520);
 squre++;
 if (squre > olLis.length -1) {
 squre = 0;
        }
 for (let i = 0; i < olLis.length; i++) {
 olLis[i].className = "";
        }
 olLis[squre].className = "current";
    }

 box.onmouseover = function() {
 clearInterval(timer);
    }
 box.onmouseout = function () {
 timer = setInterval(autoplay, 1000);
    }
slider.ondragstart = function () {
 return false;
}
//    window.onload = function () {
////        clearInterval(obj.timer);
//        ul.style.display = "show";
//    }




</script>
</html>

css和js都在一个页面上写着,html结构中的图片路径自己改一下应该就能看到效果了

0 0

慕仰6117958

2017-06-25 23:57:12

把定时器清除，只留下一个定时器。
var play;
if(play){
clearInterval(play);
play=null;
}

0 0
小白白白白白白白白

2016-11-16 18:17:13

我也是这个问题的样子！！你解决没！！

1 0

rainy_...

把你代码发给我看一下，我的已经解决了

2016-12-06 16:28:51

共 1 条回复 >
花事了了花事花了了

2016-11-03 18:52:13

代码呢？

0 0

焦点图轮播特效

通过本教程学习您将能掌握非常实用的焦点图轮播特效的制作过程

65279 学习 · 611 问题

查看课程

相似问题

请问当我把这个轮播图页面打开在浏览器，然后去浏览其他网页，在回到轮播页面，那个轮播图会有很长一段时间在快速切换页面

回答 1

轮播图片切换不完整

回答 1

发现一个轮播图切换有BUG

回答 3

当页面不关闭，切出去间隔一会在切回来，图片会快速的滚动

回答 1

为什么我切换时，图片之间会出现间隙

回答 1

打开慕课网App查看更多内容