javascript - 学习一个月自己做的轮播图 里面的出现的问题想请教一下。
漂亮男人
漂亮男人 2017-05-19 10:10:56
[JavaScript讨论组]

问题有两个 :

1,鼠标进入和移出只有第一次有用  后面就图片就开始乱切换了
2,点击右移按钮 图片不能从第一张切换到第5张 
做了一天了  求大神搭救!



   
   
   
   Document



    

漂亮男人
漂亮男人

全部回复(4)
高洛峰
var timer=setInterval(right,1500)
 $stp.mouseout(function(){
       timer = setInterval(right,1500)
})
 $stp.mouseover(function(){
        clearInterval(timer)
 })

鼠标移出的时候又重新设置定时器的话,记得赋值给timer,不然后面的clearInterval都不知道clear sei了~

阿神
 var timer=setInterval(right,1500)
        $stp.mouseout(function(){
            setInterval(right,1500)
        })
        $stp.mouseover(function(){
            clearInterval(timer)
        })
        

这个地方有问题,timer这个计时器一开始打开,第一次over后,关闭了这个计时器,再mouseout的时候开启了一个计时器 $stp.mouseout(function(){

            setInterval(right,1500)
        })

但这个计时器并不是timer,所以,你后面就不可能清除这个计时器了。

某草草
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        html{
            margin: 0;
            padding:0;
        }
        img{
            display: none;
        }

    </style>
    <title>Title</title>
</head>
<body>
    <p id="scroll" style="width: 400px;height:200px;padding: 20px ">
        <img src="1.bmp" alt="">
        <img src="2.bmp" alt="">
        <img src="3.bmp" alt="">
        <img src="4.bmp" alt="">
    </p>
    <script src="app.js"></script>
</body>
</html>
(function () {
    let scroll = document.getElementById("scroll");
    let images = Array.prototype.slice.call(document.querySelectorAll("#scroll > img"));
    
    let index = 0;
    images[index].style.display = "block";
    
    let startScroll = function () {
        return setInterval(
            function () {
                for(let image of images){
                    image.style.display = "none";
                }
                images[index].style.display = "block";
                index = (index+1)>3?0:index+1
            },
            1000
        );
    };

    let int = startScroll();

    scroll.addEventListener("mouseover",function (e) {
        clearInterval(int);
    });

    scroll.addEventListener("mouseout",function (e) {
        int = startScroll();
    })


})();
黄舟

为什么没人回答我第二个问题呢啊

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号