js图片滚动 多组图片滚动 如何实现

2025-04-16 22:33:09
推荐回答(3个)
回答1:

给你封装了下,自己调用函数就行了
function marquee(outElement,childElment,copyElement,speed){
var colee2=document.getElementById(copyElement);
var colee1=document.getElementById(childElment);
var colee=document.getElementById(outElement);
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
if(colee2.offsetTop-colee.scrollTop<=0){
colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
}
//============================函数这么调用就行了
marquee("colee","colee1","colee2",30);//自己改参数

回答2:

这里有一个无缝滚动效果
方向可以自己设置
可以设置定高定宽停顿
你把文字改成图片就行
里面有源码可以参考

回答3:

这个js绑定了三个div,如果你想在同一页面实现N个这样的效果你只要增加几份colee/colee1/colee2就可以了,当然这三个id都要改名,最好copy n份script不然变量名多了看着眼花。
当然你如果有基础实现这个很简单,如果没基础会搞得很乱且不得其解。