JS实现图片的不间断连续滚动的简单实例


Posted in Javascript onJune 03, 2016

js替代marquee实现图片无缝滚动

可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动。

先了解一下下面这几个属性:

innerHTML: 设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth: 获取对象的滚动宽度

offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

-----------------------------------------------------------------------

图片向上无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向上滚动
<div id="demo">
<div id="demo1">
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>

<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementByIdx_x("demo");
var tab1=document.getElementByIdx_x("demo1");
var tab2=document.getElementByIdx_x("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>

图片向下无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向下滚动
<div id="demo">
<div id="demo1">
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>

<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementByIdx_x("demo");
var tab1=document.getElementByIdx_x("demo1");
var tab2=document.getElementByIdx_x("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
tab.scrollTop=tab.scrollHeight
function Marquee(){
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
else{
tab.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>

图片向左无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向左滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>

<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementByIdx_x("demo");
var tab1=document.getElementByIdx_x("demo1");
var tab2=document.getElementByIdx_x("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

图片向右无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向右滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>

<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementByIdx_x("demo");
var tab1=document.getElementByIdx_x("demo1");
var tab2=document.getElementByIdx_x("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

最后,如果有人想一个页面有两个滚动图片集,一个往左一个往右,那下面的能用了。我把js都加个i了,还有css

向右滚动

<div id="demoi">
<div id="indemoi">
<div id="demoi1">
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="https://3water.com/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demoi2"></div>
</div>
</div>

<script>
<!--
var speedi=10; //数字越大速度越慢
var tabi=document.getElementByIdx_x("demoi");
var tabi1=document.getElementByIdx_x("demoi1");
var tabi2=document.getElementByIdx_x("demoi2");
tabi2.innerHTML=tabi1.innerHTML;
function Marqueei(){
if(tabi.scrollLeft<=0)
tabi.scrollLeft+=tabi2.offsetWidth
else{
tabi.scrollLeft--;
}
}
var MyMari=setInterval(Marqueei,speedi);
tabi.onmouseover=function() {clearInterval(MyMari)};
tabi.onmouseout=function() {MyMari=setInterval(Marqueei,speedi)};
-->
</script>

以上这篇JS实现图片的不间断连续滚动的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 #Javascript
js不间断滚动的简单实现
Jun 03 #Javascript
Ionic如何创建APP项目
Jun 03 #Javascript
Ionic快速安装教程
Jun 03 #Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 #Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 #Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 #Javascript
You might like
与文件上传有关的php配置参数总结
2013/06/14 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
jQuery 无刷新分页实例代码
2013/11/12 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
Python 自动化表单提交实例代码
2017/06/08 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
委托协议书范本
2014/04/22 职场文书
班组长安全工作职责
2014/07/15 职场文书
普通党员对照检查材料
2014/09/24 职场文书
工程部主管岗位职责
2015/02/12 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python