javascript案例7——简易轮播图、2秒切换图片

最新推荐文章于 2023-12-17 20:26:26 发布

耶啵奶膘

最新推荐文章于 2023-12-17 20:26:26 发布

阅读量3.2k

点赞数 4

分类专栏： javascript 文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/xulihua_75/article/details/124638149

版权

javascript 专栏收录该内容

55 篇文章 6 订阅

订阅专栏

一、案例描述

图片切换，每隔两秒换一张，目前此效果就放了4张图片，可自行添加。播到最后一张再播第一张。下方文字同时发生变化。

二、案例效果演示

请添加图片描述

三、案例局部代码

css

<style type="text/css">
    #imgBox {
        width: 300px;
        height: 200px;
    }
    
    #imgBox img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    #index {
        width: 300px;
        text-align: center;
    }
</style>

html

 <div id="imgBox">
    <img src="" id="img" />
 </div>
 <div id="index">第1张</div>

js

<script>
  // 获取页面图片元素的路径
     var imgBox = document.querySelector('img');
     var div = document.querySelector('#index');
     // 将图片的路径以数组的形式存放。
     var imgs = ['./img/bg1.png', './img/bg2.jpg', './img/bg3.jpg', './img/bg4.jpeg'];
     var imgIndex = 0; //默认为第一张图片
     imgBox.src = imgs[imgIndex];//刚上来页面默认显示第一张
     var t = setInterval(changeImg, 2000);//每两秒调用一次
     // 函数封装
     function changeImg() {
         imgIndex++;
         if (imgIndex == imgs.length) {
             imgIndex = 0;
         }
         imgBox.src = imgs[imgIndex];
         div.innerHTML = '第' + (imgIndex + 1) + '张';
     }
</script>

四、案例整体代码

<!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>
    <style type="text/css">
        #imgBox {
            width: 300px;
            height: 200px;
        }
        
        #imgBox img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        #index {
            width: 300px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="imgBox">
        <img src="" id="img" />
    </div>
    <div id="index">第1张</div>
    <script>
        // 获取页面图片元素的路径
        var imgBox = document.querySelector('img');
        var div = document.querySelector('#index');
        // 将图片的路径以数组的形式存放。
        var imgs = ['./img/bg1.png', './img/bg2.jpg', './img/bg3.jpg', './img/bg4.jpeg'];
        var imgIndex = 0; //默认为第一张图片
        imgBox.src = imgs[imgIndex];//刚上来页面默认显示第一张
        var t = setInterval(changeImg, 2000);
        // 函数封装
        function changeImg() {
            imgIndex++;//每两秒换一张，所以索引要加1
            if (imgIndex == imgs.length) {//如果当前索引是最后一个
                imgIndex = 0;//那么再轮播第一张
            }
            imgBox.src = imgs[imgIndex];
            div.innerHTML = '第' + (imgIndex + 1) + '张';//下方文字随之变化
        }
    </script>
</body>

</html>

五、总结

可更改轮播时间、以及图片张数。如果想变的更好看，改改css样式即可。

耶啵奶膘

关注

4
点赞
踩
42

收藏

觉得还不错? 一键收藏
8
评论
javascript案例7——简易轮播图、2秒切换图片

一、案例描述图片切换，每隔两秒换一张，目前此效果就放了4张图片，可自行添加。播到最后一张再播第一张。下方文字同时发生变化。二、案例效果演示三、案例局部代码css<style type="text/css"> #imgBox { width: 300px; height: 200px; } #imgBox img { width: 100%; height: 100%; o
复制链接

扫一扫