提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

JavaScript案例 图片 切换 简易 轮播
2023-09-14 09:04:09 时间

一、案例描述

图片切换，每隔两秒换一张，目前此效果就放了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样式即可。

相关文章