JS和CSS实现的原生轮播图
文章目录
- 🍗 前言
- 🍖 JS+CSS实现滑动轮播图
- 🍔 纯CSS实现滑动轮播图
- 🍿 JS+CSS实现浅入浅出轮播图
- 🥪 JS+CSS实现滑动带遮罩轮播图
🍗 前言
图片来自百度图片，可以更换成你自己喜欢的图片，宽高目前设置的600像素，300像素，可以根据自己需要进行修改。后期再继续更新，今天就先到这了。
🍖 JS+CSS实现滑动轮播图
使用JS加CSS来实现的幻灯片，主要使用的是CSS的transform属性中的translate来实现，适合与用户交互的轮播图，展现轮播图的数量，用户可自由进行选择。
<!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>* {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>
</head><body><div class="cardBox"><div class="btn left"></div><div class="btn right"></div><ul class="imgBox"><li class="item"><img src="https://img2.baidu.com/it/u=2988589017,2923917558&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt=""></li><li class="item"><img src="https://img2.baidu.com/it/u=3867960631,2923014190&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""srcset=""></li><li class="item"><img src="https://img0.baidu.com/it/u=891036130,2043934807&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""srcset=""></li><li class="item"><img src="https://img1.baidu.com/it/u=1304255642,2961408783&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""srcset=""></li><li class="item"><img src="https://img0.baidu.com/it/u=3822016102,3026244821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt=""srcset=""></li><li class="item"><img src="https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""srcset=""></li></ul><ul class="pointBox"><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><script>let 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 = 'white'points[index].style.width = '16px'points[index].style.borderRadius = '5px'const initInterval = () => {timer = setInterval(() => {index++let pointIndex = index;points[pointIndex].style.background = 'white'points[pointIndex].style.width = '16px'points[pointIndex].style.borderRadius = '5px'if (pointIndex == 0) {points[5].style.background = 'gray'points[5].style.width = '8px'} else {points[pointIndex - 1].style.background = 'gray'points[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)}index++let 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 = 'gray'element.style.width = '8px'element.style.borderRadius = '50%'});item.style.background = 'white'item.style.width = '16px'item.style.borderRadius = '5px'index = i;let translateX = -index * 600card.style.transform = `translateX(${translateX}px)`}})</script>
</body></html>
🍔 纯CSS实现滑动轮播图
主要使用css3的动画属性以及translate来实现，适合不需要和用户交互的广告图轮播图片
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>css3 实现幻灯片效果</title><style type="text/css">* {margin: 0;padding: 0;list-style: none;}.banner {width: 600px;height: 400px;margin: 100px auto;overflow: hidden;box-shadow: 0 0 5px rgba(0, 0, 0, 1);border-radius: 5px;}.banner ul {width: 2000px;height: 100%;animation: loops 10s infinite ease;}.item {width: 600px;height: 100%;float: left;}.item img {width: 600px;height: 100%;}@keyframes loops {0% {transform: translateX(0);}50% {transform: translateX(-600px);}100% {transform: translateX(-1200px);}}</style>
</head><body><div class="banner"><ul><li class="item"><img src="https://img1.baidu.com/it/u=1304255642,2961408783&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""srcset=""></li><li class="item"><img src="https://img0.baidu.com/it/u=3822016102,3026244821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt=""srcset=""></li><li class="item"><img src="https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""srcset=""></li></ul></div>
</body></html>
🍿 JS+CSS实现浅入浅出轮播图
使用CSS的动画属性以及透明度属性来进行设置，显示轮播图数量，通过点击轮播图中的索引点来切换轮播图。适合需要和用户交互的简单轮播图
<!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>* {padding: 0;margin: 0;}.banner {display: none;}.bannerBox {width: 600px;margin: 100px auto;position: relative;height: 300px;overflow: hidden;border-radius: 5px;box-shadow: 0 0 5px gray;}.item {width: 600px;height: 300px;animation-name: fade;animation-duration: 1.5s;}.item img {width: 100%;}@keyframes fade {from {opacity: .4}to {opacity: 1}}.points {display: flex;position: absolute;bottom: 10px;left: 50%;width: 50%;transform: translateX(-50%);justify-content: center;}.points p {border-radius: 5px;margin: 0 10px;cursor: pointer;}</style>
</head><body><div class="bannerBox"><ul><li class="item banner"><img src="https://img2.baidu.com/it/u=2988589017,2923917558&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt=""></li><li class="item banner"><img src="https://img2.baidu.com/it/u=3867960631,2923014190&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""srcset=""></li><li class="item banner"><img src="https://img0.baidu.com/it/u=891036130,2043934807&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""srcset=""></li><li class="item banner"><img src="https://img1.baidu.com/it/u=1304255642,2961408783&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""srcset=""></li><li class="item banner"><img src="https://img0.baidu.com/it/u=3822016102,3026244821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt=""srcset=""></li><li class="item banner"><img src="https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""srcset=""></li></ul><div class="points"></div></div><script>let index = 0;let pointsBox = document.querySelector(".points")let banners = document.querySelectorAll(".banner");for (let i = 0; i < banners.length; i++) {let p = document.createElement('p')pointsBox.appendChild(p)p.style.background = 'gray';p.style.width = '10px'p.style.height = '10px'}let points = document.querySelectorAll('.points p')const initBanber = () => {for (let i = 0; i < banners.length; i++) {banners[i].style.display = "none";points[i].style.background = 'gray';points[i].style.width = '10px'points[i].style.height = '10px'}index++;if (index > banners.length) {index = 1}points[index - 1].style.background = 'white';points[index - 1].style.width = '20px'banners[index - 1].style.display = "block";}let timer = null;points.forEach((item, i) => {item.onclick = function () {index = iinitBanber();}});const initInterval = () => {timer = setInterval(() => {initBanber()}, 3000);}pointsBox.addEventListener('mouseover', function () {clearInterval(timer)})pointsBox.addEventListener('mouseout', function () {initInterval()})initBanber();initInterval();</script>
</body></html>
🥪 JS+CSS实现滑动带遮罩轮播图
主要对CSS中的index属性进行更改，搭配CSS动画属性对轮播图进行设置。支持鼠标悬停，鼠标离开自动播放。
<!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>* {margin: 0;padding: 0;list-style: none;}.cardBox {width: 600px;height: 300px;margin: 100px auto;position: relative;overflow: hidden;box-shadow: 0 0 5px black;border-radius: 10px;}.item {width: 600px;height: 300px;cursor: pointer;position: absolute;right: 0;top: 0;}.ani {animation: cover 2s linear;z-index: 3 !important;}.ani::before {content: "";display: none;}.item::before {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 600px;background-color: rgba(0, 0, 0, .8);}@keyframes cover {from {right: 600px;}to {right: 0px;}}.item img {width: 100%;}</style>
</head><body><div class="cardBox"><ul class="imgBox"><li class="item"></li><li class="item ani"><img src="https://img2.baidu.com/it/u=2988589017,2923917558&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt=""></li><li class="item"><img src="https://img2.baidu.com/it/u=3867960631,2923014190&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""srcset=""></li><li class="item"><img src="https://img0.baidu.com/it/u=891036130,2043934807&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""srcset=""></li><li class="item"><img src="https://img1.baidu.com/it/u=1304255642,2961408783&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""srcset=""></li><li class="item"><img src="https://img0.baidu.com/it/u=3822016102,3026244821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt=""srcset=""></li><li class="item"><img src="https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""srcset=""></li></ul></div><script>let items = document.querySelectorAll(".item")let imgBox = document.querySelector(".imgBox")let index = 1let timer = nullconst initInterval = () => {timer = setInterval(() => {items.forEach((item, index) => {let translateX = index * 600item.style.zIndex = `-1`item.classList.remove('ani')})items[index].classList.add('ani')let pre = index - 1items[pre].style.zIndex = '2'index++if (index >= 7) {index = 1}}, 4000);}initInterval()imgBox.addEventListener("mouseover", () => {clearInterval(timer)})imgBox.addEventListener("mouseout", () => {initInterval()})</script>
</body></html>