无缝轮播图无缝轮播图

<!DOCTYPE html>

<html>

<head>

<style>

margin: 0;

padding: 0;

}

body{

/* 100%窗口高度 */

height: 100vh;

/* 弹性布局居中显示 */

display: flex;

justify-content: center;

align-items: center;

background-color: #1b1b1b;

}

.container{

width: 630px;

/* 相对定位 */

position: relative;

/* 溢出隐藏 */

overflow: hidden;

}

ul{

width: 500px;

height: 150px;

overflow: hidden;

display: flex;

position: relative;

}

li{

list-style: none;

height: 100%;

padding-right: 20px;

}

li img{

width: 200px;

height: 150px;

/* 保持原有尺寸比例，裁切长边 */

object-fit: cover;

/* 图片定位正中间 */

object-position: center;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

// 获取ul元素，并为其追加一组相同图片（为了做到无缝衔接）

let ul=document.querySelector('ul');

ul.innerHTML=ul.innerHTML+ul.innerHTML;

// 获取所有的li元素和.btn元素

let lis=document.querySelectorAll('li');

let btns=document.querySelectorAll('.btn');

// 每次滚动的跨度（正数向右，负数向左，默认向左滚动）

let spa=-2;

// 计算并设置ul的总宽度

ul.style.width=lis[0].offsetWidth*lis.length+'px';

// 滚动函数

function move(){

if(ul.offsetLeft < -ul.offsetWidth/2){

// 向左走时，判断图片是否走完（这里本来时4张图片，加上后面追加的4张相同的，共有8张，所以需要用ul的总宽度来除以2进行判断），走完时重新开始

ul.style.left='0';

}

if(ul.offsetLeft > 0){

// 向右走时，判断图片是否走完

ul.style.left=-ul.offsetWidth/2+'px';

}

// 设置偏移位置

ul.style.left=ul.offsetLeft+spa+'px';

}

// 定时器，每30毫秒执行一次move函数

let timer=setInterval(move,600);

// 为ul绑定事件，悬停停止，移开滚动

ul.addEventListener('mousemove',function(){

clearInterval(timer);

})

ul.addEventListener('mouseout',function(){

timer=setInterval(move,30);

})

</script>

</html>

无缝轮播图无缝轮播图相关推荐

用animation实现轮播图无缝衔接
思路使用animation来展示轮播图: 轮播分为两个独立的部分:位移与动效.使二者互不影响动效分为进入动画和退出动画在所有动效结束后位移 html部分 <body><u ...
vue pc端商品轮播图_轮播图高点击商品图
轮播图由背景,商品图,文案三大部分组成,其中商品图是轮播图的主体内容,在轮播主图中,能不能通过一张商品图呈现出商品信息或者卖点,是影响点击率高低的重要因素.本期内容,我们将从商品图出发,为大家讲解的轮 ...
【uniapp】3d轮播图/堆叠轮播图/层叠轮播图
前言 uniapp 3d轮播图 uniapp实现3D轮播图从uniapp插件市场下载插件:https://ext.dcloud.net.cn/plugin?id=243#detail 操作步骤导入 ...
九宫图-图片轮播-兼容IE8和Chrome浏览器
在线测试打包下载九宫图-图片轮播-兼容IE8和Chrome浏览器
js点击轮播或者自动轮播图代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="gbk&q ...
一键生成轮播图，轮播图插件
一键生成轮播图,轮播图插件简介写练习的时候发现每次写轮播图都觉得很麻烦,突发奇想,何不写个轮播图插件,需要轮播图的时候,直接调用插件一键生成就行了!!! 于是乎,便写了以下代码(因为博主还是在校学 ...
uni-app：多功能轮播图，堆叠试轮播，文本轮播，图文轮播
插件地址[前往] mosowe-swiper:适用于uni-app的轮播图插件轮播组件,本插件兼容H5.APP.微信小程序.支付宝小程序组件功能普通轮播(文本.图片,图文轮播,支持上下.左右轮播 ...
英雄联盟轮播图自动轮播
六月过去了,七月还会远吗?不知不觉到了六月底的最后一天.你好,七月! 大家好,我是小陈陈呀,上次写了一篇英雄联盟轮播图手动轮播,当天晚上有很多大朋友小朋友私信小陈陈:可以在上次手动轮播的基础上,实现自 ...
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图)
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图) 每一步都有详细的注释: <!DOCTYPE html> <html lang="en"> &l ...
html怎么做产品轮播图,商品轮播图是什么意思（html轮播图怎么制作）
但轮播图对用户真的有意义吗?或者它只是设计者用来偷懒,将内容一股脑塞进去的工具呢? 不论将这个问题抛向谁,他们都会告诉你,"轮播图就是个反面模式(anti-pattern)."轮播 ...

无缝轮播图无缝轮播图

无缝轮播图无缝轮播图相关推荐

最新文章

热门文章