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 相关文章推荐
不错的JS中变量相关的细节分析
Aug 13 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
JS代码实现table数据分页效果
May 26 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
javascript canvas实现雨滴效果
Jun 09 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
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
javascript中的new使用
2010/03/20 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
python实现图片转字符画
2021/02/19 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
国际会议邀请函范文
2014/01/16 职场文书
关于运动会的稿件
2014/02/02 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
开学典礼校长致辞
2015/07/29 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
vue ref如何获取子组件属性值
2022/03/31 Vue.js
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS