1-11疑问

*{
    margin: 0;
    padding: 0;
}
.main{
    width: 1200px;
    height: 460px;
    border: 10px #bbbbbb solid;
    position: relative;
    margin: 0 auto;
}
.banner{
    width: 1200px;
    height: 460px;
    overflow: hidden;
}
.img{
    width: 1200px;
    height: 460px;
    position: absolute;
    background-repeat: no-repeat;
    display: none;
}
.img-ac{
    display: block;
}
.pre{
    width: 40px;
    height: 60px;
    position: absolute;
    top:50%;
    margin-top: -30px;
    line-height: 75px;
    text-align: center;
    cursor:pointer;
}
.pre:hover{
    background-color: black;
    opacity: 0.5;
}
.prel{
    left: 0;
}
.prer{
    right: 0;
}
.dots{
    position: absolute;
    right: 20px;
    bottom: 24px;
    text-align: right;
}
.dots span{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(7,17,27,0.4);
    margin-right: 5px;
    box-shadow: 0 0 0 3px rgba(255,255,255,1) inset;
    cursor:pointer;
}
.dots span.active{
    box-shadow: 0 0 0 3px rgba(7,17,27,0.4) inset;
    background: #ffffff;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="main" id="main">
    <div class="banner">
        <div class="img img-ac"><img src="img/1.jpg"></div>
        <div class="img"><img src="img/2.jpg"></div>
        <div class="img"><img src="img/3.jpg"></div>
        <div class="img"><img src="img/4.jpg"></div>
        <div class="img"><img src="img/5.jpg"></div>
    </div>
    <!--上一张下一张-->
    <div class="pre prel"><img src="img/pre2.png"></div>
    <div class="pre prer"><img src="img/pre.png"></div>
    <!--圆点导航-->
    <div class="dots" id="dots">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="js/javascript.js"></script>
</body>
</html>

$(function() {
    var index=0;//索引
    var timing=null;
    var img=$('.img');
    var dots=$('#dots>span');
    //划过停止定时器
    $('.main').mouseenter(function() {
        if (timing) {clearInterval(timing);}
    });
    //离开开始定时器
    $('.main').mouseleave(function() {
        //定时器
        timing=setInterval(function() {
            index++;
            if (index>=img.length) index=0;
            changeImg();
        },2000);
    });
    //网页打开调用离事件
    $('.main').mouseleave();
    //点击上一张
    $('.prel').click(function() {
        index--;
        if (index<0) index=img.length-1;
        changeImg();
    });
    //点击下一张
    $('.prer').click(function() {
        index++;
        if (index>=img.length) index=0;
        changeImg();
    });
    //圆点点击事件
    //老师，这个圆点点击能用dots.on('click',function())来写吗，怎么写呢？
    dots.each(function(event) {
        $(this).click(function() {
            index=event;
            changeImg()
        })
    });
    //切换图片
    function changeImg() {
        img.removeClass('img-ac');
        img.eq(index).addClass('img-ac');
        dots.removeClass('active');
        dots.eq(index).addClass('active');
    }
});

当打开网页时，鼠标一开始就是就在轮播图里时，图片也会自动播放，这个bug怎么处理？

xxxxxbilibli 2018-05-10

源自：jQuery插件 1-13 作业题

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2018-05-11 10:29:42

因为mouseenter移入事件，是需要一个动作，一个过程才能执行代码，产生效果的。一打开页面鼠标就在轮播图上面，图片自动播放是正常的，因为这时鼠标并没有移动，所以会出现这种情况。

收起回答

xxxxxbilibli 提问者 #1

但是在这种情况下鼠标移出再移入也不会停止了播放为什么

2018-05-11 16:13:33
好帮手慕星星回复提问者 xxxxxbilibli #2

经测试鼠标移出再移入是可以停止了播放的呢。自己再测试一下吧。

2018-05-11 18:09:12
好帮手慕星星回复提问者 xxxxxbilibli #3

你可以使用Chrome浏览器测试一下呢。

2018-05-11 18:16:06