原生 js 实现无缝滚动轮播

最新推荐文章于 2024-03-28 22:39:07 发布

LTIven

最新推荐文章于 2024-03-28 22:39:07 发布

阅读量150

点赞数

分类专栏： js 前端开发文章标签：原生js实现无缝轮播关于inline-block的间隔去除方法

原文链接：https://blog.csdn.net/cvper/article/details/79811198

版权

前端开发同时被 2 个专栏收录

177 篇文章 3 订阅

订阅专栏

98 篇文章 0 订阅

订阅专栏

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

本文链接： https://blog.csdn.net/cvper/article/details/79811198

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

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

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

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

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

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

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

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

代码实现：

<!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>之间产生间隙，这样做是为了

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

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生 js 实现无缝滚动轮播

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本...
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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