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 相关文章推荐
JavaScript获取GridView选择的行内容
Apr 14 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
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
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
客户端静态页面玩分页
2006/06/26 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
Python读写Excel文件的实例
2013/11/01 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
Python sorted排序方法如何实现
2020/03/31 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
python中的测试框架
2020/11/13 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
西柏坡导游词
2015/02/05 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
消防演习感想
2015/08/10 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
微信小程序调用python模型
2022/04/21 Python