html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果
1.概述
循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片。
2.技术要点
主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下:
setTimeout(function,milliseconds,[arguments])
参数说明:
a. function:要调用的JavaScript自定义函数名称。
b. Milliseconds:设置超时时间(以毫秒为单位)。
功能:经过超时时间后,调用函数。此值可以用clearTimeout()函数清除。
3.具体实现
(1)在页面的合适位置添加一个id属性为demo的
|
(2)编写自定义的JavaScript函数move(),用于实现无间断的图片循环滚动效果。speed数值越大图片滚动的越快,具体代码如下:
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.οnmοuseοver=function() { //停止滚动
clearInterval(MyMar);
}
demo.οnmοuseοut=function() { //继续滚动
MyMar=setInterval("Marquee(5)",speed);
}
知识点补充:javascript实现页面的自动循环滚动
首先html代码
- EG-CN-1
- aatox
- akari
- EG-CN-10
- rakan
- EG-CN-7
- riven
- darius
- EG-CN-8
- fiora
- jayce
- noc
- EG-CN-2
- leesin
这是一个通过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内部内容的高度即clientHeight和scrollHeight属性来确定滚动条到顶部的最大距离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
if(content.scrollTop>=h){content.scrollTop=0;position=0}
}
setInterval(startscroll,100)
console.log(clientheight)
console.log(offsetheight)
})
总结
以上所述是小编给大家介绍的JavaScript代码实现图片循环滚动效果的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果相关推荐
- html如何设置图片循环旋转动画效果,如何使用css3实现图片自动旋转的特效(完整代码)...
在介绍如何使用css3实现旋转图片特效的基础上,重点介绍了具体的步骤.这篇论文内容紧凑,希望大家能有所收获. 在浏览网页的过程中,你会遇到一种特殊的效果,叫做图片旋转:不同的图片会根据时间的变化在同一 ...
- html 图片自动滚动播放,javascript+html5实现仿flash滚动播放图片的方法
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...
- DW中html怎么调用js,把Javascript代码应用到网页中的方法
把Javascript代码应用到网页中的方法 发布时间:2012-05-14 11:21:49 作者:佚名 我要评论 把Javascript代码放到网页中,做网页的时候经常要用到这个方法.请看 ...
- php图片自动分页,WordPress点击图片自动进入下一分页代码【图片站福利】
前一段时间做了一个图片站,由于每篇文章都有十几张图片,所以对文章进行了分页.关于如何对wordpress的长文章进行分页,百度一下相关教程多如牛毛,这里不再进行阐述. 由于分了页,用户每次都只能点击下 ...
- 图片随机出现的HTML代码,Javascript随机显示图片的源代码
Javascript随机显示图片的源代码 作者:佚名 来源:网络整理 2008-4-11 在很多语言的学习中,"事件"都是一个比较难理解,但是又是一个很重要的概念.javascri ...
- html5多张图片滚动播放,javascript+html5实现仿flash滚动播放图片的方法_javascript技巧...
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...
- html小人动画效果代码,JavaScript+html5 canvas绘制的小人效果
本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: canvas中的缩放 #canvas ...
- android生成大分辨率图片,自动生成Android不同分辨率下的图片
转自: http://blog..net/offbye/article/details/50012605 Android屏幕分辨率适配的图标处理比较麻烦,让UI做不同尺寸的图片也挺浪费时间的,并且容易 ...
- html和js画圣诞树图片,教你如何把JavaScript代码写成圣诞树
我们使用了自己写的一个nodejs库,如果您要实现这样的效果,只需要按照下面第一章节的方法即可.当然您也可以在线压缩代码: 下面分两章节,分别讲解如何使用js2image这个库 和 js2image这 ...
最新文章
- 免费送书啦!《3D计算机视觉:原理、算法及应用》一本全搞定
- java 环境网站404_配置JavaWeb项目环境,修改jdbc配置文件,浏览器报404错误,不修改可以正常部署,jdbc没有改错...
- 浅谈sass与less区别优缺点
- 浮小麦升浮之气的本质
- H264 解码耗时分析
- UITabBarController的一些基础设置
- Sphinx 文档例子
- 最大化窗口快捷键_计算机快捷键大全(最全篇)
- 黑马程序员视频-微信小程序-原生框架——项目搭建
- oracle查询一年的第几周,Oracle--计算某一日期为一年中的第几周
- 吃鸡游戏计算机配置,手游吃鸡pc端吃什么配置
- 个人博客详细文章目录索引(持续更新)
- 益生菌居然这么重要?抑郁和它那些不得不说的秘密
- 马尔可夫毯(Markov Blanket)
- gis坐标|度分秒与十进制转换公式
- 饿了么交易系统设计思路
- elasticsearch 分片(Shards)的理解
- shiro 使用md5密码加密 锁定账户
- 【中塘镇】助力儿童,健康成长---创意超轻黏土手工制作主题活动
- 世界杯 叮当 机器人 树莓派_世界杯营销大战,移动互联网谁捧起了大力神杯