轮播图简易

最新推荐文章于 2023-02-02 16:45:52 发布

雷雨2021

最新推荐文章于 2023-02-02 16:45:52 发布

阅读量229

点赞数

文章标签：轮播图 JavaScript setInterval 图片切换前端开发

本文链接：https://blog.csdn.net/qq_45729435/article/details/121615958

版权

简述：轮播图在网页中十分常见，给人好的视觉体验。

下面只是一个简单的轮播图入门程序讲解，仅供入门同学参考。它主要用到的是js中window窗口的setInterval(循环定时器)不断重复定时，以达到对图片的重复的播放。

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

<style>
    img{
        width: 800px;
        height: 500px;
        margin-top: 20px;
        padding-left: 200px;
    }
</style>
<body>
<img id="img" src="img/banner1.jpg"/>

<script>
    var number=1;

    //对图片的切换
    function fun() {
        number++;
        //总共有3张图片，当到最后一张时让它切换到第一张图片
        if (number>3){
            number=1;
        }
        var img=document.getElementById("img");
        img.src="img/banner"+number+".jpg";
    }

//使用定时器每3秒中换一张图片
    setInterval(fun,3000);
</script>
</body>
</html>

上述代码仅供入门！！！

雷雨2021

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
轮播图简易

简述：轮播图在网页中十分常见，给人好的视觉体验。下面只是一个简单的轮播图入门程序讲解，仅供入门同学参考。它主要用到的是js中window窗口的setInterval(循环定时器)不断重复定时，以达到对图片的重复的播放。...
复制链接

扫一扫