使用js实现一个简单的无缝轮播效果-创新互联
今天就跟大家聊聊有关使用js实现一个简单的无缝轮播效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

具体内容如下
*{
margin: 0;
padding: 0;
}
#box{
width: 500px;
height: 200px;
padding: 5px;
margin: 50px auto;
border: 1px solid #999999;
}
.inner{
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
ul,ol{
list-style: none;
position: absolute;
}
ul{
width: 3000px;
height: 200px;
}
li{
float: left;
}
ol{
right: 20px;
bottom: 20px;
}
ol>li{
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
border-radius: 50%;
margin-right: 10px;
cursor: pointer;
}
ol>li.current{
background-color: orange;
color: white;
}
.control{
display: none;
}
.control>span{
position: absolute;
top: 50%;
margin-top: -20px;
display: inline-block;
width: 25px;
height: 40px;
line-height: 40px;
background-color: rgba(0,0,0,0.3);
color: white;
font-size: 20px;
cursor: pointer;
text-align: center;
}
.right{
right: 0;
} 本文题目:使用js实现一个简单的无缝轮播效果-创新互联
转载来源:http://www.jxjierui.cn/article/dhjjdh.html


咨询
建站咨询
