js图片无缝滚动

最新推荐文章于 2022-02-18 19:52:16 发布
最新推荐文章于 2022-02-18 19:52:16 发布
阅读量514 收藏 6
点赞数 1
分类专栏： ICY___的前端入门 文章标签： 图片无缝滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ICY___/article/details/86556818
版权

虽然是一个简单的案例，但思想确实很巧妙，且一通百通！

主要原理：利用利用动态创建一个与当前相同的图片条，利用scrollLeft（滚动条的左水平偏移来实现滚动 用利用视觉暂留效应，实现图条的无缝循环；

<!-- 像电子屏一样的循环滚动 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片无缝滚动</title>
    <style>
        body {
            margin: 0%;
            padding: 0%;
        }

        .d1,
        .d3 {
            width: 3200px;
            height: 200px;
            float: left;
        }

        .d1>img,
        .d3>img {
            width: 400px;
            height: 200px;
最低0.47元/天 解锁文章
ICY___
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS实现轮播图图片无缝滚动原理
unlilalila的博客
10-20 5226
当轮播图滚动至现有图片最后一张时，需要让轮播图下一跳回到第一张图片，从而实现无限无缝循环滚动效果，但是为什么需要采用克隆来实现呢？为什么不直接从最后一张回到第一张？ 原理：在我们采用 num 变量计算图片移动的次数时，增加了一个 if 的判断条件，用于判断图片是否滚动至最后一张图片位置，如果没有复制或者克隆来新增一个子节点，循环就会在到达最后一张图时num 和left 变为 0 ，但是结束了 if 判断后会有一个 num 自增的动作，所以 num 变为 1 ，就会直接跳到第二张图，故需要克隆第一张图片作.
JS经典案例-无缝滚动轮播图（纯JS）
Allen-
11-05 4683
JS无缝滚动轮播图案例
【前端】实现图片无缝滚动·教程
qq_45677671的博客
02-04 599
文章目录效果图：需求分析：源代码：所用图片： 效果图： 需求分析： 实现无缝滚动 源代码： HTML部分 <div id="box"> <ul id="u"> <li><img src="a.jpg" alt="" /></li> <li><img src="b.jpg" alt="" /></li> <li><img src="c.jpg" alt="" />&l
Js实现图片无缝滚动
Shirongliang的博客
02-18 891
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ white-space: nowrap; display: inline-block } </style> </head> <body> &l
HTML内容无缝连接滚动效果
一念执着
08-23 646
以下仅供参考~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 父容器 --> <div id="marqueeA" style="width: 500px;height: 100px;overflow: scroll;"> <
js 图片无缝滚动
12-28
js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js ...
js无缝滚动代码制作js图片无缝滚动向上无缝滚动
11-17
下面我们将详细介绍如何用JS来制作图片的向上无缝滚动效果： 1. **HTML结构**： 首先，我们需要在HTML中设置一个包含所有图片的容器，例如`<div>`，并给每个图片设置相应的样式，确保它们在同一行排列。容器通常...
JavaScript实现图片无缝滚动效果
10-19
JavaScript 实现图片无缝滚动效果是一种常见的网页动态效果，主要用于展示多张图片，使得用户感觉图片在不断滚动，而不会出现明显的切换痕迹。这种效果能够增加网站的视觉吸引力，尤其适用于新闻滚动、产品展示等...
JS图片无缝滚动(简单利于使用)
01-19
原样复制后，几乎不需要改动就能用了！有问题大家讨论 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional/...<head><... charset=gb2312″ />...滚动代码</title><style>*
js实现图片无缝滚动
10-23
在JavaScript中实现图片无缝滚动是一种常见的网页动态效果，这种效果可以增加用户的交互体验，使得网页看起来更加生动活泼。下面我们将详细探讨如何使用纯JavaScript实现这一功能。 首先，我们需要了解几个关键的...
可以左右移动横向无缝滚动的JS图片展示
12-09
可以左右移动横向无缝滚动的JS图片展示，不明白的可以问我
JS实现图片无缝滚动的完美解决
05-26
JS实现图片无缝滚动的完美解决
js图片滚动插件支持单排图片上下滚动、图片无缝滚动
11-17
js图片滚动插件支持单排图片上下滚动、图片无缝滚动 js图片滚动插件支持单排图片上下滚动、图片无缝滚动 js图片滚动插件支持单排图片上下滚动、图片无缝滚动
图片无缝循环滚动
07-23
http://blog.csdn.net/folish_audi/article/details/38059281 看讲解
不间断无缝滚动图片
08-27
不间断无缝滚动图片 不间断 无缝 滚动图片效果 js 动态
html无缝滚动原理,Html5移动端获奖无缝滚动动画实现
weixin_35997246的博客
05-31 429
这篇文章主要介绍了Html5移动端获奖无缝滚动动画实现示例，内容挺不错的，现在分享给大家，也给大家做个参考。本文介绍了Html5移动端获奖无缝滚动动画实现示例，分享给大家，具体如下：需求分析哈哈，上动态图真的是一下就明了了。就是滚动么滚动，那么制作这个有什么方法呢？我们来总结一下:html骨架其实很简单，最外面的是做固定的窗口，里面的控制运动，里面是展示动画第一个结构第二个结构第三个结构第四个结构...
页面无缝滚动效果
webtext的博客
12-22 523
目前我只使用两种方式，如果还有其他方式，希望推荐一下。 1、js+transform 使用定时器动态增加大小，再把值赋给 transform，实现位置偏移，来实现无缝滚动。 html 一定要循环两遍数据，这样的话，会出现两个一样的数据，在一个数据消失后，不会使页面空白，而这时transform归0，有从头开始，因为两个数据相同，归0后视觉上就像无缝滚动。 <div style="height: 100%" @mouseenter="moveStar()" @mouseleave="moveLeave
ae图片无缝循环滚动_纯 CSS 实现无缝滚动
weixin_35733495的博客
12-21 3217
前言在某些场景下，需要在页面中循环滚动地展示一些信息，如商品信息、营销活动图片、系统消息通知等。在以往的开发中，我们一般都会使用 Swipper 或类似的组件来实现，其功能也是十分强大；不过我们今天讨论的仅仅是用一种更轻量的、更简便的甚至无需 JS 的方式来实现一个简单的无缝滚动而已。何为无缝滚动？拆开来说，应从右向左理解。在网页中，滚动是指元素在某个方向的位移过程；无缝，指的是元素上一...
js原生轮播图 —— 无缝滚动的原理
chungoujiang1690的博客
05-25 561
window.onload = function() { var oUl = document.getElementById("g-br-jpg"); var aLi = oUl.children; var oBtn = document.getElementById(...
js图片无缝滚动的原理
最新发布
08-11
JavaScript图片无缝滚动的原理是通过设置定时器，不断改变图片容器的left值来实现。 1. 首先，确定图片容器的宽度，该容器需要包含要滚动的图片。 2. 然后，计算每次滚动的距离，可以根据需求设置滚动速度。 3. 使用JavaScript设置一个定时器，设定一个时间间隔，用来触发滚动函数。 4. 在滚动函数中，获取图片容器的当前left值，然后向左移动一个滚动距离，当left值超过容器宽度时，把left值设置为0，实现循环滚动的效果。 5. 不断重复步骤4，就可以实现图片的无缝滚动效果。 例如： ``` // 获取图片容器和滚动距离 var container = document.getElementById('image-container'); var scrollDistance = 1; // 设置滚动距离，以像素为单位 // 定义滚动函数 function scrollImage() { // 获取当前left值 var currentLeft = container.offsetLeft; // 判断是否超过容器宽度 if (currentLeft <= -container.offsetWidth) { // 超过容器宽度，重新设置为0 currentLeft = 0; } else { // 未超过容器宽度，左移滚动距离 currentLeft -= scrollDistance; } // 更新left值 container.style.left = currentLeft + 'px'; } // 设置定时器，触发滚动函数 setInterval(scrollImage, 10); // 每10毫秒触发一次滚动函数 ``` 通过以上步骤，就可以实现JavaScript图片的无缝滚动效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值