轮播图

模拟京东商品轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link type="text/css" href="lunbotu.css" rel="stylesheet">
    <script src="jquery-3.5.1.js"> </script>
</head>
<body>
<div class="outer">
    <ul class="in_outer">
        <li><a><img src="wine.jpg" alt="茅台"></a></li>
        <li><a><img src="close.jpg" alt="衣服"></a></li>
        <li><a><img src="milk.jpg" alt="牛奶"></a></li>
        <li><a><img src="phone.jpg" alt="手机"></a></li>
        <li><a><img src="q.jpg" alt="衣服"></a></li>
    </ul>
    <ul class="num">
        <li class="new li1">1</li>
        <li class="li1">2</li>
        <li class="li1">3</li>
        <li class="li1">4</li>
        <li class="li1">5</li>
    </ul>
    <div class="left_button common"><</div>
    <div class="right_button common">></div>
</div>

<script>
    $('.num li').mouseover(
        function () {
            $(this).addClass('new')
            $(this).siblings().removeClass('new')
            const a=$(this).index()
            jj=a
            $('.in_outer li').eq(a).fadeIn(1000)
            $('.in_outer li').eq(a).siblings().fadeOut(1000)
        }
    )

    function move() {

        const b = $('.num').children().length
        if (jj == b - 1) {
            jj = -1
        }
        jj++;
        $('.num li ').eq(jj).addClass('new')
        $('.num li ').eq(jj).siblings().removeClass('new')
        $('.in_outer li').eq(jj).stop().fadeIn(1000)
        $('.in_outer li').eq(jj).siblings().stop().fadeOut(1000)
    }

    let time = setInterval(move, 2000);
    let jj = 0;
    $('.outer').hover(function () {
                clearInterval(time)
            },function () {
                time = setInterval(move, 2000)
    })

    $('.right_button').click(
        function () {
            move()
        }
    )

    $('.left_button').click(
        function () {
            if(jj==-1){
                jj=$('.num').children().length
            }
            jj--;
        $('.num li ').eq(jj).addClass('new')
        $('.num li ').eq(jj).siblings().removeClass('new')
        $('.in_outer li').eq(jj).stop().fadeIn(1000)
        $('.in_outer li').eq(jj).siblings().stop().fadeOut(1000)

        }
    )

</script>
</body>
</html>

scc文件代码

body{
    background-color: #8fade3;
}
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style-type: none;

}
.outer{
    margin: 50px auto;
    width: 590px;
    height:470px;
    position: relative;

}
.in_outer li{
    position: absolute;
    top: 0;
    left: 0;

}
.num{
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%;

}
.li1{
    width: 20px;
    height: 20px;
    color: white;
    display: inline-block;
    background-color: #5f5472;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    margin: 0 10px;
}
.common{
    position: absolute;
    width: 30px;
    height: 60px;
    /*top:50px;*/
    background-color: #5f5472;
    color: white;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    top: 50%;
    margin-top: -30px;
    display: none;

}
.left_button{
    left: 0;

}
.right_button{
    right: 0;
}
.outer:hover .common{
    display: block;
}

.new{
    background-color: red;
    color: black;
}

 

posted @ 2020-11-17 19:48  maday  阅读(83)  评论(0)    收藏  举报