js实例-图片轮播-CSDN博客

本文链接：https://blog.csdn.net/crl744156212/article/details/79701667
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .out{
            width: 730px;
            height: 454px;
            margin: 50px auto;
            position: relative;
        }
        .out .img li{
            position: absolute;
            left: 0;
            top: 0;
        }
        .out .num{
            position: absolute;
            left:0;
            bottom: 20px;
            text-align: center;
            font-size: 0;
            width: 100%;
        }
        .out .btn{
            position: absolute;
            top:50%;
            margin-top: -30px;
            width: 30px;
            height: 60px;
            background-color: aliceblue;
            color: black;
            text-align: center;
            line-height: 60px;
            font-size: 40px;
            display: none;
        }
        .out .num li{
            width: 20px;
            height: 20px;
            background-color: black;
            color: #fff;
            text-align: center;
            line-height: 20px;
            border-radius: 60%;
            display: inline;
            font-size: 18px;
            margin: 0 10px;
            cursor: pointer;
        }
        .out .num li.active{
            background-color: red;
        }
        .out .left{
            left: 0;
        }
        .out .right{
            right: 0;
        }
        .out:hover .btn{
            display: block;
            color: white;
            font-weight: 900;
            background-color: black;
            opacity: 0.8;
            cursor: pointer;
        }
        .out img {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="out">
    <ul class="img">
        <li><a href="#"><img src="img/foucs-03.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/foucs-4.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/foucs-03.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/foucs-4.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/foucs-03.jpg" alt=""></a></li>
    </ul>

    <ul class="num"></ul>

    <div class="left btn"><</div>
    <div class="right btn">></div>

</div>

<script>
    $(function () {
        var lisize=$(".img li").size();//获取轮播小图标的个数
        for(var i=1;i<=lisize.length;i++){
            var li="<li>"+i+"</li>";
            $(".num").append(li);
        }
        $(".num li").eq(0).addClass("active");//为第一个li添加ative类

        $(".num li").mousemove(function () {
            $(this).addClass("active").siblings().removeClass("active");
            var index=$(this).index();
            i=index;
            $(".img li").eq(i).fadeIn(1000).fadeOut(1000);
        });

        i=0;
        var t=setInterval(move,1500);

        function move() {//图片向右滚动
            i++;
            if (i===lisize){
                i=0;
            }
            $(".num li").eq(i).addClass("active").siblings().removeClass("active");
            $(".num li").eq(i).stop().fadeIn(1000).siblings().fadeOut(1000);
        }

        function moveL() {//图片向左滚动
            i--;
            if (i===-1){
                i=lisize-1;
            }
            $(".num li").eq(i).addClass("active").siblings().removeClass("active");
            $(".num li").eq(i).stop().fadeIn(1000).siblings().fadeOut(1000);
        }

        $(".out").hover(function () {
            clearInterval(t);
        },function () {
            t=setInterval(move,1500);
        });

        $(".out .right").click(function () {
            move()
        });

        $(".out .left").click(function () {
            moveL();
        });

    });
</script>

</body>
</html>