关于网页中的无缝滚动的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 相关文章推荐
javascript学习网址备忘
May 29 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
jquery easyui使用心得
Jul 07 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
JSONP基础知识详解
Mar 19 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
vue router demo详解
Oct 13 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
修改Vue打包后的默认文件名操作
Aug 12 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中常用数组处理方法实例分析
2008/08/30 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
FireFox中textNode分片的问题
2007/04/10 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
javascript实现拖放效果
2015/12/16 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
PHP7新特性简述
2017/06/11 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
Python3中的2to3转换工具使用示例
2015/06/12 Python
python读取oracle函数返回值
2016/07/18 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
人力资源本科毕业生求职信
2014/06/04 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis