原生 js 实现无缝滚动轮播

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

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

相关阅读

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

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

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

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

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

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

相关 js实现无缝轮播图

需要引用上文封装的动画库代码如下： CSS样式 { margin: 0; padding: 0;

一时失言乱红尘/ 2023年06月25日 10:08/ 0 赞/ 27 阅读

相关原生JS实现无缝轮播

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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