Headline: HTML JavaScript实现简单的旋转图表

顺晟科技

2022-09-15 20:51:59

255

步骤分析

分析：
    1.在页面上使用img标签展示图片
    2.定义一个方法，修改图片对象的src属性
    3.定义一个定时器，每隔3秒调用方法一次。

图片如下：

banner_1.jpg

banner_2.jpg

banner_3.jpg

步骤实现

第一步：在页面上使用img标签展示图片

<img id="img" src="img/banner_1.jpg" width="100%">

第二步：定义一个方法，修改img的src属性

// 修改图片src属性
var number = 1;
function fun(){
    number ++ ;
    // 判断number是否大于3
    if(number > 3){
        number = 1;
    }
    // 获取img对象
    var img = document.getElementById("img");
    img.src = "img/banner_"+number+".jpg";
}

第三步：定义一个定时器，每隔3秒钟调用这个方法一次

// 定义定时器
setInterval(fun,3000);

所有步骤的代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>

    <img id="img" src="img/banner_1.jpg" width="100%">

    <script>
        // 修改图片src属性
        var number = 1;
        function fun(){
            number ++ ;
            // 判断number是否大于3
            if(number > 3){
                number = 1;
            }
            // 获取img对象
            var img = document.getElementById("img");
            img.src = "img/banner_"+number+".jpg";
        }

        // 2.定义定时器
        setInterval(fun,3000);
    </script>

</body>
</html>

上一篇：HTML5的画布标签在Matrix中下一篇：尚硅谷Java、HTML5前端、全栈

网站建设

Html

Headline: HTML JavaScript实现简单的旋转图表