原生 js 实现无缝滚动轮播

Love The Way You Lie 2022-05-28 11:00 462阅读 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 条评论，462人围观）

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

相关阅读

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

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

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

相关 JavaScript—原生轮播和无缝滚动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

淩亂°似流年/ 2023年10月11日 13:15/ 0 赞/ 149 阅读

相关 Js原生实现无缝滑动轮播图(完整功能)

实现轮播图是前端学习的一门必修课，也是用来训练js能力。今天我用原生js写了个轮播图，包含无缝衔接、指示器、左右控制器等功能，跟大家分享。先看看效果图： ![在这里插入图片

淡淡的烟草味﹌/ 2023年07月18日 03:29/ 0 赞/ 31 阅读

相关原生JS实现无缝轮播

今天分享前端开发学习中的一个很经典的案例——原生JS实现无缝轮播图。需求： 1.鼠标移入轮播图时左右两边显示上一页下一页按钮，移出时隐藏 2.鼠标点击箭头，图片发生轮播

客官°小女子只卖身不卖艺/ 2023年06月24日 05:24/ 0 赞/ 150 阅读

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

[ ][Link 1] 版权声明：本文为博主原创文章，遵循[ CC 4.0 BY-SA ][Link 1]版权协议，转载请附上原文出处链接和本声明。本文链接： [http

女爷i/ 2023年06月02日 15:57/ 0 赞/ 27 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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