关于网页中的无缝滚动的js代码


Posted in Javascript onJune 09, 2016

随便打开一个网页,基本上都会看到无缝滚动或者轮播图,比如淘宝还有360官网的首页

关于网页中的无缝滚动的js代码关于网页中的无缝滚动的js代码关于网页中的无缝滚动的js代码

观察这些轮播图可以发现图片可以来回循环地切换,那么是怎样做到的呢?

做到轮播图或者说无缝滚动主要有两种方式,一种是通过对图片的明暗即透明图的改变来显示或隐藏图片,另一种是通过运动框架,将图片显示在可视区域。这两种方式都会用到同一个东西,那就是定时器。

JavaScript中的定时器有两种,1.setInterval();2.setTimeout();相对应的关闭定时器也有两种方法,clearInterval()和clearTimeout()。两种定时器的区别是前者可以执行多次,而后者只执行一次。

这次只说无缝滚动,下篇介绍轮播图。

实现简单的无缝滚动的代码如下:

/*完整的代码*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
div{position:relative;width:630px;height:220px;border:solid 2px black;overflow:hidden;}
ul{position:absolute;top:10px;left:0;}
img{width:200px;height:200px;float:left;margin-right:10px;border:2px solid yellow;}
li{list-style:none;margin:0;padding:0;}
ul{margin:0;padding:0;}
</style>
<script>
window.onload=function(){
var oUl=document.getElementById("main");
var aLi=oUl.getElementsByTagName("img");
var oInput=document.getElementsByTagName("input")[0];
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+"px";
var timer=null;
setInterval(function(){
oUl.style.left=oUl.offsetLeft-8+"px";
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left="0px";
}
},30);
};
</script>
</head>
<body>
<div>
<ul id="main">
<li><img src="../img/1.jpg"></li>
<li><img src="../img/2.jpg"></li>
<li><img src="../img/3.jpg"></li>
<li><img src="../img/4.jpg"></li>
<li><img src="../img/9.jpg"></li>
</ul>
</div>
</div>
</body>
</html>

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

无缝滚动的布局比较简单,下面主要讲解JS部分内容:

首先分别获取到ul和li,再将ul里面的内容复制一份,通过js动态修改ul的宽度(如果要做到上下无缝滚动,则修改其宽度),最后开定时器,代码中是每隔30微秒ul向左移动8个像素,而当ul的可视左边距小于ul总长度的一半时,使其变为0。由于计算机的运行速度非常快,所以几乎感觉不到这一变化。我们看到的只是图片不断地向左移动,无休止的运动。

以上所述是小编给大家介绍的关于网页中的无缝滚动的js代码,希望对大家有所帮助!

Javascript 相关文章推荐
按给定几率进行随机抽取的js代码
Dec 28 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 #Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 #Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 #Javascript
JavaScript事件学习小结(一)事件流
Jun 09 #Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 #Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 #Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 #Javascript
You might like
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
Python验证码识别的方法
2015/07/10 Python
Python实现的选择排序算法示例
2017/11/29 Python
python定时关机小脚本
2018/06/20 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
党员教师工作决心书
2014/03/13 职场文书
2014年化验室工作总结
2014/11/21 职场文书
初中中等生评语
2014/12/29 职场文书
出纳岗位职责
2015/01/31 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
总经理致辞
2015/07/29 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书