关于网页中的无缝滚动的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对象和属性的创建方法
Jan 15 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
简单的三步vuex入门
May 20 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
使用tensorflow实现AlexNet
2017/11/20 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
Python对excel文档的操作方法详解
2018/12/10 Python
python实现Flappy Bird源码
2018/12/24 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
商务英语求职信范文
2015/03/19 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技