效果图入下,图片横排,从右至左无限滚动,鼠标放上就暂停,离开继续滚动
思路:
动态创建一列图片,然后根据前一列图片再创建一列图片的复制品,当前一列图片全都滚动超过div最左侧时再让其回到最右边,同时复制品图片正在展示滚动,再当复制品图片也全滚动超过最左侧时,也让其回到最右边,这样就能达到无限滚动的效果了
.popularProducts-cont{
position: relative;
width: 100%;
overflow: hidden;
display: flex;
margin-top: 40px;
}
.popularProducts-cont-ul{
position: relative;
display: flex;
}
.popularProducts-cont-ulul{
position: relative;
display: flex;
}
.popularProducts-cont-li{
justify-content: center;
align-items: center;
width: 262px;
height: 242px;
padding-left: 5px;
padding-right: 5px;
}
.popularProducts-cont-img{
height: 212px;
width: 262px;
}
<div class="popularProducts-cont">
<ul class="popularProducts-cont-ul"></ul>
<ul class="popularProducts-cont-ulul"></ul>
</div>
js代码
var cont = document.getElementsByClassName('popularProducts-cont')[0];
var ul = document.getElementsByClassName('popularProducts-cont-ul')[0];
var ulul = document.getElementsByClassName('popularProducts-cont-ulul')[0];
//图片地址
var productsUrl = [
'./image/home/products1.png',
'./image/home/products2.png',
'./image/home/products3.png',
'./image/home/products4.png',
'./image/home/products5.jpg',
'./image/home/products6.png',
'./image/home/products7.jpg',
'./image/home/products8.png'
]
//创建两个虚空盒子,让li添加进来再一次一起挂在到dom上,优化性能
var frag = document.createDocumentFragment();
var fragfrag = document.createDocumentFragment();
//创建两组相同的图片,当第一组图片全都移动到左边后,再让其返回最右边,来回移动达到无限循环效果
for(let i=0;i<productsUrl.length;i++){
let li = document.createElement('li');
li.className = "popularProducts-cont-li";
let img = document.createElement('img');
img.className = "popularProducts-cont-img";
img.alt = "图片加载失败";
img.src = productsUrl[i];
li.appendChild(img);
frag.appendChild(li);
}
for(let i=0;i<productsUrl.length;i++){
let li = document.createElement('li');
li.className = "popularProducts-cont-li";
let img = document.createElement('img');
img.className = "popularProducts-cont-img";
img.alt = "图片加载失败";
img.src = productsUrl[i];
li.appendChild(img);
fragfrag.appendChild(li);
}
ul.appendChild(frag);
ulul.appendChild(fragfrag);
//无限循环移动
//ulul.offsetLeft获取第二组图片的位置值,这第二是相对于前一组图片的位置
//所以ulul.style.left值与ulul.offsetLeft不同,前者为0px,后者则是第一组图片的宽度值
//而第一组图片的offsetLeft值与style.left是同样的
var ss = ulul.offsetLeft;
function move(){
ul.style.left = (ul.offsetLeft-1)+"px";
ulul.style.left = (ulul.offsetLeft-1)-ss+"px";
//当哪一组图片全都超出div左边时就让其回到最右边
if(ul.offsetLeft <= -ss){ul.style.left = ss+"px";}
if(ulul.offsetLeft <= -ss){ulul.style.left = 0+"px";}
}
var time;
function set(){
time = setInterval(e =>{
move();
},20)
}
set();//开启循环
//鼠标移入暂停
cont.onmouseenter=function(){
clearInterval(time);
}
//鼠标移出开启
cont.onmouseleave=function(){
set();
}