当前位置:首页 > 日记 > 正文

Web页面上无缝滚动的js代码

Web页面上无缝滚动的js代码
随便打开一个网页,主要看无缝滚动或旋转木马的身影,如淘宝的官方网站首页360
观察转盘图可以在图片中找到可以来回切换的循环,然后怎么办

旋转带或无缝滚动主要有两种方式,一种是通过图像的亮度变化到透明的地图来显示或隐藏图片,另一种是通过移动帧,将图片显示在观察区域。同样的事情将在这两种方式中使用,也就是计时器。

有两种定时器在Javascript中,1.setinterval(),2.settimeout(),有两种方法来关闭定时器,clearInterval()和()清除定时器。两种定时器的区别是,前者可以执行多次,后者只被执行一次。

这只是说无缝轧制,引入旋转木马图。

实现简单无缝滚动的代码如下所示:
完整的代码
div {位置:相对;宽度:630px;身高:220px;边界:固体2px黑;溢出:隐藏;}
UL {位置:绝对;顶部:10px;左:0;}
img {宽度:200px;高度:200px;浮动:左;右边距:10px;边界:2px固体黄色;}
李{样式表:无;边距:0;填充:0;}
边距:0;填充:0;}
窗口。指针函数(){
VaR,= document.getelementbyid(主要);
VaR阿里= oul.getelementsbytagname(IMG);
无功oinput = document.getelementsbytagname(输入){ 0 };
灵魂.innerHTML += oul.innerhtml;
灵魂。风格。宽度=长度*阿里。阿里{ 0 }。offsetwidth +PX;
var定时器= null;
setInterval(){()函数(
灵魂。风格。左=灵魂。offsetleft-8 +PX;
如果(OUL。offsetleft < -灵魂。offsetwidth / 2){
灵魂。风格。左=0px ;
}
},30);
};

----------------------------------------------------------------------------------------------------------------------------------------------------------- / /

无缝轧制的布局比较简单,下面是JS部分的主要讲解:

首先,获得UL和李,然后复制里面的内容修改UL,UL通过js动态宽度(如果你想做下一个无缝滚动,修改其宽度),最后打开定时器代码每30微秒UL的8像素左右,而UL一半少UL的总长度比左侧的视觉距离,这是0。因为电脑运行速度很快,它几乎感觉不到变化。我们看到的是,画面不断向左移动,无休止的运动。

上面的描述是关于Web页面上无缝滚动的JS代码。我希望能帮助你!

相关文章

动画导论:如何画卡通人物的手

动画导论:如何画卡通人物的手

动画,导论,卡通人物,电脑软件,学会画人物的手可能是每一个绘画学习者遇到的最困难的技巧之一。有在手许多形式和不同的情感,以及卡通。你需要能够在不同的角度,在观众的眼睛是动态的和有吸引力的画手。不要低估了一个很好的画过卡通手强度;mda…

11冲程双金焰大气PS图象处理软件

11冲程双金焰大气PS图象处理软件

双金,冲程,图象,大气,处理软件,文字成分的影响更为复杂,分为火焰底部、中间金属质感、金属笔画三部分;每部分都是用若干文字层,分别用图层样式来制作效果。 最终效果 1,打开ps,按Ctrl + N构建一个新的画布,大小为1280×1024,分辨率为72像素/英寸,…

手机预览插件photoswipe.js使用总

手机预览插件photoswipe.js使用总

插件,电脑软件,photoswipe,js,移动图片预览photoswipe PC,支持图片预览,更多的Android、iOS手机图片预览。 资源包:photoswipe-3.0.5 在photoswipe官方网站,有1.0.11下载,但1.0.11版本是有缺陷的。当它在一些Android手机上滑动时,它会跳2张图片…

如何卸载WPS表WPS教程

如何卸载WPS表WPS教程

教程,卸载,电脑软件,WPS,有时我们想卸载WPS并重新安装它,但是我们不知道如何卸载它。我们现在该怎么办让我们告诉你如何卸载WPS。 卸载WPS的方法 点击屏幕左下角的开始菜单。 点开控制面 点开程序和函数 查找WPS程序 软件中的右键-卸载 点…

MySQL修改密码后解决phpmyadmin

MySQL修改密码后解决phpmyadmin

修改密码,电脑软件,MySQL,phpmyadmin,安装WAMP集成服务器和配置后,单击phpMyAdmin进入MySQL数据库的在线用户,但是当你修改mysql管理员root用户的密码,点击下一页。 错误的原因:这是因为phpmyadmin配置文件没有同步更新后的MySQL密码被修改 …

在哪里使用WPS演示教程的WPS格式

在哪里使用WPS演示教程的WPS格式

教程,演示,格式,电脑软件,WPS,在普通的文本编辑过程中,如何快速地把两段相同的格式、格式的画笔给大家解决这个问题。其实使用的方法并不难,下面的小编就如何教你如何在WPS文本中使用格式画笔,欢迎大家学习。 在WPS文本中使用格式化画笔 打…

解决与虚拟机连接Oracle的ora-1215

解决与虚拟机连接Oracle的ora-1215

连接,虚拟机,电脑软件,Oracle,ora,谈论ora-12154问题,互联网上有很多的解决方案。原因是基本统一:TNS听者或配置不正确。对于监听器配置一般是不正确的,大多数人遵循的默认配置的所有方式,其次是Oracle服务名。如果本地连接可以连接到Oracle,其…

用ps滤波器制作亚麻背景图

用ps滤波器制作亚麻背景图

背景图,滤波器,亚麻,电脑软件,ps,今天给大家分享一下PS过滤生产亚麻底图的方法,教程很不错,值得学习,好吧,让我们看看吧。 步 点击文件-新命令(Ctrl + N)创建一个新的空白图像的RGB模式的1920 * 1080。(大小使用图片) 设置前景色为c8aa64参数,和背…

快速制作名称代码表

快速制作名称代码表

代码表,名称,快速,电脑软件,近年来,高考以及各种职称和资格考试报名工作开始在全国,将转换成汉字需要用汉字编码字符集基本集4位数GB 2312-80 的时间填写报名信息卡的信息交换,如果检查手册速度必然会慢,所以,如何快速做一个编码表,包含了所有学…

控件控件长度的文本控件

控件控件长度的文本控件

控件,文本,长度,电脑软件,在web项目的开发过程中,有时会出现一个问题,即控件被文本内容所破坏,但是如何控制控件文本的内容呢也许有人会对显示控制文本控件使用Javascript的子串,但由于字母、汉字语言的每个字符,其他大小不一,导致相同的子串(0, 10),一些…

windows10安装mysql5.7.17教程

windows10安装mysql5.7.17教程

教程,安装,电脑软件,本教程为您分享给你参考的mysql5.7.17安装配置方法,具体如下 手术全证 精彩的主题分享:MySQL版本安装教程mysql5.7版安装教程 以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。…

PS在暴风雨前制造乌云。

PS在暴风雨前制造乌云。

乌云,雨前,暴风,电脑软件,PS,萧边今天要与你分享关于之前的风暴使PS云图的方式。这个教程还不是很好。这个介绍也很详细,希望能帮助PS设计爱好者。 步 要找到原始地图和材料图 打开原图片和材质贴图,拖拽云素材图片到原始图片,并创建一个遮…