博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js动画之无缝滚动
阅读量:6438 次
发布时间:2019-06-23

本文共 1302 字,大约阅读时间需要 4 分钟。

效果图如下:

HTML代码如下:

	
无缝滚动
<
>
  • 商品图片
  • 商品图片
  • 商品图片
  • 商品图片
  • 商品图片

JS代码如下:

window.onload = function(){    // alert(1)    // 1、自动播放-- 左侧 多次循环 left减小    var oList = this.document.getElementById('list')    var oBtn01 = document.getElementById('btn01')    var oBtn02 = document.getElementById('btn02')    var oSlide = document.getElementById('slide')    var num = 0  // left取值    var speed = -5    var oTimer = null    // 程序复制两份产品    oList.innerHTML += oList.innerHTML    // oList.innerHTML = oList.innerHTML + oList.innerHTML    oTimer = setInterval(fnMove, 50)    function fnMove(){        num += speed        // 如果left小于-1000,回到left为0继续左侧移动        if(num < -1000)        {            num = 0        }        if(num>0)        {            num = -1000        }        oList.style.left = num +'px'    }    // 2、左右箭头单击,右 -- 右侧移动  左 -- 左侧移动    oBtn02.onclick = function(){        speed = 5    }    oBtn01.onclick = function(){        speed = -5    }    // 3、鼠标滑过停止播放  - 鼠标离开继续播放    oSlide.onmouseover = function(){        // 停止定时器        clearInterval(oTimer)    }    oSlide.onmouseout = function(){        // 开启定时器        oTimer = setInterval(fnMove, 50)    }}

  

 

                                                                   -------  知识无价,汗水有情,如需搬运请注明出处,谢谢!

转载地址:http://mmkwo.baihongyu.com/

你可能感兴趣的文章
企业如何走出自己的CRM非常之道?
查看>>
整合看点: DellEMC的HCI市场如何来看?
查看>>
联合国隐私监督机构:大规模信息监控并非行之有效
查看>>
韩国研制出世界最薄光伏电池:厚度仅为人类头发直径百分之一
查看>>
惠普再“卖身”,软件业务卖给了这家鼻祖级公司
查看>>
软件定义存储的定制化怎么走?
查看>>
“上升”华为碰撞“下降”联想
查看>>
如何基于Spark进行用户画像?
查看>>
光伏发电对系统冲击大 “十三五”电力规划重点增强调峰能力
查看>>
全球19家值得关注的物联网安全初创企业
查看>>
Android下的junit 单元测试
查看>>
这几个在搞低功耗广域网的,才是物联网的黑马
查看>>
主流or消亡?2016年大数据发展将何去何从
查看>>
《大数据分析原理与实践》一一第3章 关联分析模型
查看>>
《挖掘管理价值:企业软件项目管理实战》一2.4 软件设计过程
查看>>
Capybara 2.14.1 发布,Web 应用验收测试框架
查看>>
ExcelJS —— Node 的 Excel 读写扩展模块2
查看>>
《数字短片创作(修订版)》——第一部分 剧本创作 第1章 数字短片创意技法 剧本创作的构思...
查看>>
MIT 学生挑战新泽西索取挖矿程序源代码的要求
查看>>
实践 | 不同行业WMS选型策略及需要注意的一些问题
查看>>