javaScript动态图片切换

最新推荐文章于 2023-09-08 10:35:31 发布

LLM(-¥-)

最新推荐文章于 2023-09-08 10:35:31 发布

阅读量333

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/m0_51073424/article/details/116886088

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

javaScript动态图片切换实现

<!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>images-roll</title>
    <style>
        .carousel-container{width: 500px;height: 300px; position: relative;}
        .carousel-container .carousel-img img {width: 100%;height: 300px;}
        img.hot{display: block;}
        .carousel-container .carousel-caption span{cursor: pointer;background-color: white;border-radius:6px;display:inline-block;width: 6px;height: 6px;}
        .carousel-container .carousel-caption span.hot{width:18px;background-color: orange;}
        .carousel-container .carousel-caption {position: absolute;left: 230px;bottom: 5px;}
    </style>
    <script>
        let i = 0;
        let timer;
    window.onload = function(){
        fn();
        //获取所有的span标签
        let spans = document.querySelectorAll('.carousel-container .carousel-caption span');
        //定义手动指定span指定图片的单击事件
        spans.forEach(function(object,index){
            object.addEventListener('click',function(){
                //清除定时器
                clearTimeout(timer);
                //设置当前图片下标
                i=index;
                fn();
            });
        });

    }
    /*图片定时滚动*/
    function fn(){
        let imgs=document.querySelectorAll(".carousel-container .carousel-img img");
        let spans = document.querySelectorAll(".carousel-container .carousel-caption span");
       for(let j = 0; j<imgs.length;j++){
           //设置图片为不可展示
           imgs[j].style.display='none';
           //设置span的class选择器为空
           spans[j].className='';
           if(j==i){
               //设置当前图片展示为块
               imgs[j].style.display='block';
               //设置span的class选择器为'hot'
               spans[j].className='hot';
           }
       }
       //每调用一次i++
       i++;
       if(i==imgs.length){
           i=0;
       }
       //每隔3秒递归调用
       timer=setTimeout(fn,3000);
    }
    
    </script>
</head>
<body>
    <div class="carousel-container">
        <div class="carousel-img">
          <img src="imgs/1.jpg" alt="">
          <img src="imgs/2.jpg" alt="" style="display: none;">
          <img src="imgs/3.jpg" alt="" style="display: none;">
          <img src="imgs/4.jpg" alt="" style="display: none;">
          <img src="imgs/5.jpg" alt="" style="display: none;">

        </div>
        <div class="carousel-caption">
            <span class="hot"></span>
            <span ></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

LLM(-¥-)

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javaScript动态图片切换

javaScript动态图片切换实现<!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">
复制链接

扫一扫