js首页轮番图 （自己实现 ，有平滑播放效果）

js实现首页轮番图(平滑播放)

先了解实现原理:

用到一个无序的列表，列表样式使用float：left，在无序列表上套用一个div 这个div能够设置宽度，宽度一定能够 容下几张图片横排放下。 图片能够实现相连主要是：开始播放图片的时候，现在原来的无序列表中插入到末尾一个li元素，这个li元素中包含的应该是第一张图片，当图片播放到最后一张的时候 ，将图片拉回第一张，给人形成一种错觉效果。 接下来就是简单html 以及css展示以及内嵌的js。
当然你可以去下载打压的压缩包去参考。首页平滑轮番图模板
密码为：rky6
接下里上一个演示的代码；
(html)

    

        

            

                

                

                

            
        
        

                
1
                
2
                
3
        
        

        
<
        
>
    
    

 

以下是css的代码

body{
    margin:0;
    padding:0;
    background-color:red;
}

#autoPlay{
    width:1000px;
    height:400px;
    margin:0 auto;
    overflow: hidden;
    border:10px solid blue;
}


#list{
    width:400%;
    height:400px;
    margin:0;
    padding:0;
}


#list ul{
    margin:0;
    padding:0;
    list-style-type: none;
    z-index: 10;
}

#list ul li{
    float:left;;
}

img{
    position: relative;
    width:1000px;
    height: 400px;
}

#index{
    position: absolute;
    margin-top:-30px;
    margin-left:800px;
}

#index li{
    list-style-type: none;
    float: left;
    margin-left:10px;
    z-index: 1;
    width:20px;
    height:20px;
    background-color:red;
    text-align: center;
}


#move{
    font-size:50px;
    font-weight: bolder;
    color:blue;
    opacity: 0.5;
}


#left{
    position: absolute;
    float: left;
    margin-left: 30px;
    margin-top:-250px;
    z-index:1;
}


#right{
    position: absolute;
    float: right;
    margin-left:940px;
    margin-top:-250px;
    z-index:1;
}