1-11圆点点击疑问

来源：1-13 作业题

xxxxxbilibli

2018-05-03 22:44:48

<!DOCTYPE html>
<html lang="en">
<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() {
        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');
    }
});

*{
    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;
}

圆点点击那个地方可以用dots.on('click',function());来写吗？，怎么写，想知道代码是怎样的

写回答

1回答