建设银行网站登录不了,在线图片编辑像素,盘锦网站建设公司,人工智能培训师JSCSS实现滑动轮播图
使用JS加CSS来实现的幻灯片#xff0c;主要使用的是CSS的transform属性中的translate来实现#xff0c;适合与用户交互的轮播图#xff0c;展现轮播图的数量#xff0c;用户可自由进行选择。 !DOCTYPE html
html langenCSS实现滑动轮播图
使用JS加CSS来实现的幻灯片主要使用的是CSS的transform属性中的translate来实现适合与用户交互的轮播图展现轮播图的数量用户可自由进行选择。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;list-style: none;}.cardBox {width: 600px;height: 300px;box-shadow: 0 0 10px gray;border-radius: 5px;margin: 100px auto;position: relative;overflow: hidden;}.imgBox {width: 3600px;height: 300px;transition: all 1s;transform: translateX(0px);}.item {width: 600px;height: 300px;float: left;}.item img {width: 100%;}.btn {width: 20px;height: 20px;top: calc(50% - 20px);border-right: solid white;border-top: solid white;position: absolute;z-index: 99;opacity: .6;cursor: pointer;}.btn:hover {opacity: 1;}.left {left: 15px;transform: rotate(-135deg);}.right {right: 15px;transform: rotate(45deg);}.pointBox {display: flex;width: 50%;position: absolute;bottom: 15px;left: 50%;transform: translateX(-50%);justify-content: center;}.pointBox li {width: 8px;height: 8px;border-radius: 50%;background: gray;margin: 0 10px;opacity: .7;cursor: pointer;}.pointBox li:hover {opacity: 1;background-color: white;}/style
/headbodydiv classcardBoxdiv classbtn left/divdiv classbtn right/divul classimgBoxli classitemimg srchttps://img2.baidu.com/it/u2988589017,2923917558fm253fmtautoapp120fJPEG?w1280h800 alt/lili classitemimg srchttps://img2.baidu.com/it/u3867960631,2923014190fm253fmtautoapp138fJPEG?w889h500 altsrcset/lili classitemimg srchttps://img0.baidu.com/it/u891036130,2043934807fm253fmtautoapp138fJPEG?w889h500 altsrcset/lili classitemimg srchttps://img1.baidu.com/it/u1304255642,2961408783fm253fmtautoapp138fJPEG?w889h500 altsrcset/lili classitemimg srchttps://img0.baidu.com/it/u3822016102,3026244821fm253fmtautoapp138fJPEG?w500h281 altsrcset/lili classitemimg srchttps://img1.baidu.com/it/u847956157,2750448390fm253fmtautoapp138fJPEG?w800h500 altsrcset/li/ulul classpointBoxli/lili/lili/lili/lili/lili/li/ul/divscriptlet card document.querySelector(.cardBox ul)let cardBox document.querySelector(.cardBox)let items document.querySelectorAll(.item)let leftBtn document.querySelector(.left)let rightBtn document.querySelector(.right)let points document.querySelectorAll(.pointBox li)let index 0items.forEach((item, index) {let translateX index * 600item.style.left ${translateX}px})let timer nullpoints[index].style.background whitepoints[index].style.width 16pxpoints[index].style.borderRadius 5pxconst initInterval () {timer setInterval(() {indexlet pointIndex index;points[pointIndex].style.background whitepoints[pointIndex].style.width 16pxpoints[pointIndex].style.borderRadius 5pxif (pointIndex 0) {points[5].style.background graypoints[5].style.width 8px} else {points[pointIndex - 1].style.background graypoints[pointIndex - 1].style.width 8px}let translateX -index * 600card.style.transform translateX(${translateX}px)if (index 5) {index -1}}, 3000);}initInterval()cardBox.addEventListener(mouseover, () {clearInterval(timer)})cardBox.addEventListener(mouseout, () {initInterval()})// btn.addEventListener(mouseout, () {// initInterval()// })leftBtn.onclick function () {if (timer) {clearInterval(timer)}if (index 0) {index 6}index--let translateX -index * 600card.style.transform translateX(${translateX}px)}rightBtn.onclick function () {if (timer) {clearInterval(timer)}indexlet translateX -index * 600card.style.transform translateX(${translateX}px)if (index 5) {index -1}}points.forEach((item, i) {item.onclick () {points.forEach(element {element.style.background grayelement.style.width 8pxelement.style.borderRadius 50%});item.style.background whiteitem.style.width 16pxitem.style.borderRadius 5pxindex i;let translateX -index * 600card.style.transform translateX(${translateX}px)}})/script
/body/htmlJSCSS实现浅入浅出轮播图
使用CSS的动画属性以及透明度属性来进行设置显示轮播图数量通过点击轮播图中的索引点来切换轮播图。适合需要和用户交互的简单轮播图
