淘宝轮播图仿写

轮播图是学习前端必须要实现的小项目,实现轮播图有很多种方法.我才用的是最简单最容易理解的改变left属性值和隐藏超出内容。

Html文档结构

注意:这里的每一li项目实现在网页渲染的两者事件会有空隙，可以利用css来去掉空隙,也可以将li标签写在一行.

css样式文档

*{
    list-style: none;
    margin:0;
    padding:0;
}
.header{
    height:100px;
}
.wrap{
    height:360px;
    width:720px;
    margin:0 auto;
    position: relative;
    overflow: hidden;
}
.con{
    width:5040px;
    position: absolute;
}
.change{
    position: absolute;
    top:50%;
    z-index: 2;
    width:100%;
}
.change span{
    margin:2px;
    width:50px;
    opacity: 0.5;
    margin-top:-25px;
    height:50px;
    overflow: hidden;
    display: inline-block;
    border-radius:50%;
    cursor: pointer;
}
.change span:hover{
    opacity:0.9;
}
#left{
    float:left;
}
#right{
    float: right;
}
.list{
    width:720px;
    height:360px;
    display:inline-block;
    position: relative;
}
.list img{
    width:100%;
    height:100%;
}

关键：这里只要给外部的wrap设置超出部分隐overflow：hidden属性，以及包裹所有li标签的.con设置固定的宽度和浮动.来实现轮播效果。

JQuery行为文档

关键：这里使用JQuery的自定义动画方法animate来设置con的left值