html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果

html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果1.概述循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片。2.技术要点主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下:setTimeout(function,milliseconds,[arguments])参数说明:a.function:要调用的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代码

  1. EG-CN-1
  2. aatox
  3. akari
  1. EG-CN-10
  2. rakan
  1. EG-CN-7
  2. riven
  3. darius
  1. EG-CN-8
  2. fiora
  3. jayce
  4. noc
  1. EG-CN-2
  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代码实现图片循环滚动效果的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/161310.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 一个普通专科生,拿什么拯救你的未来?(精简版)

    一个普通专科生,拿什么拯救你的未来?(精简版)总有人要赢,为什么不能是我!—————科比-布莱恩特原文地址:www.dushunchang.top此文为小Du博客原创出品转载,复制请注明原文出处近来看到一则知乎头条,看完时已潸然泪下。附上原文链接戳这:传送门前言:我的故事由你来倾听,做最好的自己。2021年1月26日,今天是科比布莱恩特逝世一周年,我犹豫了很久,决定以自言的方式缅怀我的老大。大家好,我是一名普通的专科生,来自云南大理,大家都叫喜欢叫我小Du。可能很多人看到我的博客…

  • c3p0连接池配置模板,SSM中使用c3p0连接池配置属性

    c3p0连接池配置模板,SSM中使用c3p0连接池配置属性文章目录SSM使用c3p0连接池配置c3p0.properties属性文件Spring核心配置文件中配置applicationContext.xml2.c3p0-config.xmlSSM使用c3p0连接池配置c3p0.properties属性文件#c3p0连接池属性文件#四大基本信息c3p0.driverClass=com.mysql.jdbc.Driverc3p0.jdbcUrl=jdbc:mysql://localhost:3306/mybatis?useUnicode=true&am

  • mac ntfs 读写操作[通俗易懂]

    mac ntfs 读写操作[通俗易懂]发现mac系统无法对ntfs盘进行写操作,找到了解决办法,这里做个记录。1、在spotlight(就是那个放大镜图标)中输入“终端”二字,然后按enter。2、打开终端后输入diskutillist查看所有分区的卷标。[MacxdeMacBook-Pro:~Macx$diskutillist/dev/disk0(internal,physical):#:…

  • linux的nohup命令

    linux的nohup命令在应用Unix/Linux时,我们一般想让某个程序在后台运行,于是我们将常会用&在程序结尾来让程序自动运行。比如我们要运行mysql在后台:/usr/local/mysql/bin/mysqld_safe–user=mysql&。可是有很多程序并不想mysqld一样,这样我们就需要nohup命令,怎样使用nohup命令呢?这里讲解nohup命令的一些用法。nohup/root/start.sh&在shell中回车后提示:[~]$appendingoutp

  • ue4是什么意思_ue4主要是做什么用的「建议收藏」

    ue4是什么意思_ue4主要是做什么用的「建议收藏」ue4主要是做什么用的?UE4,即虚幻4,它是一套为开发实时技术而存在的引擎工具。目前广泛应用于3D建模渲染、游戏开发中。它完善的工具套件以及简易的工作流程能够使开发者快速修改或查看成果,对于代码的依赖性很低。而完整公开的源代码则能让使用者自由修改和扩展引擎功能。UE4开发引擎能够通过实时渲染,从NPC、人物角色、道具、AI等等方面很好地对游戏进行开发编辑。无论是关卡设计人员、美术开发人员、还是程…

  • python下载ts视频文件「建议收藏」

    python下载ts视频文件「建议收藏」importrequestsfrommultiprocessingimportPooldefmission(url,n):headers={"User-Agent":"Mozilla/5.0(WindowsNT6.1;WOW64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/69.0.3497.100Safa…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号