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 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
Node.js进阶之核心模块https入门
May 23 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 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中的一些数组排序方法分享
2012/07/20 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
javascript数组的使用
2013/03/28 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python连接DB2数据库
2016/08/27 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
python实现简单遗传算法
2018/03/19 Python
Python 元类实例解析
2018/04/04 Python
Python3爬虫全国地址信息
2019/01/05 Python
基于python生成器封装的协程类
2019/03/20 Python
python 魔法函数实例及解析
2019/09/25 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
通过cmd进入python的步骤
2020/06/16 Python
python 实现端口扫描工具
2020/12/18 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
升职自荐信
2013/11/28 职场文书
房产委托公证书
2014/04/08 职场文书
安全生产大检查方案
2014/05/07 职场文书
生日庆典策划方案
2014/06/02 职场文书
工程售后服务方案
2014/06/08 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
Python编写nmap扫描工具
2021/07/21 Python
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python