原生JS轮播图 --＞页面图片轮播

最新推荐文章于 2024-06-07 23:26:45 发布

xxshu_

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量376

点赞数 11

分类专栏： HTML+CSS JS 文章标签： javascript css css3

本文链接：https://blog.csdn.net/xxshu_WEBqd/article/details/135039726

版权

HTML+CSS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div{
            width: 927px;
            height: 521px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        #lbUl{
            width: 3708px;
            height: 521px;
        }
        #lbUl>li{
            float: left;
            width: 927px;
            height: 521px;
        }
        #left,#right{
            width: 30px;
            height: 50px;
            background: black;
            color: white;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            line-height: 50px;
            position: absolute;
            cursor: pointer;
        }
        #left{
            top: 235px;
            left: 0;
            opacity: 0;
        }
        #right{
            top: 235px;
            right: 0;
            opacity: 0;
        }
        #dot{
            width: 120px;
            height: 20px;
            text-align: center;
            line-height: 10px;
            position: absolute;
            bottom: 20px;
            left: 405px;
            /*border: 1px solid red;*/
            opacity: 0;
        }
        #dot li{
            float: left;
            width: 20px;
            height: 20px;
            background: black;
            border-radius: 20px;
            margin-left: 5px;
            cursor: pointer;
        }
        div:hover #dot{
            opacity: 1;
        }
        div:hover #left{
            opacity: 1;
        }
        div:hover #right{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div>
        <ul id="lbUl">
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
        </ul>
        <div id="left">&lt;</div>
        <div id="right">&gt;</div>

        <ul id="dot">
            <li onclick="dotSlideshow(0)"></li>
            <li onclick="dotSlideshow(1)"></li>
            <li onclick="dotSlideshow(2)"></li>
            <li onclick="dotSlideshow(3)"></li>
        </ul>
    </div>
</body>

<script>
    let lbUl=document.getElementById('lbUl');  //图片ul
    let left=document.getElementById('left');  //上一个
    let right=document.getElementById('right');  //下一个
    let allLi=lbUl.getElementsByTagName('li');  //全部图片的li
    let dot=document.getElementById('dot');  //圆点ul
    let dotLi=dot.getElementsByTagName('li');  //所有圆点li
    let numIndex=0;
    let interval;

    autoPlay();
    // 自动轮播
    function autoPlay(){
        // 设置轮播图每2s执行一次
        interval=setInterval(nextSlideshow,2000);
    }

    // 切换下一个
    function nextSlideshow(){
        numIndex++;
        if(numIndex>=allLi.length){
            numIndex=0;
        }
        // console.log(allLi[0].offsetWidth);  //927
        lbUl.style.transform=`translateX(${-numIndex*allLi[0].offsetWidth}px)`;
        // lbUl.style.transform='translateX('+(-numIndex*allLi[0].offsetWidth)+'px)';

        dotNextPreSlideshow();
    }
    
    // 切换上一个
    function previousSlideshow(){
        numIndex--;
        if(numIndex<0){
            numIndex=allLi.length-1;
        }
        lbUl.style.transform=`translateX(${-numIndex*allLi[0].offsetWidth}px)`;
        // lbUl.style.transform='translateX('+(-numIndex*allLi[0].offsetWidth)+'px)';

        dotNextPreSlideshow(); 
    }

    //左右切换到哪一个，对应哪个圆点就显示红色，其他显示黑色
    function dotNextPreSlideshow(){
        for(let i=0;i<dotLi.length;i++){
            if(i==numIndex){
                dotLi[i].style.background="red";

            }else{
                dotLi[i].style.background="black";
            }
        }
    }

    //左右点击轮播
    left.addEventListener('click',function(){
        clearInterval(interval);
        previousSlideshow();
        interval=setInterval(nextSlideshow,2000);
    })
    right.addEventListener('click',function(){
        clearInterval(interval);
        nextSlideshow();
        interval=setInterval(nextSlideshow,2000);
    })


    // 圆点切换轮播图
    function dotSlideshow(a){
        clearInterval(interval);

        // console.log(a);
        numIndex=a;
        lbUl.style.transform='translateX('+(-numIndex*allLi[0].offsetWidth)+'px)';

        // 点击的当前圆点显示红色，其他显示黑色
        for(let i=0;i<dotLi.length;i++){
            if(i==a){
                dotLi[i].style.background="red";

            }else{
                dotLi[i].style.background="black";
            }
        }

        interval=setInterval(nextSlideshow,2000);
    }
</script>