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

发布时间：2024-11-30 09:01

一、案例描述

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

二、案例效果演示

三、案例局部代码

css

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样式即可。

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

一、案例描述

二、案例效果演示

三、案例局部代码

css

html

js

四、案例整体代码

五、总结

相关推荐