js简单轮播图

最新推荐文章于 2022-03-11 14:06:16 发布

逃离故街

最新推荐文章于 2022-03-11 14:06:16 发布

阅读量74

点赞数

本文链接：https://blog.csdn.net/qq_42896461/article/details/115054387

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        ul{
            list-style: none;
        }
        .imgs{
            width: 500px;
            height: 470px;
            overflow: hidden;
        }
        .dots{
            width: 164px;
            position: absolute;
            left: 250px;
            top: 450px;
            z-index: 999;
        }
        .dot{
            width: 10px;
            height: 10px;
            border: 2px solid #fff;
            border-radius: 10px;
            display: inline-block;
        }

    </style>
</head>
<body>
    <div class="ad">
        <ul id="imgs" class="imgs">
            <li class="img_li"><img src="img/1.jpg" ></li>
            <li class="img_li"><img src="img/2.jpg" ></li>
            <li class="img_li"><img src="img/3.jpg" ></li>
            <li class="img_li"><img src="img/4.jpg" ></li>
            <li class="img_li"><img src="img/5.jpg" ></li>
            <li class="img_li"><img src="img/6.jpg" ></li>
        </ul>
        <ul class="dots">
            <li data="1" class="dot" style="background-color: #fff;"></li>
            <li data="2" class="dot"></li>
            <li data="3" class="dot"></li>
            <li data="4" class="dot"></li>
            <li data="5" class="dot"></li>
            <li data="0" class="dot"></li>
        </ul>
    </div>
    
    <script>
        // 整合综合效果
        //封装一个函数，根据一个数字参数，显示指定的图片
        function change(n){
            var img_lis = document.querySelectorAll('.img_li');
            var dot_lis = document.querySelectorAll('.dot');
            for(var i=0; i<img_lis.length; i++)
            {
                //将所有的图片都隐藏
                //将所有的小白圈背景色去掉
                img_lis[i].style.display = 'none';
                dot_lis[i].style.background = '';


            }
            // 根据下表参数n 将指定的图片显示
            img_lis[n].style.display = 'block';
            //根据下标参数n 将指定的小白圈背景色加上
            dot_lis[n].style.background = 'white';
        }
        //自动切换
        var num = 0; //num 和timeout 一定要是全局的
        var timeout;
        function setTimer(){
            timeout = setInterval(function(){
            var img_lis = document.querySelectorAll('.img_li');
            num++;
            if(num==img_lis.length){
                num=0;
            }
            // 根据num显示对应的图片;
            change(num);
            },1000)
        }
        setTimer()
        //鼠标悬浮
        var dot_lis = document.querySelectorAll('.dot');
        for(var i=0; i<dot_lis.length; i++){
            (function(i){
                dot_lis[i].onmouseover = function(){
                // 鼠标悬浮，停止切换的定时器
                // 获取悬浮的小白圈的下表
                clearInterval(timeout);
                //调用change函数
                change(i);   
                num = i;//  如果需要让自动切换的图片按照之前的顺序继续 则设置num = i；
                }
                dot_lis[i].onmouseout = function(){
                    setTimer();
                }

            }(i))

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

逃离故街

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js简单轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> <style> ul{ list-st
复制链接

扫一扫