JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
本文实例讲述了JavaScript学习笔记之基于定时器实现图片无缝滚动功能。分享给大家供大家参考，具体如下：
一、无缝滚动理论基础
基础知识
1.setInterval（function，time）、clearInterval（timer）
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
2.offsetLeft与style.left的区别
offsetLeft 获取的是相对于父对象的左边距
left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距
如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，
这同offsetLeft是相同的，区别在于：
1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。
2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。
3. style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，我做过试验，如果定义在css里，style.left的值仍然 为空，这就是我刚开始碰到的问题，总是取不到style.left的值。
offsetLeft则仍然能够取到，无需事先定义div的位置。
二、代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
*{
margin: 0;
padding: 0;
}
#div2{
width: 400px;
margin: 100px auto;
}
input{
margin:0 auto;
text-align: center;
margin-left: 80px;
font-size: 40px;
}
#div1{
width: 712px;
height: 108px;
margin: 100px auto;
position: relative;
background-color: red;
overflow: hidden;
}
#div1 ul{
position: absolute;
left: 0;
top: 0;
}
#div1 ul li{
float: left;
width: 178px;
height: 108px;
list-style:none;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var lBtn=document.getElementById('lbtn');
var rBtn=document.getElementById('rbtn');
//将ul复制一份相加复制给ul（这样ul相当于有8张图片）
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
//speed控制图片移动方向和速度
var speed=2;
function move(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left=0;
}
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
}
var timer=setInterval(move,30);
// 鼠标移进时，图片停止运动
oDiv.onmouseover=function(){
clearInterval(timer);
};
//鼠标移出时，图片继续移动
oDiv.onmouseout=function(){
timer=setInterval(move,30);
}
//按钮控制移动方向
lBtn.onclick= function () {
speed=-2;
}
rBtn.onclick=function(){
speed=2;
}
};
</script>
</head>
<body>
<div id="div2" >
<input type="button" value="向左" id="lbtn"/>
<input type="button" value="向右" id="rbtn"/>
</div>
<div id="div1">
<ul>
<li><img src="images/1.jpg" alt=""/></li>
<li><img src="images/2.jpg" alt=""/></li>
<li><img src="images/3.jpg" alt=""/></li>
<li><img src="images/4.jpg" alt=""/></li>
</ul>
</div>
</body>
</html>
三、效果图
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
JavaScript实现简单精致的图片左右无缝滚动效果
本文实例讲述了JavaScript实现简单精致的图片左右无缝滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
-
可自定义速度的js图片无缝滚动示例分享
思路: 一组图片 控制它的滚动条进行滚动 且此时对这组图片进行复制并添加进原图片组中,现在就有两组图片了.你可以想象一下,现在滚动条继续滚动,原来那组图片最后一张图片已经滚至顶端且消失,复制的那组图片的第一张跟在原图最后一张图片后出现,此时你就能感觉到无缝滚动了. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D
-
js代码实现无缝滚动(文字和图片)
一款适用于方案和图片的JS无缝滚动代码,可控制向左或向右滚动,代码不算复杂,而且本无缝滚动代码兼容性也挺好,你几乎不需要修改什么代码,就能使用了.测试时候把那些带标号的方块都改成图片吧,这样就更有感觉了. 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无缝滚动</title> <s
-
javascript实现多张图片左右无缝滚动效果
结构:box包含ul,ul包含4个li:ul绝对定位. 复制li-1.li-2到第li-4后面,为了区分于li-1.li-2,内容改为li-5.li-6,颜色不变.此时ul包含6个li. 需要注意的是,移动的是ul这个大盒子而不是li. 原理:当ul 绝对定位的left 值等于(li-1+li-2+li-3+li-4)的宽度时,利用JavaScript快速复原left 值为0 . 此时请注意盒子里面数字和颜色的变化! 效果图: 示例代码: <!DOCTYPE html> <html la
-
jcarousellite.js 基于Jquery的图片无缝滚动插件
1.引入JS库,jquery.js脚本和插件脚本jcarousellite.js. 复制代码 代码如下: <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jcarousellite.js"></script> 2
-
JS简单封装的图片无缝滚动效果示例【测试可用】
本文实例讲述了JS简单封装的图片无缝滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="
-
原生JS实现图片无缝滚动方法(附带封装的运动框架)
话说轮播图效果是前端er学习JS的必经之路啊,很多同学写的第一个JS效果应该就是它了,在各大网站我们都会经常见到,但是无缝滚动运动效果的轮播图,对于小白们来说还是有一定难度的. 我们来看看思路吧~ 首先我们要实现的效果有以下几点: 小圆点:点击小圆点显示与之对应的图片 向左和向右按钮:点击向左按钮图片向后运动,点击向右按钮图片向前运动 定时器:每隔 2s 自动播放 主要难点在于: 当图片运动到最后一张,点击向右的按钮时,应该显示第一张: 当前显示的是第一张,点击向左的按钮时,应该显示最后一张:
-
使用Javascript简单实现图片无缝滚动
js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距 3.offsetWidth:设置或获取指定标签的宽度 4.setInterval():设置方法定时启动 5.clearInterval();清除定时器 效果图: 先睹为快:demo 复制代码 代码如下: <!DOC
-
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
本文实例讲述了JavaScript学习笔记之基于定时器实现图片无缝滚动功能.分享给大家供大家参考,具体如下: 一.无缝滚动理论基础 基础知识 1.setInterval(function,time).clearInterval(timer) setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clea
-
jQuery实现的无缝广告图片左右滚动功能详解
本文实例讲述了jQuery实现的无缝广告图片左右滚动功能.分享给大家供大家参考,具体如下: 先是写了一个此功能的jQuery插件,但是一时写不出如何使用鼠标进行滚动方向的切换,于是又写了另一个可以实现切换的版本... 原理: 1.把滚动的内容复制2份放到原内容左右,这样无论向左右滚动都不会出现断掉的情况 2.改变内容样式的left值实现滚动效果,向左或向右滚动一个内容的长度后,还原并继续滚动,这样看起来就像无缝一直滚动的样子了(视觉上的效果,^_^) 3.鼠标放上去则clearInterval,
-
原生JavaScript实现的无缝滚动功能详解
本文实例讲述了原生JavaScript实现的无缝滚动功能.分享给大家供大家参考,具体如下: 无缝轮播(原生JavaScript) 一:HTML部分: <div class="box" id="box"> <ul class="J_XSlide list"> <li class="J_tabContent"><a href="#" rel="external
-
基于Python实现评论区抽奖功能详解
目录 1. 分析评论接口 2. 获取评论数据 3. 筛选评论用户 4. 抽取幸运观众 5. 完整源码 5.1 字符串截取的方式 5.2 正则匹配方式 5.3 执行结果 1. 分析评论接口 首先,我们需要找到评论数据的「接口」,也就是网站获取评论数据的请求. 打开一个需要抽奖的文章,进入「开发者模式」(按F12 或 右键检查),选中 Network 选项,同时「刷新」文章页面,使其重新发送请求,在右侧工具栏中观察页面发送的请求,逐个分析请求,根据响应内容判断出获取评论的请求 在 Headers 栏
-
Java基于命令模式实现邮局发信功能详解
本文实例讲述了Java基于命令模式实现邮局发信功能.分享给大家供大家参考,具体如下: 一. 模式定义 命令模式,将来自客户端的请求封建为一个对象,无须了解这个请求激活的动作或有关接受这个请求的处理细节.命令模式的根本目的在于将"请求者"与"实现者"之间解耦. 二. 模式举例 1 模式分析 我们借用邮局发信来说明这一模式. 2 命令模式静态类图 3 代码示例 3.1信件接收者接口一IReceiver package com.demo.receiver; /** * 信
-
JS学习笔记之原型链和利用原型实现继承详解
本文实例讲述了JS学习笔记之原型链和利用原型实现继承.分享给大家供大家参考,具体如下: 原型链 原型链是一种关系,实例对象和原型对象之间的关系,关系是通过原型(__proto__)来联系的 实例对象中有__proto__,是对象,叫原型,不是标准的属性,浏览器使用,并且有的游览器不支持 构造函数中有prototype属性,也是对象,叫原型 注意 原型中的方法是可以互相访问的 实例代码 function Animal(name,age){ this.name=name; thia.age=age;
-
微信小程序学习笔记之文件上传、下载操作图文详解
本文实例讲述了微信小程序学习笔记之文件上传.下载操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序登录API与获取用户信息操作.这里再来介绍一下文件的上传与下载操作. [文件上传]wx.uploadFile (以上传图片为例) 后台上传接口Upload.php:(tp5) <?php namespace app\home\controller; use think\Controller; class Upload extends First { //上传图片API public fun
-
Python学习笔记之列表和成员运算符及列表相关方法详解
本文实例讲述了Python学习笔记之列表和成员运算符及列表相关方法.分享给大家供大家参考,具体如下: 列表和成员运算符 列表可以包含我们到目前为止所学的任何数据类型并且可以混合到一起. lst_of_random_things = [1, 3.4, 'a string', True] # 这是一个包含 4 个不同类型元素的列表 print(lst_of_random_things[0]) # 1 获取上述列表的第一个值和最后一个值 print(lst_of_random_things[0]) #
-
Python实现基于KNN算法的笔迹识别功能详解
本文实例讲述了Python实现基于KNN算法的笔迹识别功能.分享给大家供大家参考,具体如下: 需要用到: Numpy库 Pandas库 手写识别数据 点击此处本站下载. 数据说明: 数据共有785列,第一列为label,剩下的784列数据存储的是灰度图像(0~255)的像素值 28*28=784 KNN(K近邻算法): 从训练集中找到和新数据最接近的K条记录,根据他们的主要分类来决定新数据的类型. 这里的主要分类,可以有不同的判别依据,比如"最多","最近邻",或者
-
Python2实现的图片文本识别功能详解
本文实例讲述了Python2实现的图片文本识别功能.分享给大家供大家参考,具体如下: 这里需要用到python的几个库,分别是pytesser,以及pytesser的依赖库PIL.python的版本建议用2.7或者2.7一下的都行,不建议用python3以上的,因为python3不向下兼容,所以有很多python2的东西它不支持 pytesser下载的话,我直接在pycharm里面下全是失败,用DOS的命令行下也是失败,所以还是自己直接去google下吧 地址:http://code.googl