【HTML+CSS+JavaScript（jQuery）】轮播图

需求：轮播图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图效果</title>
    <style>
        .play {
            margin: 100px auto;
            width: 1226px;
            height: 460px;
            border: 1px solid #999;
            position: relative;
        }
        ul {
            list-style: none;
            margin:0;
            padding:0;
        }
        .play img {
            display: block;
            width: 1226px;
            height:460px;
        }
        .imglist li {
            position: absolute;
            left:0;
            top:0;
            opacity: 0;
            transition: opacity 1s;
        }
        .imglist li.current {
            
            opacity: 1;
        }

        .control-list {
            position: absolute;
            bottom:20px;
            right:20px;
        }
        .control-list span {
            font-size:0px;
            float:left;
            margin-right:5px;
            width:12px;
            height:12px;
            border:1px solid #999;
            border-radius: 7px;
            background: #999;
            cursor: pointer;
        }
        .control-list span.current {
            background: #fff;
        }
        .slide {
            position: absolute;
            top:50%;
            transform: translate(0, -50%);
            width:40px;
            height:80px;
            background:rgba(0,0,0,.6);
            color:#fff;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            line-height: 80px;
            cursor: pointer;
            opacity: .5;
            transition: .3s;
        }
        .slide:hover {
            opacity: 1;
        }
        .slide-left{
            left:0;
        }
        .slide-right {
            right:0;
        }
    </style>
</head>
<body>
    <div id="play" class="play">
        
        <ul class="imglist">
            <li class="current">
                <a href="#">
                    <img src="./images/play01.jpg" alt="">
                </a>
            </li>

            <li>
                <a href="#">
                    <img src="./images/play02.jpg" alt="">
                </a>
            </li>
            
            <li>
                <a href="#">
                    <img src="./images/play03.jpg" alt="">
                </a>
            </li>

            <li>
                <a href="#">
                    <img src="./images/play04.jpg" alt="">
                </a>
            </li>

            <li>
                <a href="#">
                    <img src="./images/play05.jpg" alt="">
                </a>
            </li>
        </ul>

        <div class="control-list">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>


        <div class="slide-list">
            <span class="slide slide-left"><</span>
            <span class="slide slide-right">></span>
        </div>

    </div>


    <script src="../jquery-3.3.1.js"></script>
    <script>
        //轮播图效果
        $(function(){
            var m = 0;             //循环变量
            var delay = 3000;     //轮播的时间间隔
            var length = 5;     //轮播的数量

            //设置定时
            var runTime = setInterval(runPlay, delay);


            //鼠标悬浮 定时停止
            $('#play').on('mouseenter', function(){
                clearInterval(runTime);
            }).on('mouseleave', function(){
                runTime = setInterval(runPlay, delay)
            });

            //给控制按钮 绑定 单击事件
            $('.control-list span').on('click', function(){
                //console.log($(this).index())
                m = $(this).index();
                controlImage(m);
            });

            //向右
            $('.slide-right').on('click', function(){
                m ++;
                if (m >= length) {
                    m = 0;
                }
                controlImage(m)
            });

            //向左 上一个
            $('.slide-left').on('click', function(){
                m --;
                if (m < 0) {
                    m = length-1
                }
                controlImage(m)
            })

            //定时函数
            function runPlay() {
                //循环变量累加
                m ++;
                //判断
                if (m >= length) {
                    m = 0;
                }
                //调用函数 控制图片
                controlImage(m)
            }

            //控制图片的变化
            // n表示 要第几个显示
            function controlImage(n) {
                $('.imglist li').removeClass('current').eq(n).addClass('current');
                $('.control-list span').removeClass('current').eq(n).addClass('current');
            }


        })
    </script>
</body>
</html>
【HTML+CSS+JavaScript（jQuery）】轮播图

猜你喜欢
