关键思路:复制第一张图片放到ul的最后,然后当图片切换到倒数第二张的时候直接切换新加的那张图片,再次从第一张切换到第二张的时候先瞬间切换到第一张图片,然后滑动到第二张。
实现代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 500px;
height: 200px;
overflow: hidden;
margin: 50px auto;
}
.inner{
width: 500px;
height: 200px;
position: relative;
}
.inner ul{
width: 600%;
list-style: none;
display: inline-block;
position: absolute;
}
li{
float: left;
}
.inner ol{
list-style: none;
display: inline-block;
position: absolute;
right: 50px;
bottom: 20px;
}
.inner ol li{
width: 20px;
height: 20px;
background-color: #cf00ff;
margin: 0 5px;
text-align: center;
line-height: 20px;
border: 1px solid #bcff9f;
cursor: pointer;
}
.selected {
background-color: #F14400!important;
}
</style>
<body>
<div id="box" class="box">
<div id="inner" class="inner">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
</ul>
<ol></ol>
<div>
<span></span>
<span></span>
</div>
</div>
</div>
<script>
var box = document.getElementById('box');
var inner = box.firstElementChild||box.firstChild;
var ul = inner.firstElementChild||box.firstChild;
var uliArr = ul.children;
var ol = inner.children[1];
var spanArr = ol.parentNode.children[2].children;
//************无缝轮播给ul最后添加第一张图
//思路:赋值第一张图片放到ul的最后,然后当图片切换到第五张的时候
// 直接切换第六章,再次从第一张切换到第二张的时候先瞬间切换到
// 第一张图片,然后滑动到第二张
newul = ul.children[0].cloneNode(true);
ul.appendChild(newul);
//************给ol添加内容
for (var i=0;i<uliArr.length-1;i++) {
var newLi = document.createElement("li");
newLi.innerHTML = i+1;
ol.appendChild(newLi);
}
ol.children[0].className = ol.children[0].className + " selected";
//************给每个ol中的li绑定事件
var oliArr = ol.children;
for (var i=0;i<oliArr.length;i++) {
oliArr[i].index = i;
oliArr[i].onclick = function(){
key = this.index;
square = this.index;
carousel(ul,500*this.index);
for (var i=0;i<oliArr.length;i++){
oliArr[i].className = oliArr[i].className.replace(/\s?selected/,"");
}
console.log(square);
oliArr[square].className = oliArr[square].className+" selected";
};
}
inner.onmouseover = function () {
clearInterval(timer)
}
inner.onmouseout = function () {
timer = setInterval(autoPlay,1000)
}
//************轮播函数
function carousel(ele,distance) {
clearInterval(ele.timer);
ele.timer = setInterval(
function () {
speed =distance- Math.abs(ele.offsetLeft)>0?-10:10;
console.log(distance- Math.abs(ele.offsetLeft));
if (Math.abs(distance - Math.abs(ele.offsetLeft))<Math.abs(speed)){
clearInterval(ele.timer)
}else {
ele.style.left = ele.offsetLeft + speed + "px";
console.log(ele.style.left )
}
},10)
}
//************自动播放function
var key = 0;//轮播图的运动值
var square = 0;//方块运动的值
timer = setInterval(autoPlay,1000) ;
function autoPlay() {
key++;
if (key > uliArr.length-1){
ul.style.left = 0;
key=1;
}
square++;
if (square>uliArr.length-2 ){
square = 0;
}
carousel(ul,key*500);
for (var i=0;i<oliArr.length;i++){
oliArr[i].className = oliArr[i].className.replace(/\s?selected/,"");
}
console.log(square);
oliArr[square].className = oliArr[square].className+" selected";
}
</script>
</body>
</html>