制作无间断图片循环滚动效果
- 要求图片高度，高度自行设定，要求显示n张图片（n=你的学号末位+6），例如：你的学号末位是3，那么你需要显示3+6共9张图片，9张图片循环滚动
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.all{
margin: 100px auto;
border: 1px solid black;
width: 500px;
height: 200px;
padding: 10px;
position: relative;
}
.screen{
/*overflow: hidden;*/
width: 500px;
height: 200px;
position: relative;
overflow: hidden;
}
ul{
width: 10000px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
/*由于li需要做动画,必须是定位的*/
ul li{
height: 200px;
width: 500px;
float: left;
}
ol{
position: absolute;
bottom: 10px;
right: 10px;
/*background-color: #FF6B39;*/
text-align: center;
line-height: 20px;
}
ol li {
width: 20px;
height: 20px;
float: left;
margin-left: 10px;
border-radius: 50%;
background-color: #fff;
最低0.47元/天 解锁文章
1276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
