关于网页中的无缝滚动的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 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
Javascript 面向对象 继承
May 13 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
详解angular element()方法使用
Apr 08 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
JavaScript实现简单图片切换
Apr 29 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留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
HTML DOM的nodeType值介绍
2011/03/31 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
python定时复制远程文件夹中所有文件
2019/04/30 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
广告学专业推荐信范文
2013/11/23 职场文书
教育专业自荐书范文
2013/12/17 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
对孩子的寄语
2014/04/09 职场文书
青春雷锋观后感
2015/06/10 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python