无缝轮播图
无缝轮播思想:无缝就是让每两张图片都有一个无缝轮播的效果,1和2、2和3、3和4、4和5、5和1.难实现的是最后一张和第一张的无缝轮播效果,是个效果实现的方法就是克隆第一张图片放在最后面(我们把克隆这张叫做6),在轮播到第6张图示,让图瞬间回到第一张,‘oUl.style.left = 0 + ‘px’;’就是用这句来实现,这样看不出来瞬间的过程,这样就实现了无缝轮播了,话不多说代码奉上(对了,这里的html,css,还有封装的函数就是我发布的上一篇透明轮播里面的,哈哈不用谢):
/*js文档*/
<script type="text/javascript">
//先克隆第一张图片添加最后面
var rightBtn = document.querySelector('.rightBtn');
var oUl = document.querySelector('.item');
//console.log(oUl);
var oLis = document.querySelectorAll('.item li')
var cloneFirst = document.createElement('li');
var img = document.createElement('img');
img.src = oLis[0].firstElementChild.src;
cloneFirst.appendChild(img);
oUl.appendChild(cloneFirst);
var pageNum = 0;
showPoint(pageNum);
//右点击
rightBtn.onclick = function() {
pageNum++
if(pageNum == 6) {
oUl.style.left = 0 + 'px';
pageNum = 1;
}
animate(oUl, {
left: -pageNum * 590
});
if (pageNum == 5) {
showPoint(0);
}else{
showPoint(pageNum);
}
}
//左点击
var leftBtn = document.querySelector('.leftBtn');
leftBtn.onclick = function() {
pageNum--;
if(pageNum == -1) {
oUl.style.left = -5 * 590 + 'px';
pageNum = 4;
}
showPoint(pageNum);
animate(oUl, {
left: -pageNum * 590
});
if (pageNum == -1) {
showPoint(4);
}else{
showPoint(pageNum);
}
}
//自动播放
var timer = setInterval(function() {
rightBtn.onclick();
}, 1000);
var box = document.querySelector('.box');
box.onmouseenter = function() {
clearInterval(timer);
}
box.onmouseleave = function() {
timer = setInterval(function() {
rightBtn.onclick();
}, 1000);
}
//小圆点跟着图片切换走
function showPoint(pageNum){
var oPage = document.querySelector('.page')
var oPages = oPage.querySelectorAll('li');
//console.log(oPages[1]);
for (let i = 0; i < oPages.length; i++) {
oPages[i].style.background = 'red'
}
oPages[pageNum].style.background = 'white';
}
showPoint(0);
//点击小圆点切换图片
var lis = document.querySelectorAll('.page li')
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function(){
console.log(this);
showPoint(i);
animate(oUl,{left:-i*590})
pageNum = i;
}
}
</script>