要实现左右完美无缝对接,最后一张的处理至关重要。
效果预览(只展示几秒,文件gif太大):
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝滑动轮播案例</title>
<script src="jquery-3.3.1.js"></script>
<style type="text/css">
*{
padding:0px;
margin:0px;
border:0px;
}
li{
list-style-type:none;
}
/*给a标签去除下划线*/
a{
text-decoration:none;
}
#wrapper{
margin:20px auto;
}
#show-area{
width:590px;
height:470px;
position:relative;
margin:0px auto;
overflow:hidden;
}
/*注意:找bug找了很久,这里自动插入一张,父容器要加上他的宽度,否则怎么显示呢?小问题大解决*/
#show-area ul{
position:relative;
width:5310px;
height:470px;
right:0;
}
#show-area ul li{
float:left;
width:590px;
}
/*指示器*/
#indicator{
width:140px;
text-align:center;
position:absolute;
top:450px;
left:0;
right: 0;
margin: auto;
z-index:1;
/*ackground-color: #00ccff;*/