html学习之路--简单图片轮播

一个简单的图片轮播效果

photo.html页面代码，基本的HTML结构，在main中显示图片，此处图片依次命名为1.jpg、2.jpg、3.jpg、4.jpg。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>简单图片轮播</title>
        <link rel="stylesheet"href="css/photo.css">
    </head>
    <body>
        <div class="warpper">
            <div class="header">
                <div class="logo">photos of tutuj</div>
            </div>
            <div class="main">
                <div id="pics">
                    <img src="img/1.jpg"/>
                </div>
            </div>
            <div class="footer"></div>
        </div>
    </body>
</html>
<script src="js/photo.js"></script>

　　然后对网页进行一个非常简单的CSS美化

?
1
2
3
4
5
6
7
8
9
10
11
12
.logo{
    font-size:18px;
    color:brown;
    background-color: #F0F8FF;
    font-family: "calisto mt";
}
/* 具体到元素标签 */
#pics img{
    margin-top:10px;
    width:300px;
    height:300px;
}

　　最后是js文件对图片轮播进行控制。

?
1
2
3
4
5
6
7
8
//获取内容
var pics=document.getElementById("pics");
var n=1;
setInterval(function(){
    if(n>4) n=1;
    pics.innerHTML="<img src='img/"+n+".jpg'/>";
    n++;
},1000);

　　

posted @   ninama  阅读(1461)  评论(0)  编辑  收藏  举报
相关博文：
· html+css+JavaScript实现轮播图(新手教程)
· javascript实现图片循环滚动效果
· html+css简单易懂的轮播图实现
· html,css实现图片轮播
· html+css+js实现轮播图效果
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae