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

一个简单的图片轮播效果

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

    
        
        
        
    
    
        

            

                
photos of tutuj
            
            

                

                    
                
            
            

        
    

　　然后对网页进行一个非常简单的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="";
    n++;
},1000);