一、知识点
语法：
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>