JavaScript代码实现图片循环滚动效果


Posted in Javascript onMarch 19, 2020

1.概述

循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片。

2.技术要点

主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下:

setTimeout(function,milliseconds,[arguments])

参数说明:

a. function:要调用的JavaScript自定义函数名称。

b. Milliseconds:设置超时时间(以毫秒为单位)。

功能:经过超时时间后,调用函数。此值可以用clearTimeout()函数清除。

3.具体实现

(1)在页面的合适位置添加一个id属性为demo的<div>标记,并在该标记中添加表格及要要滚动显示的图片。关键代码如下:

<div id="demo" style=" overflow: hidden; width: 455px; height: 166px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="marquePic1">
<!-- 要循环滚动的图片 -->
<table width="455" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr align="center">
<%for(int i=1;i<8;i++){%>
<td> <img src="Images/<%=i%>.jpg" width="118" height="166" border="1"> </td>
<%}%>
</tr>
</table>
</td>
<td id="marquePic2" width="1"></td>
</tr>
</table>
</div>

(2)编写自定义的JavaScript函数move(),用于实现无间断的图片循环滚动效果。speed数值越大图片滚动的越快,具体代码如下:

<script language="javascript">
var speed=30 ; //设置间隔时间
marquePic2.innerHTML=marquePic1.innerHTML;
var demo=document.getElementById("demo"); //获取demo对象
function Marquee(n){ //实现图片循环滚动的方法
if(marquePic1.offsetWidth-demo.scrollLeft<=0){ 
demo.scrollLeft=0; 
}
else{ 
demo.scrollLeft=demo.scrollLeft+n;
} 
} 
var MyMar=setInterval("Marquee(5)",speed);
demo.onmouseover=function() { //停止滚动
clearInterval(MyMar);
} 
demo.onmouseout=function() { //继续滚动
MyMar=setInterval("Marquee(5)",speed);
}
</script>

知识点补充:javascript实现页面的自动循环滚动

首先html代码

<div id="content">
<ol id="EG-CN-1">EG-CN-1
<li type="none">aatox</li>
<li type="none">akari</li></ol>
<ol id="EG-CN-10">EG-CN-10<li type="none">rakan</li></ol>
<ol id="EG-CN-7">EG-CN-7<li type="none">riven</li>
<li type="none">darius</li></ol>
<ol id="EG-CN-8">EG-CN-8<li type="none">fiora</li>
<li type="none">jayce</li>
<li type="none">noc</li></ol>
<ol id="EG-CN-2">EG-CN-2<li type="none">leesin</li></ol></div>

这是一个通过js自动添加list的div容器,随着名单的长度增加会自动增加scrollheight,而整个div是固定的宽高,通过css的overflow:scroll属性自动将多出的内容隐藏在scrollview里面
css代码如下,这里同时使用::-webkit-scrollbar 将滚动条隐藏以保证美观性

#content{
 width:430px;height:490px;
 position:absolute; top:180px;left:40%;
 font-size:20px;overflow:scroll;

}
#content::-webkit-scrollbar{display:none}
ol{font-size:35px}
li{font-size:25px}

接下来就是实现自动循环滚动的js代码

原理就是先读取div元素的高度以及div内部内容的高度即clientHeightscrollHeight属性来确定滚动条到顶部的最大距离h=clientHeight-scrollHeight,然后通过setInterval来实现滚动条到顶部的距离scrollTop属性的从0开始递增直到达到最大距离h,然后再将scrollTop归零,重新开始滚动

$(document).ready(function(){
content=document.getElementById('content')
clientheight=content.clientHeight
offsetheight=content.scrollHeight
h=offsetheight-clientheight
var position=0
function startscroll(){
if(content.scrollTop<h){position++;content.scrollTop=position}
if(content.scrollTop>=h){content.scrollTop=0;position=0}
}
setInterval(startscroll,100)

console.log(clientheight)
console.log(offsetheight)

})

总结

以上所述是小编给大家介绍的JavaScript代码实现图片循环滚动效果的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
写出高效jquery代码的19条指南
Mar 19 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
jquery插件格式实例分析
Jun 16 #Javascript
详解JavaScript对象类型
Jun 16 #Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 #Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 #Javascript
JSON字符串和对象相互转换实例分析
Jun 16 #Javascript
jQuery的层级查找方式分析
Jun 16 #Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 #Javascript
You might like
晶体管单管来复再生式收音机
2021/03/02 无线电
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
Django数据库操作之save与update的使用
2020/04/01 Python
Python控制台实现交互式环境执行
2020/06/09 Python
python源文件的字符编码知识点详解
2021/03/04 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
syb养殖创业计划书
2014/01/09 职场文书
学雷锋演讲稿
2014/03/04 职场文书
分层教学实施方案
2014/03/19 职场文书
活动总结怎么写啊
2014/05/07 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
银行授权委托书范本
2014/10/04 职场文书
股东出资证明书范例
2014/10/04 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
幼儿学前班评语
2014/12/29 职场文书
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang