Javascript基础——利用定时器实现的图片无缝滚动(offsetLeft)

最新推荐文章于 2024-07-15 16:14:38 发布
最新推荐文章于 2024-07-15 16:14:38 发布
阅读量2.9k 收藏 3
点赞数
分类专栏： Javascript Javascript 文章标签： 图片 无缝滚动 offsetleft setInterval clearInterval
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxy9602/article/details/53054844
版权
本文介绍了如何使用JavaScript实现图片的无缝滚动效果，主要涉及offsetLeft属性和定时器setInterval及clearInterval的运用。首先，通过复制li元素并改变ul的宽度实现滚动，当滚动过界时调整位置。此外，讨论了改变滚动方向的方法，包括调整滚动速度和修改判断条件，以及在鼠标移入和移出时暂停和恢复滚动的实现代码。
摘要由CSDN通过智能技术生成

1、无缝滚动

原理：（1）让div动起来，让ul一直向左/向右移动；

      （2）即利用定时器让物体从左到右或从右到左进行滚动。

采用offsetLeft——如oUl.style.left=oUl.offsetLeft-2+'px';（由左向右）

注意：offsetLeft为一个负值。


步骤：（1）复制li——innerHTML和+=，

      （2）修改ul的width—可把之前的1倍宽度扩充到两倍</

最低0.47元/天 解锁文章
pdsu_zhao
关注
专栏目录
前端JS -定时器 实现图片无缝滚动
Summer1991ZX的博客
10-12 1010
Js定时器 设置定时器分为两种： 一种是setTimeout（只实现一次），一种是setInterval（反复执行） 删除定时器：clearTimeout 或者clearInterval 下面demo是用定时器实现一个图片移动的效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U...
JS基础-特效篇（定时器）07-长图滚动
weixin_45799003的博客
05-08 248
1.效果：鼠标在图片上半部分向上滚动，鼠标在图片下半部分向下滚动；鼠标不在图片上停止滚动。 2.页面元素 <div id="box"> <img id="pic" src="images/03.jpg" alt=""> <span id="to-top"></span> <span id="to-bottom"></span> </div> 3.样式 <style> *
JS定时器及定时器案例（附完整代码）
最新发布
yjp1240201821的博客
07-15 1226
js的定时器详解，相关案例帮助更好理解！
JS,图片上下滚动（主要是定时器的熟练运用）
sunling的专栏
11-25 2681
Home   -->      *{     margin:0;     padding: 0;   }   #demo {     width: 512px;     height: 400px;     margin: 100px auto;     border: 1px solid #f00;     overflow: hidden;     positio
使用JS来制作轮播图定时器
weixin_64965154的博客
05-18 1565
这个意思就是我们可以使用 document.getElementById(‘ xx ’).innerHTML 来获取指定标签内的html内容这个[i]的意思是素组的下标，因为是动态，所以我们得写i，不能写死。删除之后我们也还需要一个小圆点我们就用到了add是添加的意思，然后我们这个毕竟是轮播图，我们从第一个需要增加，所以我们这里用模板字符串$i+1,JS最新的ES6语法模板字符串。if函数是判断语句，我们这块的意思是如果我们的i已经到了最后一张，那么数组长度就是八，然后会返回来1，这一步必不可少。
js计时器案例--实现拖拽滚动
赵佳敏的博客
09-26 350
js计时器实现拖拽滚动一、效果图二、实现思路三、核心代码 一、效果图 二、实现思路 第一步：使用循环计时器和一次性计时器实现图片轮播的动画效果。 第二步：设置鼠标进入，动画停止，鼠标离开，动画继续。 第三步：设置鼠标按下进行拖拽，然后检测用户鼠标移动的差值 ，大于图片一半宽， 直接下一张，小于一半直接返回当前的图片。 第四步：遍历图片底下的小按钮，鼠标进入到那个权，当前圈变红并且出现对应的图片。 三、核心代码 var timer,Item,Box,sx,ex,cha,List.
dw按钮图片滚动js_js实现图片无缝滚动特效
weixin_39926588的博客
12-22 2313
首先，无缝滚动的第一个重点就是——动。关于怎么让页面的元素节点动起来，这就得学明白关于JavaScript中定时器的相关知识。JS中的创建定时器的方法包括两种：setTimeout和setInterval。首先它们接收的参数相同：第一个参数是一个函数，用于定时器执行，第二个参数是一个数字，代表过多少毫秒之后定时器执行函数。它们的不同在于：setTimeout 是在经过指定的时间之后，只执行一次函数...
js实现图片无缝滚动特效
qq_43678748的博客
01-13 2081
js实现图片无缝滚动特效
js图片无缝平滑滚动
10-28
要实现图片的无缝滚动，主要涉及以下几个关键技术点： 1. **DOM操作**：通过JavaScript动态修改DOM元素的位置。 2. **事件监听**：为按钮绑定点击事件，控制图片的滚动方向。 3. **定时器**：使用定时器来实现连续的...
前端实战：小实例2——滚动轮播图
weixin_43328954的博客
06-07 1798
前言 实现思路 用 div 封装轮播图，用 img 标签放置所有图片，图片均初始化为不可见（display : none） HTML + CSS + JavaScript
JS定时器_制作网页中图片的轮播效果
Etui۹(･༥･´)و的博客
04-11 383
效果图： 源码及解析： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
JS完成图片轮播（JS定时操作）
cuterabbitbaby的博客
09-19 1787
JavaScript定时器
热门推荐
weixin_52629158的博客
04-30 1万+
setInterval() ：是属于 window 的方法，按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。其中 回调函数 "clock()" 可以写在 双引号中，也可以写在单引号中。setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。clearInterval() 方法 的参数 必须是由 setInterval() 返回的 ID 值。(这个内容 描红显示)
JS的定时器
m0_69100942的博客
07-16 1906
JS的Interval定时器和setTimeout定时器
JavaScript—定时器的使用—无缝滚动图片
生活不止眼前的枸杞， 还有蜂蜜和咖啡！
12-27 195
文本： setInterval 开启间隔型定时器 clearTimeout 关闭定时器 offsetWidth 获取宽度 offsetLeft 获取向左偏移量 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt...
JS中设置时间和定时器
NanandV1的博客
04-05 1087
在JavaScript中，可以使用Date对象来设置时间。定时器是一种计时设备，用于在设定的时间间隔内执行某个操作或发出某个信号。在计算机科学中，定时器常用于控制程序执行的时间。
JS零基础入门——10（轮播图自动轮播：定时器）
m0_65410668的博客
05-20 348
LOL轮播图自动滚动（定时器）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值