html学习之路--简单图片轮播
程序员文章站
2022-04-14 18:24:21
一个简单的图片轮播效果 photo.html页面代码，基本的HTML结构，在main中显示图片，此处图片依次命名为1.jpg、2.jpg、3.jpg、4.jpg。 然后对网页进行一个非常简单的CSS美化。 最后是js文件对图片轮播进行控制。 最后的效果是每隔一秒对图片进行变换，变换到最后一幅时再从第 ......
一个简单的图片轮播效果
photo.html页面代码，基本的html结构，在main中显示图片，此处图片依次命名为1.jpg、2.jpg、3.jpg、4.jpg。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>简单图片轮播</title> 6 <link rel="stylesheet"href="css/photo.css"> 7 </head> 8 <body> 9 <div class="warpper"> 10 <div class="header"> 11 <div class="logo">photos of tutuj</div> 12 </div> 13 <div class="main"> 14 <div id="pics"> 15 <img src="img/1.jpg"/> 16 </div> 17 </div> 18 <div class="footer"></div> 19 </div> 20 </body> 21 </html> 22 <script src="js/photo.js"></script>
然后对网页进行一个非常简单的css美化。
.logo{
font-size:18px;
color:brown;
background-color: #f0f8ff;
font-family: "calisto mt";
}
/* 具体到元素标签 */
#pics img{
margin-top:10px;
width:300px;
height:300px;
}
最后是js文件对图片轮播进行控制。
//获取内容
var pics=document.getelementbyid("pics");
var n=1;
setinterval(function(){
if(n>4) n=1;
pics.innerhtml="<img src='img/"+n+".jpg'/>";
n++;
},1000);
最后的效果是每隔一秒对图片进行变换，变换到最后一幅时再从第一幅开始变换。
上一篇： python压平嵌套列表
下一篇： H5-元素类型笔记