网站开发服务器知识,在百度上建网站,企业品牌推广公司哪家好,微信公众平台使用方法我这里主要说轮播图和无缝滚动的实现思路#xff0c;就采用最简单的轮播图了#xff0c;当然实现的思路有很多种#xff0c;我这也只是其中一种。 简单轮播图的大概结构是这样的#xff0c;中间是图片#xff0c;二边是箭头可以用来切换图片#xff0c;下面的小圆点也可以… 我这里主要说轮播图和无缝滚动的实现思路就采用最简单的轮播图了当然实现的思路有很多种我这也只是其中一种。 简单轮播图的大概结构是这样的中间是图片二边是箭头可以用来切换图片下面的小圆点也可以用来切换图片。 1.简易的轮播图效果
先搭出html结构 这里的左右箭头我采用的是svg图标 div classcontainerdiv classcarouseldiv classitema hrefimg src./3.jpg alt/a/divdiv classitema hrefimg src./2.jpg alt/a/divdiv classitema hrefimg src./1.jpg alt/a/div/divdiv classleftsvg t1693569521007 classicon viewBox0 0 1024 1024 version1.1 xmlnshttp://www.w3.org/2000/svgp-id4000 width20 height20pathdM729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2zp-id4001/path/svg/divdiv classrightsvg t1693569535119 classicon viewBox0 0 1024 1024 version1.1 xmlnshttp://www.w3.org/2000/svgp-id4245 width16 height16pathdM761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6zp-id4246/path/svg/divdiv classindicatorspan classactive/spanspan/spanspan/span/div/div
然后是css样式 * {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 700px;height: 400px;margin: 10px auto;overflow: hidden;position: relative;}.container .carousel {width: 100%;height: 100%;display: flex;}.container .carousel .item img {width: 700px;height: 400px;}.container .indicator {height: 30px;position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);}.container .indicator span {border: 1px solid #fff;width: 20px;height: 20px;border-radius: 50%;display: inline-block;}.container .indicator span.active {background-color: pink;}.container .left {position: absolute;left: 10px;top: 50%;}.container .right {position: absolute;right: 10px;top: 50%;} css的关键代码是overflow:hidden,我这里开启的flex弹性盒使用它可以将多出来的图片进行隐藏然后其中的一个圆圈元素加上了active 下面是js代码
我们首先要获取到所有的dom元素 var doms {carousel: document.querySelector(.carousel),indicator: document.querySelectorAll(.indicator span),left: document.querySelector(.left),right: document.querySelector(.right)}
最重要的就是轮播的函数
var curIndex 0 //用于记录当前是第几个元素
function moveTo(index) {//加上动画效果doms.carousel.style.transition transform .5sdoms.carousel.style.transform translateX(-${index}00%)//去除效果var active document.querySelector(.indicator span.active)active.classList.remove(active)//选中当前效果doms.indicator[index].classList.add(active)curIndex index}
我这里采用的是transform的translateX(-100%)来实现的轮播切换也可以使用margin-left来控制都可以。
接下来可以给加上一个定时器来控制它进行自动轮播 //添加图片自动轮播let timer setInterval(() {if (curIndex doms.indicator.length - 1) {moveTo(0)} else (moveTo(curIndex 1))}, 2000)
也可以给下面的小圆圈和左右箭头加上对应的点击事件 //添加点击事件doms.indicator.forEach((item, index) {item.addEventListener(click, () {moveTo(index)})})//添加点击事件doms.left.addEventListener(click, () {moveTo(curIndex-1)})doms.right.addEventListener(click, () {moveTo(curIndex1)})
到这里其实已经实现的简易轮播图的基本功能但是还并不完美会存在防抖以及无法无缝滚动的效果
2.无缝滚动及防抖
无缝滚动的实现思路就是采用克隆的功能及改变动画效果来实现的 就像这样将最后一张复制出来放到最前面但是展示的还是1.jpg第一张复制放到最后面 在切换到最后一张或者第一张时首先将过度动画关掉切换然后迅速开启过度动画轮播下一张这样眼睛是无法察觉出来的因为其速度很快。 首先是克隆 //克隆图片实现无缝滚动function clone() {var first doms.carousel.firstElementChild.cloneNode(true);//复制最后一张var last doms.carousel.lastElementChild.cloneNode(true);//插入到最后doms.carousel.appendChild(first);//插入到最前doms.carousel.insertBefore(last, doms.carousel.firstElementChild)//将复制的第一张的位置调整last.style.position absolute;last.style.transform translateX(-100%)}clone()
克隆的关键在于要将克隆的第一张图片改变一下位置
然后实现右边箭头的无缝滚动 //实现右边的无缝滚动var count doms.indicator.lengthfunction rightMove() {//首先去除动画效果if (curIndex count - 1) {doms.carousel.style.transform translateX(100%);doms.carousel.style.transition none;//强制渲染否则可能不会执行doms.carousel.clientHeight;moveTo(0)} else {moveTo(curIndex 1)}}
右边实现后左边就很简单了 //实现左边的无缝滚动function leftMove() {if (curIndex 0) {doms.carousel.style.transform translateX(-${count}00%);doms.carousel.style.transition none;//强制渲染doms.carousel.clientHeight;moveTo(count - 1)} else {moveTo(curIndex - 1)}}
然后我们的定时器就需要进行一下改变让他往右边轮播‘ //添加图片自动轮播let timer setInterval(() {rightMove()}, 2000)然后在需要防抖的地方进行一下防抖其实我这种很简单的防抖就是将定时器关闭掉在点击任务完成后再开启定时器。 //添加点击事件doms.indicator.forEach((item, index) {item.addEventListener(click, () {//关闭定时器clearInterval(timer)moveTo(index)//执行完后开启定时器timer setInterval(() {rightMove()}, 2000)})})
左右箭头的点击事件
//添加点击事件doms.left.addEventListener(click, () {//关闭定时器clearInterval(timer)leftMove()//开启定时器timer setInterval(() {rightMove()}, 2000)})doms.right.addEventListener(click, () {//关闭定时器clearInterval(timer)rightMove()//开启定时器timer setInterval(() {rightMove()}, 2000)})
到这里就实现了简单的轮播图效果 整体代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 700px;height: 400px;margin: 10px auto;overflow: hidden;position: relative;}.container .carousel {width: 100%;height: 100%;display: flex;/* transition: .5s; */}.container .carousel .item img {width: 700px;height: 400px;}.container .indicator {height: 30px;position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);}.container .indicator span {/* background-color: #fff; */border: 1px solid #fff;width: 20px;height: 20px;border-radius: 50%;display: inline-block;}.container .indicator span.active {background-color: pink;}.container .left {position: absolute;left: 10px;top: 50%;}.container .right {position: absolute;right: 10px;top: 50%;}/style
/headbodydiv classcontainerdiv classcarouseldiv classitema hrefimg src./3.jpg alt/a/divdiv classitema hrefimg src./2.jpg alt/a/divdiv classitema hrefimg src./1.jpg alt/a/div/divdiv classleftsvg t1693569521007 classicon viewBox0 0 1024 1024 version1.1 xmlnshttp://www.w3.org/2000/svgp-id4000 width20 height20pathdM729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2zp-id4001/path/svg/divdiv classrightsvg t1693569535119 classicon viewBox0 0 1024 1024 version1.1 xmlnshttp://www.w3.org/2000/svgp-id4245 width16 height16pathdM761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6zp-id4246/path/svg/divdiv classindicatorspan classactive/spanspan/spanspan/span/div/div
/body
scriptvar doms {carousel: document.querySelector(.carousel),indicator: document.querySelectorAll(.indicator span),left: document.querySelector(.left),right: document.querySelector(.right)}var curIndex 0function moveTo(index) {//加上动画效果doms.carousel.style.transition transform .5sdoms.carousel.style.transform translateX(-${index}00%)//去除效果var active document.querySelector(.indicator span.active)active.classList.remove(active)//选中当前效果doms.indicator[index].classList.add(active)curIndex index}//添加点击事件doms.indicator.forEach((item, index) {item.addEventListener(click, () {//关闭定时器clearInterval(timer)moveTo(index)//执行完后开启定时器timer setInterval(() {rightMove()}, 2000)})})//添加图片自动轮播let timer setInterval(() {rightMove()}, 2000)//克隆图片实现无缝滚动function clone() {var first doms.carousel.firstElementChild.cloneNode(true);//复制最后一张var last doms.carousel.lastElementChild.cloneNode(true);//插入到最后doms.carousel.appendChild(first);//插入到最前doms.carousel.insertBefore(last, doms.carousel.firstElementChild)//将复制的第一张的位置调整last.style.position absolute;last.style.transform translateX(-100%)}clone()//实现右边的无缝滚动var count doms.indicator.lengthfunction rightMove() {//首先去除动画效果if (curIndex count - 1) {doms.carousel.style.transform translateX(100%);doms.carousel.style.transition none;//强制渲染doms.carousel.clientHeight;moveTo(0)} else {moveTo(curIndex 1)}}//实现左边的无缝滚动function leftMove() {if (curIndex 0) {doms.carousel.style.transform translateX(-${count}00%);doms.carousel.style.transition none;//强制渲染doms.carousel.clientHeight;moveTo(count - 1)} else {moveTo(curIndex - 1)}}//添加点击事件doms.left.addEventListener(click, () {//关闭定时器clearInterval(timer)leftMove()//开启定时器timer setInterval(() {rightMove()}, 2000)})doms.right.addEventListener(click, () {//关闭定时器clearInterval(timer)rightMove()//开启定时器timer setInterval(() {rightMove()}, 2000)})
/script/html
