原生 js 实现无缝滚动轮播

Love The Way You Lie 2022-05-28 11:00 267阅读 0赞

上一次我们看了如何实现简单的轮播图，以及各种常用的效果实现；

这一次，我们看看无缝滚动轮播图的实现（利用 左边的margin 来实现）；

原理： 我们创建一个div，下图共红色部分；然后再div中创建一个<ul>，并且<ul>里面放置6个<li>,

每个<li> 中放置一张图片，前三张图片和后三张图片是重复的，如图标记1，2，3；

我们让div  里面<ul> 超出部分隐藏，只看见前面三张图片，如图第一种状态；

然后让 <ul> 整体向左移动，这样就实现了图片的滚动效果，

当第三张图片滚出div的左边界时，我们再设置 <ul>的marginLeft值，

让 <ul> 回到第一种状态；  之后就是不断重复这个过程；

![70][]

代码实现：

<!doctype html>

< html>

< head>

< meta charset= "utf-8" >

< title >无缝滚动轮播图 </ title >

< style  type = "text/css" >

\#container \{

width : 300 px ;

height : 200 px ;

border : 1 px  solid red;

overflow :hidden;

\}

ul \{

list-style-type :none;

width : 600 px ;

border : 1 px  solid green;

padding : 0 px ;

\}

ul  li \{

display :inline-block;

width : 100 px ;

height : 100 px ;

\}

img \{

width : 100 % ;

\}

< / style >

</ head>

< body>

< div id= "container" >

< ul id= "content" >

< li >< img src= "lb0.jpg" >

< li >< img src= "lb1.jpg" >

< li >< img src= "lb2.jpg" >

< li >< img src= "lb0.jpg" >

< li >< img src= "lb1.jpg" >

< li >< img src= "lb2.jpg" >

</ ul >

</ div >

< script >

window. onload = **function** ()\{

**var**  obj = document. getElementById ( "content" );

obj .style.marginLeft = 0 \+ "px" ;

**function**  move ()\{

console . log ( obj .style.marginLeft);

if ( parseInt ( obj .style.marginLeft) <=- 300 )\{

obj .style.marginLeft = 0 \+ "px" ;

\} else \{

obj .style.marginLeft = parseInt ( obj .style.marginLeft) \- 1 \+ "px" ;

\}

\}

setInterval ( move , 25 );

\}

< / script >

</ body>

</ html>

你可能会疑惑 上面<li>为什么不闭合，因为 inline-block 会让<li>之间产生间隙，这样做是为了

消除间隙，这只是其中一种方式；

[70]: /images/20220528/ab38b3d32171470b9c36b3158488bbe0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，267人围观）

还没有评论，来说两句吧...

相关阅读

相关原生JS实现无缝轮播图

论是app，还是网站，基本上都会出现轮播图，今天和大家分享使用面向对象实现无缝轮播图的两种方式。轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知...

谁借莪１个温暖的怀抱￠/ 2024年04月18日 20:56/ 0 赞/ 31 阅读

相关 JS实现轮播图-无缝衔接

在这里封装了一个改变元素节点的运动的函数，使用的时候只要调用即可： 1、第一个参数是要操作元素节点。 2、第二个参数是一个对象存放样式名和对应样式的目标值。 3、第三个参

叁歲伎倆/ 2022年10月23日 15:26/ 0 赞/ 213 阅读

相关左右无缝轮播html,JS实现左右无缝轮播图代码

废话不多说了，直接给大家贴代码了。无缝轮播图：无缝轮播图 \\{margin: 0;padding:0; \} ul\{list-style: none;\} .

痛定思痛。/ 2022年10月10日 02:09/ 0 赞/ 338 阅读

相关无缝轮播滚动html模板,js轮播图无缝滚动效果

在做轮播图时如果首尾不能连起来的话，效果会有点丑，下面介绍一种我常用的方法：先文字说明一下：如果要展示5张图，分别为1,2,3,4,5 那么在代码的引入中是这样的：1

缺乏、安全感/ 2022年10月06日 10:53/ 0 赞/ 222 阅读

相关 jQuery实现轮播图的无缝滚动

之前在学习jQuery时，想做一个轮播图的demo，于是在网上了找了相关的视频教程。然后根据教程不断的改变ul元素的左外边距自己做了一个demo，但是在演示的时候，最后一张到第

╰半夏微凉°/ 2022年08月04日 14:46/ 0 赞/ 301 阅读

相关原生 js 实现无缝滚动轮播

上一次我们看了如何实现简单的轮播图，以及各种常用的效果实现；这一次，我们看看无缝滚动轮播图的实现（利用左边的margin 来实现）；原理：我们创建一个div，下图共

Love The Way You Lie/ 2022年05月28日 11:00/ 0 赞/ 268 阅读

相关用原生JavaScript实现无缝轮播

html代码 <div id="banner"> <ul> <li><img src="images/1.jpg"></li>

一时失言乱红尘/ 2022年05月27日 11:20/ 0 赞/ 200 阅读

相关 js无缝轮播效果实现，自动轮播

轮播图，是网站首页中最为常见的一种图片切换特效，那么今天就来分享一篇前端开发实战当中经常使用到的实现无缝轮播图效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构

本是古典何须时尚/ 2022年04月06日 06:13/ 0 赞/ 352 阅读

相关原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画

offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲

r囧r小猫/ 2022年03月08日 11:22/ 0 赞/ 854 阅读

相关 Jquery+css实现图片无缝滚动轮播

Today，在XX学院的教学视频中，偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程，虽然以前已写过类似的，但是我感觉他学的比较精简。为了方便以后做项目时直接拷...

系统管理员/ 2021年01月27日 15:32/ 0 赞/ 763 阅读