原生JS实现淘宝无缝轮播

2022-10-31 21:59:46

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ padding:0; margin:0; list-style:none; border:0;}
.all{
width:520px;
height:280px;
margin:100px auto;
position:relative;
}
.screen{
width:520px;
height:280px;
overflow:hidden;
position:relative;
}
.buttons{
position: absolute;
top: 110px;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
color: #FFF;
text-decoration: none;
font-size: 35px;
font-weight: bolder;
background: rgba(0,0,0,.3);
display: none;
}
.buttons:hover{
background: rgba(0,0,0,.8);
}
#prev{
left: 0;
}
#next{
right: 0;
}
.all:hover .buttons{
display: block;
}
.screen li{
width:520px;
height:280px;
overflow:hidden;
float:left;
}
.screen ul{
position:absolute;
left:0;
top:0px;
width:3120px;
}
.all ol{
position:absolute;
right:10px;
bottom:10px;
line-height:20px;
text-align:center;
}
.all ol li{
float:left;
width:20px;
height:20px;
background:#fff;
border:1px solid #ccc;
margin-left:10px;
cursor:pointer;
}
.all ol li.current{ background:yellow;}

</style>
</head>

</li>
<li>

</li>
<li>

</li>
<li>

</li>
<li>

</li>
<li>

</li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<a href="javascript: void(0)" class="buttons" id="prev"><</a>
<a href="javascript: void(0)" class="buttons" id="next">></a>
</div>

<script>
//原理：定时器定义一个变量，如果满足条件style.left = 0,速调回，做到无缝效果
//注意一下num = key = this.index;必须更新一下数值否则会有bug

//先封装个运动函数。（运动函数百度一大堆）
function animate(obj,target) {
clearInterval(obj.timer);
var speed = obj.offsetLeft > target ? -15 : 15;
obj.timer = setInterval(function() {
var result = target - obj.offsetLeft; //用于判断清除定时器
obj.style.left = obj.offsetLeft + speed + 'px';
//这句话要放在下面否则会有bug
if(Math.abs(result) <= 15) { //小于等于5说明到位置了
clearInterval(obj.timer);
//目标值为200,400.offsetLeft为203,403要更新一下
obj.style.left = target + 'px';
}
},10)
}
//找到元素
var next = document.getElementById('next');
var prev = document.getElementById('prev');
var warp = document.getElementById('all');
var oUl = warp.children[0].children[0];
var ullis = oUl.children;
var ol = warp.children[0].children[1];
var ollis = ol.children;
var timer = null;
var num = 0;
var key = 0;
var result = 0;

for(var i=0;i<ollis.length;i++) {
ollis[i].index = i;
ollis[i].onmouseover = function() {
for(var j=0;j<ollis.length;j++) {
ollis[j].className = '';
}
this.className = 'current';
animate(oUl,-this.index * 520);
num = key = this.index;
}
}
timer = setInterval(autoplay,1000);
function autoplay() {
banner();
}
warp.onmouseover = function() {
clearInterval(timer);
}
warp.onmouseout = function() {
timer = setInterval(autoplay,1000);
}

//手动切换
next.onclick = function() {
banner();
}

prev.onclick = function() {
num --;
if(num < 0) {
ul.style.left = -2600 + 'px'; // 迅速调回
num = 4; // 因为第6张就是第一张第6张播放下次播放第2张
}
animate(oUl,-num * 520);
key --;
if(key < 0) { //因为索引是从0开始的
key = ollis.length-1;
}
for(var k=0;k<ollis.length;k++) {
ollis[k].className = '';
}
ollis[key].className = 'current';
}

function banner(){
num ++;
if(num > ollis.length) {
ul.style.left = 0; // 迅速调回
num = 1; // 因为第6张就是第一张第6张播放下次播放第2张
}
animate(oUl,-num * 520);
key ++;
if(key > ollis.length-1) { //因为索引是从0开始的
key = 0;
}
for(var k=0;k<ollis.length;k++) {
ollis[k].className = '';
}
ollis[key].className = 'current';
}
</script>
</div>
</body>
</html>

码农公寓

相关文章