上一篇文章中的轮播图中,当滚到最后的一张图片时,就会回到第一张图片,这个过程中会显示之前的所有图片,那么怎样才能实在无缝滚动呢?
只需要在最后一张图片的后面复制一张第一张图片即可,当滚动到第5张图片时,把left的值设为0即可,
把上一篇文章中的代码改改就好.直接贴代码吧.
首先我们自定义一个动画,因为我用transition没做出来,不知道能不能实现,望大神指点.
//自定义动画
var AnimationUtils = {
bufferMove: function (obj, target) {
// 清除老的定时器
clearInterval(obj.iTimer);
// 开启新的定时器
obj.iTimer = setInterval(function () {
// 假设所有的属性均已运动完毕
let bBtn = true;
// 遍历包含运动属性以及终点值的对象
for (let sAttr in target) {
// 获取当前值
let iCur;
if (sAttr === 'opacity') {
iCur = parseFloat(getStyle(obj, sAttr)) * 100;
} else {
iCur = parseInt(getStyle(obj, sAttr));
}
// 计算速度
let iSpeed = (target[sAttr] - iCur) / 8;
// 辨别方向 取整
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
// 计算下一次的值
let iNext = iCur + iSpeed;
// 赋值
if (sAttr === 'opacity') {
obj.style[sAttr] = iNext / 100;
obj.style.filter = 'alpha(opacity=' + iNext + ')';
} else {
obj.style[sAttr] = iNext + 'px';
}
// 判断当前属性是否运动完毕
if (iNext !== target[sAttr]) {
bBtn = false;
}
}
// 清除定时器
if (bBtn === true) {
clearInterval(obj.iTimer);
}
}, 60);
}
};
//主代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="utils.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
background: #ffffff;
}
#wrap {
width: 300px;
height: 150px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#list {
width: 1200px;
overflow: hidden;
position: absolute;
left: 0px;
top: 0;
/*transition: all 0.5s linear;*/
}
#list img {
float: left;
width: 300px;
height: 150px;
}
#tab {
position: relative;
display: none;
}
#tab a {
position: absolute;
top: 50%;
color: #ffffff;
line-height: 50px;
padding: 0 10px;
background: rgba(0, 0, 0, 0.6);
margin-top: 55px;
cursor: pointer;
}
#left-btn {
left: 0;
}
#right-btn {
right: 0;
}
#btn {
width: 300px;
position: absolute;
left: 0;
bottom: 0;
text-align: center;
}
.btn a {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
cursor: pointer;
}
.red {
background: red;
}
.white {
background: white;
}
</style>
<script>
window.onload = function () {
let tab = $("tab");
let leftBtn = $("left-btn");
let rightBtn = $("right-btn");
let list = $("list");
let btn = $("btn");
let tabs = tab.getElementsByTagName("a");
let btns = btn.getElementsByTagName("a");
let width = 300;//图片的宽度
let index = 0;//记录当前是第几张图片
let time = null;//记录定时器
//复制第一张li添加到最后一个
list.innerHTML += list.children[0].outerHTML;
//重新计算list的宽度
list.style.width = list.children.length * width + "px";
//鼠标进入list时,tab显示
list.onmouseenter = function () {
clear();//清除定时器
tab.style.display = "block";
};
//鼠标离开list时,tab隐藏
list.onmouseleave = function () {
tab.style.display = "none";
start();//启动定时器
};
//遍历tabs,给每个tab加上进入离开事件,否则tab会跳动
for (let i = 0; i < tabs.length; i++) {
tabs[i].onmouseenter = function () {
clear();//清除定时器
tab.style.display = "block";
};
tabs[i].onmouseleave = function () {
tab.style.display = "none";
start();//启动定时器
};
}
//点击右按钮往右走
rightBtn.onclick = function () {
rightMove();
};
//点击左按钮往左走
leftBtn.onclick = function () {
leftMove();
};
//启动定时器,自动播放
start();
//点击小圆点,切换图片
for (let i = 0; i < btns.length; i++) {
btns[i].onmouseenter = function () {
clear();//鼠标移入小圆点时清除定时器
index = i;
AnimationUtils.bufferMove(list, {left: -index * width});
redBtns(index);
};
btns[i].onmouseleave = function () {
start();//鼠标离开小圆点时开启定时器
}
}
/**
* 启动定时器
* **/
function start() {
time = setInterval(function () {
rightMove();
}, 2000);
}
/**
* 清除定时器
* */
function clear() {
clearInterval(time);
}
/**
* 向左移动
**/
function leftMove() {
//当index为-1时,设为3回到最后一张图,否则会空白
index--;
if (index < 0) {
list.style.left = -4*width+ "px";
index=3;
}
AnimationUtils.bufferMove(list, {left: -index * width});
redBtns(index);//小圆点的滚动
}
/**
* 向右移动
*/
function rightMove() {
index++;
//当index为5是,设为left直接设为0回到第一张图,否则会显示空白
if (index === 5) {
list.style.left = 0;
index = 1;
}
//自定义动画
AnimationUtils.bufferMove(list, {left: -index * width});
redBtns(index);//小圆点的滚动
//如果index=4,则说明图片是第五张,但是小圆点只有四个,所以将第一个小圆点设为red
if (index === 4) {
btns[0].className = "red";
}
}
/**
* 小红点的滚动
* @param index
*/
function redBtns(index) {
//遍历循环所有的小圆点,看当前的index和i的值是否相等
for (let i = 0; i < btns.length; i++) {
i === index ? btns[i].className = "red" : btns[i].className = "white";
}
}
}
</script>
</head>
<body>
<div id="wrap">
<div id="list">
<img src="img/img1.jpg" alt="">
<img src="img/img2.jpg" alt="">
<img src="img/img3.jpg" alt="">
<img src="img/img4.jpg" alt="">
</div>
<div id="tab">
<a id="left-btn" href="javascript:"><</a>
<a id="right-btn" href="javascript:">></a>
</div>
<div id="btn" class="btn">
<a class="red" href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
</div>
</div>
</body>
</html>