轮播图的多种实现及原理
【写在前面】
最近,在自己的项目中遇到了很多轮播图。
当然,这里的很多,并非数量多,指的是种类很多,即多种实现。
然后我觉得有不少小技巧,就决定写一篇文章讲解一下。
本篇主要内容:
1、轮播图的多种实现( 含动态图 )。
2、效果对比和更好的建议。
【正文开始】
实现一:
相当常见且简单的实现方法:
1、将所有的图片并排。
2、依次平移即可。
HMTL 和 CSS部分:
ul,
ol {
list-style: none;
padding: 0px;
margin: 0px;
}
#main {
width: 600px;
height: 350px;
margin: 30px auto;
position: relative;
}
#display {
width: 600px;
height: 350px;
overflow: hidden;
position: relative;
-webkit-user-select: none;
}
#display ul {
position: relative;
left: 0;
top: 0px;
width: 3600px;
height: 350px;
transition: left 500ms linear;
}
#list li {
float: left;
width: 600px;
height: 350px;
}
#arrow {
display: none;
}
#arrow span {
position: absolute;
width: 40px;
height: 40px;
line-height: 40px;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
text-align: center;
font-weight: bold;
font-family: 黑体, SimHei;
font-size: 30px;
color: #fff;
opacity: 0.4;
border: 1px solid #fff;
-webkit-user-select: none;
}
#arrow span:hover {
opacity: 0.7;
}
#arrow #right {
right: 5px;
left: auto;
}
#index_container {
position: absolute;
width: 210px;
height: 30px;
right: 20px;
bottom: 20px;
}
#index_container .index {
float: left;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
opacity: 0.8;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
-webkit-user-select: none;
}
#index_container .current {
background: #ec3d3d;
}
<
>
其中