html 轮播

最新推荐文章于 2024-10-10 20:02:02 发布

原创最新推荐文章于 2024-10-10 20:02:02 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

这是一个使用HTML、CSS和JavaScript实现的网页轮播图示例。它包含了一个div元素，内部嵌套了一张图片，并通过JavaScript动态更改图片路径来实现每隔2秒自动切换图片的效果。

<!DOCTYPE html>
<!--lang="zh"表中文-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height:300px;
        }
    </style>

</head>
<body>
    <div>
        <img id="img" src="C:/Users/x1c/Desktop/img/banner_1.jpg"/>
    </div>
    <script>
        var count=1;//3张图片
        function func() {
            count=count+1;
            if(count>3) {
                count=1
            }
            var img = document.getElementById("img");
            var path = "C:/Users/x1c/Desktop/img/banner_";
            path = path+count.toString()+".jpg";
            img.src = path;
        }
        setInterval(func,2000);//==setInterval("func();", 2000);//2s后
       
    </script>
</body>

</html>