jQuery之轮播图实现
实现效果
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<script src="./public/js/jquery-3.3.1.min.js"></script>
<style>
ul,
li {
list-style: none;
}
img {
width: 100%;
}
.scene_carousel {
width: 500px;
height: 500px;
margin: auto;
position: relative;
}
.scene_carousel>div {
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
position: absolute;
top: calc((100% - 30px) / 2);
z-index: 10;
cursor: pointer;
}
.scene_img_left {
left: 60px;
}
.scene_img_right {
right: 60px;
}
.scene_img_flex {
width: fit-content;
height: 100%;
display: flex;
position: relative;
}
.scene_img_flex li {
width: 248.83px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
top: 0;
left: 0;
list-style: none;
opacity: 0;
transition: all 0.3s ease-out;
cursor: pointer;
}
.scene_img_flex li img {
height: 380px;
}
.scene_word {
padding: 5px 10px;
}
.scene_word h4 {
text-align: center;
font-size: 18px;
line-height: 30px;
font-weight: 300;
font-weight: 400;
}
.scene_word p {
font-size: 14px;
line-height: 20px;
}
.scene_img6 {
transform: translate3d(-224px, 0, 0) scale(0.81);
}
.scene_img_flex li.scene_img7 {
transform: translate3d(0px, 0, 0) scale(0.81);
transform-origin: 0 50%;
opacity: 0.8;
z-index: 2;
}
.scene_img_flex li.scene_img1 {
transform: translate3d(124px, 0, 0) scale(1);
z-index: 3;
opacity: 1;
background: #ffffff;
box-shadow: 1px 1px 10px #ccc;
}
.scene_img_flex li.scene_img2 {
transform: translate3d(248px, 0, 0) scale(0.81);
transform-origin: 100% 50%;
opacity: 0.8;
z-index: 2;
}
.scene_img3 {
transform: translate3d(474px, 0, 0) scale(0.81);
}
.scene_img4 {
transform: translate3d(675px, 0, 0) scale(0.81);
}
.scene_img5 {
transform: translate3d(876px, 0, 0) scale(0.81);
}
</style>
</head>
<body>
<div class="scene_carousel">
<div class="scene_img_left">
<img src="./public/image/left.png" alt="左">
</div>
<div class="scene_img_right">
<img src="./public/image/right.png" alt="右">
</div>
<ul class="scene_img_flex">
<li class="scene_img1">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1451075827,2436821212&fm=26&gp=0.jpg"
alt="">
<div class="scene_word">
<h4>1</h4>
</div>
</li>
<li class="scene_img2">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2097010937,3587306965&fm=26&gp=0.jpg"
alt="">
<div class="scene_word">
<h4>2</h4>
</div>
</li>
<li class="scene_img3">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3118529426,2885674921&fm=26&gp=0.jpg"
alt="">
<div class="scene_word">
<h4>3</h4>
</div>
</li>
<li class="scene_img4">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3782597585,1782921943&fm=26&gp=0.jpg"
alt="">
<div class="scene_word">
<h4>4</h4>
</div>
</li>
<li class="scene_img5">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3821171310,2828217812&fm=26&gp=0.jpg"
alt="">
<div class="scene_word">
<h4>5</h4>
</div>
</li>
<li class="scene_img6">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa2.att.hudong.com%2F41%2F37%2F01300000169980121904374291568.jpg&refer=http%3A%2F%2Fa2.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613629648&t=00acacfa8cfa90e4c188a6b11800bcb3"
alt="">
<div class="scene_word">
<h4>6</h4>
</div>
</li>
<li class="scene_img7">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1144136955,2127408886&fm=26&gp=0.jpg"
alt="">
<div class="scene_word">
<h4>7</h4>
</div>
</li>
</ul>
</div>
<script>
var cArr = ["scene_img1", "scene_img2", "scene_img3", "scene_img4", "scene_img5", "scene_img6",
"scene_img7"
];
var index = 0;
$(".scene_img_left").on('click', function () {
previmg();
})
$(".scene_img_right").on('click', function () {
nextimg();
})
function previmg() {
cArr.push(cArr[0]);
cArr.shift();
console.log(cArr);
//i是元素的索引,从0开始
//e为当前处理的元素
//each循环,当前处理的元素移除所有的class,然后添加数组索引i的class
$(".scene_img_flex>li").each(function (i, e) {
$(e).removeClass().addClass(cArr[i]);
})
index--;
if (index < 0) {
index = 6;
}
}
//下一张
function nextimg() {
cArr.unshift(cArr[6]);
cArr.pop();
$(".scene_img_flex>li").each(function (i, e) {
$(e).removeClass().addClass(cArr[i]);
})
index++;
if (index > 6) {
index = 0;
}
}
</script>
</body>
</html>