轮播图自动滚动无缝连接 js

轮播图自动滚动无缝连接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.f-box {height: 300px;width: 600px;position: relative;overflow: hidden;}.inner {position: absolute;left: 0px;top: 0;height: 100%;width: 100%;white-space: nowrap;}.c-box {width: 100%;height: 100%;display: inline-block;box-sizing: border-box;text-align: center;font-size: 800%;}.c-box-1 {background-color: aqua;}.c-box-2 {background-color: rgb(0, 255, 42);}.c-box-3 {background-color: rgb(0, 38, 255);}.c-box-4 {background-color: rgb(255, 0, 179);}</style>
</head>
<body><div class="f-box"><div class="inner"></div></div><script>// 根据数组生成轮播图的元素var fatherDom = document.querySelector('.inner');var arr = [1,2,3,4];arr.forEach(it => {var cBox = document.createElement('div');cBox.classList.add('c-box');cBox.classList.add('c-box-' + it)cBox.innerHTML = itfatherDom.appendChild(cBox)})// 1、实现轮播图无缝连接滚动，在首添加“c-box-4”，在尾添加“c-box-1”var boxOne = document.querySelector('.c-box-1');var boxFour = document.querySelector('.c-box-4');fatherDom.insertBefore(boxFour.cloneNode(true), boxOne); // 首 添加 'c-box-4'fatherDom.appendChild(boxOne.cloneNode(true)) // 尾 添加 'c-box-1'fatherDom.style.left = -fatherDom.clientWidth + 'px'; // 父级元素显示“1”// 2、通过改变父级元素“left”属性值实现轮播效果var index = 1function loop() {var timer = setInterval(() => {if(index === arr.length) {// 轮播图的最后一张，也就是第6张图，和轮播图的第二张图一致，重置索引值，清空动画效果，这样就实现了轮播图无缝连接clearInterval(timer)index++;fatherDom.style.transition = 'left 1s'fatherDom.style.left = -index * fatherDom.clientWidth + 'px'// setTimeout的延迟时间要大于等于transition的动画时间setTimeout(() => {index = 1fatherDom.style.left = -index * fatherDom.clientWidth + 'px'fatherDom.style.transition = 'left 0s'}, 1000)loop()} else {index++;fatherDom.style.transition = 'left 1s'fatherDom.style.left = -index * fatherDom.clientWidth + 'px'}    }, 2000)}loop() </script>
</body>
</html>

轮播图自动滚动无缝连接 js相关推荐

html 图片轮播渐变,js轮播图自动切换和css做页面自动渐变
js轮播图自动切换和css页面自动渐变效果如下: 可以去jq官网学习:http://www.jq22.com/ 部分代码如下: *{margin: 0; padding: 0;} p{text-al ...
html轮播图原理,30_用js实现一个轮播图效果，简单说下原理
一.原理将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: 轮播图 1 2 3 4 5 < > 只有五张图片,却使用7张来轮播,这 ...
使用ViewPager实现轮播图自动播放
使用ViewPager实现轮播图自动播放通过使用ViewPager实现图片的自动轮播,也可以通过将自动滑动关闭通过手动滑动进行图片的滑动,现在简单分析一下实现的步骤: 1.让图片滑动起来. 2.让图 ...
JS实现轮播图(自动+手动)
网页轮播图效果: 核心原理: tips:代码在文章末尾这个ul就是我们这四张图片的父盒子,我们通过对这个父盒子添加动画函数来实现移动,然后给父盒子来一个溢出隐藏就达到了轮播的效果动画函数如下: f ...
dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
1.swiper插件: 需要下载该插件到本地,并用link标签引用其swiper-bundle.min.css文件,用script引用其swiper-bundle.min.js文件,下载地址及官方文档 ...
js轮播图自动播放和手动控制
html文件 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
php 轮播图插件下载,jquery全屏响应式轮播图插件jquery.flexslider.js
在zblogPHP主题 yunduan 上使用这个轮播幻灯片插件jquery.flexslider.js,分享下使用方法: 这是一款jquery全屏响应式淡入淡出效果轮播图插件.该轮播图插件简单实用, ...
【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...
JS-内置对象内置构造函数事件-拖拽轮播图无缝滚动
内置对象&内置构造函数日期时间格式 // 创建一个当前时刻的日期时间对象 var date = new Date(); // 获取date对象中的年月日时分秒 var y = date.ge ...

轮播图自动滚动无缝连接 js

轮播图自动滚动无缝连接

轮播图自动滚动无缝连接 js相关推荐

最新文章

热门文章

轮播图自动滚动 无缝连接 js

轮播图自动滚动 无缝连接

轮播图自动滚动 无缝连接 js相关推荐

最新文章

热门文章

轮播图自动滚动无缝连接 js

轮播图自动滚动无缝连接

轮播图自动滚动无缝连接 js相关推荐