一、知识点
语法:
element.scrollLeft |
返回当前视图中的实际元素的左边缘和左边缘之间的距离 |
无缝滚动即利用scrollLeft搭配定时器实现无限移动效果;
注意:构造时需要前后一致的2套图片,用于制造视觉盲区,感觉不到图片组切换过程;
二、步骤
2.添加无限滚动事件,将其封装为一个函数,定义speed变量控制移动的速度
//滚动方法
function move(){
if(block.scrollLeft<=0){
block.scrollLeft=4800;
}else{
block.scrollLeft-=speed;
}
}
}
定时调用方法实现循环滚动
var time=setInterval(function(){
move();
},10);
3.添加左右箭头事件,同样封装为一个方法,并在箭头事件内一并添加左右切换索引圈事件,和旋转轮播效果中一样定义变量count来控制索引圈的切换;
注意:左右箭头切换时,会出现2种情况,一张完整的图片是否恰好移动完毕,这里利用对scrollLeft取值取余的处理方法,使其切换到下一张图片显示完整图片;
//箭头方法
function jiantou(way){
if(way=="right"){
if(block.scrollLeft<=0){
block.scrollLeft=4800;
}else{
if(block.scrollLeft%800==0){
block.scrollLeft-=800;
circle[count].style.backgroundColor="";
count++;
if(count>=6){
count=0;
}
circle[count].style.backgroundColor="red";
}else{
block.scrollLeft-=block.scrollLeft%800;
}
}
}else{
if(block.scrollLeft>=4800){
block.scrollLeft=0;
}else{
if(block.scrollLeft%800==0){
block.scrollLeft+=800;
circle[count].style.backgroundColor="";
count--;
if(count<0){
count=5;
}
circle[count].style.backgroundColor="red";
}
else{
block.scrollLeft+=800-block.scrollLeft%800;
}
}
}
}
调用方法:
//鼠标点击事件
spanleft.onclick=function(){
clearInterval(time);
jiantou("left");
spanleft.style.cursor="pointer";
};
spanright.onclick=function(){
clearInterval(time);
jiantou("right");
spanright.style.cursor="pointer";
};
4.完善鼠标移入移出事件以及索引圈默认事件
//鼠标进入图片及离开事件
for(var i=0;i<imgg.length;i++){
imgg[i].onmouseenter=function(){
clearInterval(time);
}
imgg[i].onmouseleave=function(){
time=setInterval(function(){
move();
},10);
}
}
索引圈默认事件添加到默认移动事件中
if(block.scrollLeft%800==0){
circle[count].style.backgroundColor="";
count++;
if(count>=6){
count=0;
}
circle[count].style.backgroundColor="red";
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动效果</title> <style> *{margin: 0;padding: 0;} html,body{width: 100%;height: 100%;} .block{ width: 800px; height: 400px; margin: 80px auto; position: relative; border: 1px solid red; overflow: hidden; } .boxul{ width: 9600px; height: 400px; } .box_ul,.box_ul2{ width: 4800px; height: 400px; float: left; } img{ width: 800px; height: 400px; float: left; } .spanleft{ font-size: 60px; font-weight: bold; position: relative; top: -315px; left: 280px; color: white; } .spanright{ font-size: 60px; font-weight: bold; position: relative; top: -315px; right: -970px; color: white; } .cir{ width: 150px; height: 20px; z-index: 7; position: absolute; top: 500px; left: 600px; } .circle{ width: 10px; height: 10px; border: 2px solid grey; border-radius: 50%; float: left; margin: 0 5px; } </style> <script> window.onload=function(){ var block=document.getElementsByClassName("block")[0]; var box_ul=document.getElementsByClassName("box_ul")[0]; var box_ul2=document.getElementsByClassName("box_ul2")[0]; box_ul2.innerHTML=box_ul.innerHTML; var spanleft=document.getElementsByClassName("spanleft")[0]; var spanright=document.getElementsByClassName("spanright")[0]; var imgg=document.getElementsByClassName("imgg"); //定义速度变量 var speed=2; //鼠标进入图片及离开事件 for(var i=0;i<imgg.length;i++){ imgg[i].onmouseenter=function(){ clearInterval(time); } imgg[i].onmouseleave=function(){ time=setInterval(function(){ move(); },10); } } var time=setInterval(function(){ move(); },10); //鼠标点击事件 spanleft.onclick=function(){ clearInterval(time); jiantou("left"); spanleft.style.cursor="pointer"; }; spanright.onclick=function(){ clearInterval(time); jiantou("right"); spanright.style.cursor="pointer"; }; //索引圈事件 var circle=document.getElementsByClassName("circle"); circle[0].style.backgroundColor="red"; var count=0; //箭头方法 function jiantou(way){ if(way=="right"){ if(block.scrollLeft<=0){ block.scrollLeft=4800; }else{ if(block.scrollLeft%800==0){ block.scrollLeft-=800; circle[count].style.backgroundColor=""; count++; if(count>=6){ count=0; } circle[count].style.backgroundColor="red"; }else{ block.scrollLeft-=block.scrollLeft%800; } } }else{ if(block.scrollLeft>=4800){ block.scrollLeft=0; }else{ if(block.scrollLeft%800==0){ block.scrollLeft+=800; circle[count].style.backgroundColor=""; count--; if(count<0){ count=5; } circle[count].style.backgroundColor="red"; } else{ block.scrollLeft+=800-block.scrollLeft%800; } } } } //滚动方法 function move(){ if(block.scrollLeft<=0){ block.scrollLeft=4800; }else{ block.scrollLeft-=speed; if(block.scrollLeft%800==0){ circle[count].style.backgroundColor=""; count++; if(count>=6){ count=0; } circle[count].style.backgroundColor="red"; } } } } </script> </head> <body> <div class="block"> <div class="boxul"> <div class="box_ul"> <img class="imgg" src="./image/box1.jpg"> <img class="imgg" src="./image/box2.jpg"> <img class="imgg" src="./image/box3.jpg"> <img class="imgg" src="./image/box4.jpg"> <img class="imgg" src="./image/box5.jpg"> <img class="imgg" src="./image/box6.jpg"> </div> <div class="box_ul2"></div> </div> </div> <span class="spanleft"><</span> <span class="spanright">></span> <div class="cir"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> </body> </html>