轮播图

最新推荐文章于 2025-05-22 13:28:11 发布

勤奋的木星

最新推荐文章于 2025-05-22 13:28:11 发布

阅读量405

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Jupiter_zhao/article/details/100734790

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <style>
        *{padding: 0;margin: 0;}
        ul,li{list-style-type: none;}
        div.main{width: 590px;height: 470px;margin: 50px auto;position: relative;}
        div.main ul>li{display: none;}
        div.main ul>li.on{display: block;}
        div.main ul.cs img{width: 590px;height: 470px;}

        div.main a.arrow{display: inline-block;width: 40px;height: 40px;
            background: rgba(0, 0, 0, 0.3);text-align: center;line-height: 40px;font-size: 20px;
            text-decoration: none;color: white;position: absolute;top: 50%;margin-top: -20px;}
            div.main a.ar{right: 0px;}
        div.main a.arrow:hover{background: rgba(0, 0, 0, 0.6);}
        div.main ol.slt {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;}
        div.main ol.slt li{float: left;width: 10px;height: 10px;border-radius: 50%;
            border: 1px solid gray;margin-right: 10px;}
        div.main ol.slt li.current{background: white;}
    </style>
</head>
<body>
    <!-- 轮播区 -->
    <div class="main">
        <!-- 轮播图 -->
        <ul class="cs">
            <li class="on"><a href="javascript:void(0)"><img src="images/p01.webp" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="images/p02.webp" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="images/p03.webp" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="images/p04.webp" alt=""></a></li>
        </ul>
        <!-- 指示器 -->
        <ol class="slt">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <!-- 箭头 -->
        <a href="javascript:void(0)" class="arrow al">&lt;</a>
        <a href="javascript:void(0)" class="arrow ar">&gt;</a>
    </div>

    <script>
        var o=document.querySelector('div.main');
        var lis=document.querySelectorAll("div.main ul>li");
        var as=document.querySelectorAll('a.arrow');
        var ols=document.querySelectorAll('ol.slt li');
        var curIndex=0;//保存显示的轮播图的索引
        var len=lis.length;//轮播图的个数
        var timer;//轮播的id
        
        //1.自动轮播
        timer=setInterval(moveRight,2000);
        //2.箭头轮播
        //左箭头
        as[0].onclick=function(){
            moveLeft();
        };
        //右箭头
        as[1].onclick=function(){
            moveRight();
        };
        //3.鼠标经过轮播区，暂停轮播
        o.onmouseenter=function(){clearInterval(timer)};
        //鼠标离开轮播区，继续轮播
        o.onmouseleave=function(){ timer=setInterval(moveRight,2000);};
        //4.指示器轮播
        for(var j=0;j<len;j++){
            ols[j]._index=j;//添加属性，保存位置
            ols[j].onclick=function(){
                //上一次被选中的改为非选中
                ols[curIndex].className='';
                lis[curIndex].className="";//上一个显示的轮播图，消失

                //被点击的li添加class
                this.className='current';
                lis[this._index].className="on";//显示对应的轮播图
                //修改被选中的索引
                curIndex=this._index;
            };
        }

        //向右轮播
        function moveRight(){
            lis[curIndex].className='';//当前显示的轮播图变为隐藏
            ols[curIndex].className='';//上一个指示器改变
            curIndex++;//索引递增
            if(curIndex==len){
                curIndex=0;//最后一张时，切换为第一张
            }
            lis[curIndex].classList='on';//下一张显示
            ols[curIndex].className='current';//下一个指示器改变
        }

        //显示上一张
        function moveLeft(){
            lis[curIndex].className='';//当前显示的轮播图变为隐藏
            ols[curIndex].className='';//上一个指示器改变
            curIndex--;
            if(curIndex==-1){
                curIndex=len-1;
            }
            lis[curIndex].classList='on';//上一张显示
            ols[curIndex].className='current';//下一个指示器改变
        }
    </script>