轮播图

Forever77 2021-08-04 原文

一共6张图片，每1.5s自动切换播放图片，鼠标在图片内则停止自动播放。可通过底部列表手动播放图片，也可通过图片两侧按钮手动点击切换图片。效果图如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.js"></script>
    <style>
        .outer{
            width: 790px;
            height: 340px;
            margin: 80px auto;
            position: relative;
        }
        .img li{
            position: absolute;
            list-style: none;
            top: 0;
            left: 0;
        }
        .num{
               position: absolute;
               bottom: 10px;
               left: 270px;
               list-style: none;
        }

        .num li{
            display: inline-block;
            width: 18px;
            height: 18px;
            background-color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 18px;
            margin-left: 10px;
           }
        .btn{
            position: absolute;
            width: 30px;
            height: 60px;
            background-color: lightgrey;
            color: white;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            top: 140px;
            opacity: 0.6;
        }
        .left{left: 0;}
        .right{right: 0}
        .outer:hover .btn{display: block;}
        .num .active{background-color: cadetblue}
    </style>
</head>
<body>
<div class="outer">
    <ul class="img">
        <li><a href=""><img src="img/1.jpg" alt=""></a></li>
        <li><a href=""><img src="img/2.jpg" alt=""></a></li>
        <li><a href=""><img src="img/3.jpg" alt=""></a></li>
        <li><a href=""><img src="img/4.jpg" alt=""></a></li>
        <li><a href=""><img src="img/5.jpg" alt=""></a></li>
        <li><a href=""><img src="img/6.jpg" alt=""></a></li>
    </ul>

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

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

 <script>
        var i=0;
        //自动创建轮播图底部轮播标签
        for (var j=0;j<$(\'.img li\').length;j++){
            $(\'.num\').append(\'<li></li>\')
        }
        //给第一张图添加active
        $(\'.num li\').eq(0).addClass(\'active\')

        //底部轮播标签手动轮播
        $(\'.num li\').mouseover(function () {
            i=$(this).index();//鼠标悬浮标签的索引值
            $(this).addClass(\'active\').siblings().removeClass(\'active\');;
            $(\'.img li\').eq(i).fadeIn(500).siblings().fadeOut(500);
        })

        //底部轮播标签自动轮播
        var c=setInterval(toRight,1500);
        var i=0;
        function toRight() {
           i++;
           if (i==$(\'.img li\').length)
               i=0;
           $(\'.num li\').eq(i).addClass(\'active\').siblings().removeClass(\'active\') ;
           $(\'.img li\').eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
        }
        function toLeft(){
            i--;
            if (i==-1)
                i=$(\'.img li\').length-1;
            $(\'.num li\').eq(i).addClass(\'active\').siblings().removeClass(\'active\') ;
            $(\'.img li\').eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
        }

        //鼠标悬浮在当前图片时停止自动轮播，鼠标移除时从移出前的位置开始轮播
        $(\'.outer\').hover(function () {
            clearInterval(c);
        },function () {
            c=setInterval(toRight,1500);
        })
        $(\'.right\').click(toRight)
        $(\'.left\').click(toLeft)

    </script>