图片循环向上无缝滚动特效

7个月前 (04-18 21:00)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

几张图片循环无缝向上滚动效果,当用户的鼠标经过时暂停,移开后继续滚动,根据自己的需求来自定义滚动速度。

<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="www_wuming_ren" style="overflow:hidden;height:360;width:500;">
<div id="wwwwumingren_top1">
<img src="/img/20240418_www_wuming_ren_46.jpg">
<img src="/img/20240418_www_wuming_ren_47.jpg">
<img src="/img/20240418_www_wuming_ren_48.jpg">
<img src="/img/20240418_www_wuming_ren_49.jpg">
<img src="/img/20240418_www_wuming_ren_50.jpg">
</div>
<div id="wwwwumingren_top2"></div>
</div>
<script>
var speed=30
wwwwumingren_top2.innerHTML=wwwwumingren_top1.innerHTML //克隆wwwwumingren_top1为wwwwumingren_top2
function Marquee1(){
//当滚动至wwwwumingren_top1与wwwwumingren_top2交界时
if(wwwwumingren_top2.offsetTop-www_wuming_ren.scrollTop<=0)
www_wuming_ren.scrollTop-=wwwwumingren_top1.offsetHeight //www_wuming_ren跳到最顶端
else{
www_wuming_ren.scrollTop++;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
www_wuming_ren.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
www_wuming_ren.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>


0
0
收藏0

本文来自武鸣人网站,转载请注明出处

本文地址:https://www.wuming.ren/a/775.html

回帖

图片循环向上无缝滚动特效 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息