JS和CSS实现的原生轮播图
文章目录
- 前言
- JS+CSS实现滑动轮播图
- 纯CSS实现滑动轮播图
- JS+CSS实现浅入浅出轮播图
- JS+CSS实现滑动带遮罩轮播图
- JS+CSS实现卡片式轮播图
前言
图片来自百度图片，可以更换成你自己喜欢的图片，宽高目前按照自己的像素比来进行设置的，可以根据自己需要在CSS和JS中进行修改。有好的想法后再继续更新。欢迎大家评论收藏，多提宝贵意见。
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>Documenttitle>
<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 = 0
items.forEach((item, index) => {
let translateX = index * 600
item.style.left = `${translateX}px`
})
let timer = null
points[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 * 600
card.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 * 600
card.style.transform = `translateX(${translateX}px)`
}
rightBtn.onclick = function () {
if (timer) {
clearInterval(timer)
}
index++
let translateX = -index * 600
card.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 * 600
card.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>Documenttitle>
<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 = i
initBanber();
}
});
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>Documenttitle>
<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 = 1
let timer = null
const initInterval = () => {
timer = setInterval(() => {
items.forEach((item, index) => {
let translateX = index * 600
item.style.zIndex = `-1`
item.classList.remove('ani')
})
items[index].classList.add('ani')
let pre = index - 1
items[pre].style.zIndex = '2'
index++
if (index >= 7) {
index = 1
}
}, 4000);
}
initInterval()
imgBox.addEventListener("mouseover", () => {
clearInterval(timer)
})
imgBox.addEventListener("mouseout", () => {
initInterval()
})
script>
body>
html>
JS+CSS实现卡片式轮播图
先将主要的元素进行相对定位，而后通过z-index改变层级让其显示在主要位置，通过transform的scale属性改变主要位置图片的大小来形成卡片堆叠式效果。鼠标靠上去后停止轮播图播放，离开后自动播放，通过左右两个箭头改变轮播图显示位置。
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>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.bannerBox {
position: relative;
width: 900px;
height: 300px;
box-shadow: 0 0 10px gray;
margin: 10% auto 0 auto;
border-radius: 5px;
overflow: hidden;
background-color: rgb(0, 0, 0, .8);
}
#banner {
list-style: none;
position: absolute;
padding: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 800px;
height: 200px;
}
#banner:hover {
cursor: pointer;
}
#banner li {
float: left;
position: absolute;
left: 0px;
transition-duration: 1s;
}
#btn {
opacity: 0;
transition: all .5s;
}
#btn li {
position: absolute;
top: 50%;
width: 18px;
height: 18px;
border-top: 3px solid rgba(255, 255, 255, .6);
border-right: 3px solid rgba(255, 255, 255, .6);
z-index: 100;
cursor: pointer;
}
.bannerBox:hover #btn {
opacity: 1;
}
#btn li:Hover {
border-color: white;
}
.prev {
left: 15px;
transform: rotate(-135deg);
}
.next {
right: 15px;
transform: rotate(45deg);
}
style>
head>
<body>
<div class="bannerBox">
<ul id="banner">ul>
<ul id="btn">
<li class="prev">li>
<li class="next">li>
ul>
div>
<script>
let timer = setInterval(get_next, 3000)
let liArr = new Array();
var cur_ul = document.querySelector("#banner");
let bannerBox = document.querySelector('.bannerBox')
let imgArr = [
"https://img2.baidu.com/it/u=2988589017,2923917558&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
"https://img2.baidu.com/it/u=3867960631,2923014190&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"https://img0.baidu.com/it/u=891036130,2043934807&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"https://img1.baidu.com/it/u=1304255642,2961408783&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"https://img0.baidu.com/it/u=3822016102,3026244821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
"https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
]
let imgLen = imgArr.length - 1;
for (let i = 1; i <= imgLen; i++) {
var cur_li = document.createElement("li");
var cur_img = document.createElement("img");
cur_img.src = imgArr[i];
cur_img.style.width = "400px";
cur_img.style.height = "200px";
cur_li.appendChild(cur_img);
if (i != imgLen) {
cur_li.id = imgLen - i;
} else {
cur_li.id = imgLen;
}
cur_ul.appendChild(cur_li)
liArr.push(cur_li);
liArr[liArr.length - 1].style.left = "0px";
}
let len = liArr.length - 1;
liArr[len - 2].style.left = "0px";
liArr[len - 1].style.zIndex = 50;
liArr[len - 1].style.left = "200px";
liArr[len - 1].style.transform = "scale(1.3)";
liArr[len].style.left = "400px";
function get_pre() {
let give_up = liArr[0];
liArr.shift()
liArr.push(give_up)
for (let i = 0; i <= len; i++) {
liArr[i].style.zIndex = i;
liArr[i].style.transform = "scale(1)"
}
liArr[len - 2].style.left = "0px";
liArr[len - 1].style.zIndex = 50
liArr[len - 1].style.left = "200px";
liArr[len - 1].style.transform = "scale(1.3)"
liArr[len].style.left = "400px";
}
function get_next() {
let give_up = liArr[len];
liArr.pop()
liArr.unshift(give_up)
for (let i = 0; i <= len; i++) {
liArr[i].style.zIndex = i;
liArr[i].style.transform = "scale(1)"
}
liArr[len - 2].style.left = "0px";
liArr[len - 1].style.zIndex = 50
liArr[len - 1].style.left = "200px";
liArr[len - 1].style.transform = "scale(1.3)"
liArr[len].style.left = "400px";
}
let prev = document.querySelector(".prev")
prev.onclick = function () {
get_pre();
}
let next = document.querySelector(".next")
next.onclick = function () {
get_next();
}
bannerBox.addEventListener("mouseover", () => {
clearInterval(timer);
})
bannerBox.addEventListener("mouseout", () => {
timer = setInterval(get_next, 3000)
})
script>
body>
html>