js轮播图

最新推荐文章于 2023-09-17 14:12:21 发布

lanfuA

最新推荐文章于 2023-09-17 14:12:21 发布

阅读量109

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/lanfuA/article/details/118457961

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head>

<body>
    <div class="swiper">
        <div class="imgList">
            <div class="imgItem active" style="background-image: url(lbt/img1.webp);background-size: 100% 100%;"></div>
            <div class="imgItem" style="background-image: url(lbt/img2.jpg);background-size: 100% 100%;"></div>
            <div class="imgItem" style="background-image: url(lbt/img3.webp);background-size: 100% 100%;"></div>
            <div class="imgItem" style="background-image: url(lbt/img4.webp);background-size: 100% 100%;"></div>
            <div class="imgItem" style="background-image: url(lbt/img5.webp);background-size: 100% 100%;"></div>
        </div>
        <div class="btnList">
            <div class="lbtn">
                < </div>
                    <div class="rbtn">
                        >
                    </div>
            </div>
            <div class="circleList">
                <div id="c0" class="circleItem active"></div>
                <div id="c1" class="circleItem"></div>
                <div id="c2" class="circleItem"></div>
                <div id="c3" class="circleItem"></div>
                <div id="c4" class="circleItem"></div>
            </div>
        </div>

    </div>
</body>

<!-- 思路：imgList 采用相对定位 ，imgItem 使用 绝对定位（绝对定位会脱离文档流所所以所有的图都在同一位置）
    将所有的轮播图都定位在同一位置，通过控制opacity（不透明度）的值来显示当前图
     imgItem 的opactity设置为0（图片不显示）
     当 div 添加 class= "active" opactity = 1 ；显示图片
    获取dom节点，设置当前图的索引值currentImg = 0;
    设置点击事件：lbtn.onclick = function(){
          点击时计算 currentImg 的值；
    }
    清除dom 的样式
    ietm.classlist.remove("xxxx")
    添加
    item.calsslist.add("xxxx")
  
    





-->

</html>
<script>
    var currentImg = 0;
    var lbtn = document.querySelector(".lbtn")
    var rbtn = document.querySelector(".rbtn")
    var circleList = document.querySelectorAll('.circleItem')

    console.log("circleList:", circleList);
    var imgList = document.querySelectorAll('.imgItem')
    var num = imgList.length;
    console.log(num);
    lbtn.onclick = function() {
        console.log(currentImg);
        currentImg = currentImg - 1;
        if (currentImg < 0) {
            currentImg = imgList.length - 1
        }
        renderNumImg()

    }
    rbtn.onclick = function() {

        currentImg = currentImg + 1;
        console.log();
        if (currentImg >= imgList.length) {
            currentImg = 0;
        }
        renderNumImg()
    }


    var circleFater = document.querySelector('.circleList')
    console.log(circleFater);
    circleFater.onclick = function(a) {
        console.log(a);
        if (a.target.classList.contains("circleItem")) {
            let index = a.target.id[1];
            currentImg = index
            renderNumImg()
        }
    }

    function renderNumImg() {
        imgList.forEach(function(item, index) {
            item.classList.remove("active")
        })
        circleList.forEach(function(item, index) {
            item.classList.remove("active")

        })
        imgList[currentImg].classList.add('active')
        circleList[currentImg].classList.add('active')


    }
</script>
<style>
    * {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
    }
    
    .swiper {
        position: relative;
        width: 1000px;
        height: 400px;
        top: 0px;
        left: 0px;
        margin: 10px auto;
    }
    
    .swiper>.imgList {
        position: relative;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
    }
    
    .swiper>.imgList>.imgItem {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.5s;
    }
    
    .swiper>.imgList>.imgItem.active {
        opacity: 1;
    }
    /* .btnList {
    position: absolute;
    width: 100%;
    height: 46px;
    flex-direction: row;
    top: 170px;
} */
    
    .btnList>.lbtn {
        position: absolute;
        width: 60px;
        height: 46px;
        text-align: center;
        line-height: 46px;
        font-size: 30px;
        background-color: #cccccc;
        top: 170px;
        left: 0px;
    }
    
    .btnList>.rbtn {
        position: absolute;
        width: 60px;
        height: 46px;
        text-align: center;
        line-height: 46px;
        font-size: 30px;
        background-color: #cccccc;
        margin-right: 0px;
        top: 170px;
        right: 0px;
    }
    /*  */
    
    .swiper>.circleList {
        width: 100%;
        height: 80px;
        display: flex;
        padding: 0 30px;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    
    .swiper>.circleList>.circleItem {
        width: 10px;
        height: 10px;
        border: 2px solid #999;
        background-color: #666;
        border-radius: 5px;
        margin: 0 3px;
    }
    
    .swiper>.circleList>.circleItem.active {
        background-color: #ccc;
        border: 2px solid #666;
    }
</style>