原生JS轮播图的知识点梳理

最新推荐文章于 2024-05-07 03:39:03 发布

置顶表演者7号

最新推荐文章于 2024-05-07 03:39:03 发布

阅读量2.3k

点赞数 6

分类专栏： js基础

本文链接：https://blog.csdn.net/biaoyan01/article/details/109523937

版权

js基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JS轮播图的梳理

拿Dom元素中的oLis和oImg和父元素oNav，可以用documemt.querySelectorAll
用for循环可以拿出oLis的index值，
写一个显示函数 activeOne()，
functiom activeOne(index){
documemt.querySelector(“li.active”).classList.remove(“active”)
document.querySelector(“img .active”).classList.remove(“active”)
oLis[index].classList.add(“active”)
oImg[index].classList.add('active")
}
写一个计时器函数 start(){
计时器先清再用clearInterval(timer)
timer=setInterval(function(){
index++
if(index>=oLis.length){
index=0}
调用显示函数active(index)
},100 )
以上基本可以实现轮播图的动态效果
接下来实现鼠标停留时图片不动和鼠标移开时继续动态
写一个鼠标移入的事件绑定 oNav.onmouseover
oNav.οnmοuseοver=function(e){
var ev=e||event ;
var target=ev.target||ev.srcElement;
如果鼠标停留在此位置if(target.tagName===“LI”){
清除计时器停止动态clearInterval(timer)
index= target.index
activeOne(target.index)显示效果给到这个停留的位置图
}}
写一个鼠标移出的事件绑定oNav.onmouseout
oNav.οnmοuseοut=function(){
var ev=e||event ;
var target=ev.target||ev.srcElement;
如果鼠标离开此位置if(target.tagName===“LI”){
开始继续计时器start()
}
html代码如下

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none
        }

        .wrapBox {
            width: 400px;
            margin: 50px auto;
            position: relative;
        }

        .swiperBox img {
            width: 100%;
            display: none;
        }

        .swiperBox .active {
            display: block;
        }

        .nav {
            position: absolute;
            right: 20px;
            bottom: 25px;
        }

        .nav li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #000;
            float: left;
            margin: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav .active {
            background-color: red;
            color: #ffffff;
        }
    </style>
</head>

<body>
    <div class="wrapBox">
        <div class="swiperBox">
            <img class="active" src="./source/girlbig1.jpg" alt="">
            <img src="./source/girlbig2.jpg" alt="">
            <img src="./source/girlbig3.jpg" alt="">
            <img src="./source/girlbig4.jpg" alt="">
        </div>
        <ul class="nav">
            <li class="active" data-index="0"></li>
            <li data-index="1"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

js详细代码如下

<script>
    //拿元素
    var oLis = document.querySelectorAll(".nav li")
    var oImg = document.querySelectorAll(".swiperBox img")
    var oNav = document.querySelector(".nav")
    var index = 0;
    var timer
    //页面加载动态开始调用计时器
    start()

    for (var i = 0; i < oLis.length; i++) {
        oLis[i].index = i
    }

    //页面显示函数
    function activeOne(index) {
        document.querySelector(" img.active").classList.remove("active")
        document.querySelector("li.active").classList.remove("active")
        oLis[index].classList.add("active")
        oImg[index].classList.add("active")
    }

    //计时器开始函数
    function start() {
        clearInterval(timer)
        timer = setInterval(function () {
            index++
            if (index >= oLis.length) {
                index = 0
            }
            activeOne(index)
        }, 1000)
    }
    
    //鼠标停留动态停止
    oNav.onmouseover = function (e) {
        var ev = e || event;
        var target = ev.target || ev.srcElement;
        
        if (target.tagName === "LI") {
            clearInterval(timer)
            index = target.index
            activeOne(target.index)
        }
    }
    
    //鼠标移开动态继续
    oNav.onmouseout = function (e) {
        var ev = e || event;
        var target = ev.target || ev.srcElement;

        if (target.tagName === "LI") start()
    }

</script>

表演者7号

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
10
评论
原生JS轮播图的知识点梳理

JS轮播图的梳理拿Dom元素中的oLis和oImgs，可以用documemt.querySelectorAll用for循环可以拿出oLis的index值，写一个函数，functiom activeOne(){documemt.querySelector(“li.active”).classList.remove(“active”)document.querySelector(“img .active”).classList.remove(“active”)}...
复制链接

扫一扫