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

一个简单的图片轮播效果

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);

最后的效果是每隔一秒对图片进行变换，变换到最后一幅时再从第一幅开始变换。

posted @ 2019-04-03 11:44  蒋涂涂  Views(11033)  Comments(1)  Edit  收藏  举报