<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3d轮播图</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
width: 100%;
height: 100vh;
background: #9a9a9a;
display: flex;
justify-content: center;
align-items: center;
}
img {
display: block;
width: 100%;
height: 100%;
border-radius: 20px;
}
.slider {
width: 970px;
height: 344px;
position: relative;
}
.prev,
.next {
--width: 50px;
width: var(--width);
height: var(--width);
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 -60px;
line-height: var(--width);
text-align: center;
background: #ff9b34;
border-radius: 50%;
font-size: 32px;
cursor: pointer;
z-index: 999;
color: white;
}
.prev {
left: 0;
}
.next {
right: 0;
}
.list {
width: 100%;
height: 100%;
}
.list li {
position: absolute;
top: 47px;
width: 485px;
height: 250px;
}
.pos_1 {
opacity: 0;
}
.pos_2 {
opacity: 0;
}
.list li.pos_3 {
left: 0;
z-index: 9;
opacity: 1;
}
.list li.pos_4 {
width: 680px;
height: 344px;
top: 0;
left: 135px;
z-index: 10;
opacity: 1;
}
.pos_5 {
top: 47px;
right: 0;
z-index: 9;
opacity: 1;
}
.pos_6 {
opacity: 0;
}
.pos_7 {
opacity: 0;
}
.bullet {
position: absolute;
bottom: -40px;
left: 0;
width: 100%;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.bullet li {
width: 30px;
height: 10px;
background: #ececec;
margin-left: 10px;
opacity: 0.6;
}
.bullet li.on {
animation: opacity 0.6s ease-in-out;
opacity: 1;
background: #ff9b34;
border-radius:10px;
}
@keyframes opacity {
0%{
opacity: 0.6;
transform:scale(1);
border-radius:0px;
}
50%{
transform:scale(1.2);
background:rgb(112, 1, 1);
}
100%{
opacity: 1;
transform:scale(1);
border-radius:10px;
}
}
</style>
</head>
<body>
<div class="slider">
<ul class="list">
<li class="pos_1"><img
src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg"
alt=""></li>
<li class="pos_2"><img
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3892521478,1695688217&fm=26&gp=0.jpg"
alt=""></li>
<li class="pos_3"><img
src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg"
alt=""></li>
<li class="pos_4"><img
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg"
alt=""></li>
<li class="pos_5"><img
src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984473917,238095211&fm=26&gp=0.jpg"
alt=""></li>
<li class="pos_6"><img
src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1999921673,816131569&fm=26&gp=0.jpg"
alt=""></li>
<li class="pos_7"><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596604172691&di=f40289dce042b24da468556eb5d36df4&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F0e2442a7d933c895f8d06cefd11373f0830200f3.jpg"
alt=""></li>
</ul>
<ol class="bullet">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<span class="prev"><</span>
<span class="next">></span>
</div>
</body>
<script>
{
let posArr = [];
let i = 0;
let flag = true;
$('.list li').each((index, item) => {
posArr.push({
top: $(item).position().top,
left: $(item).position().left,
width: $(item).width(),
height: $(item).height(),
opacity: $(item).css('opacity'),
zIndex: $(item).css('z-index')
})
})
$('.next').click(function () {
if (flag) {
flag = false;
i++
i = i % 7;
move(posArr,i,i+1)
$('.bullet li').eq(i).addClass('on').siblings().removeClass()
}
})
$('.prev').click(function () {
if (flag) {
flag = false;
i--
i = i < 0 ? i = 6 : i;
move(posArr,i,i-1)
$('.bullet li').eq(i).addClass('on').siblings().removeClass()
}
})
$('.bullet li').click(function(){
let s = parseInt($(this).index());
move(posArr,i,s)
$('.bullet li').eq(s).addClass('on').siblings().removeClass()
i=s
})
function move(posArr,i,s){
let zhi = Math.abs(s-i);
if(s>i){
posArr.splice(0,0,...posArr.slice(posArr.length-zhi))
posArr.splice(posArr.length-zhi,zhi)
}else{
posArr.splice(posArr.length,0,...posArr.slice(0,zhi))
posArr.splice(0,zhi)
}
$('.list li').each((index, item) => {
$(item).css({
'z-index': posArr[index].zIndex
}).animate({
'width': posArr[index].width,
'height': posArr[index].height,
'opacity': posArr[index].opacity,
'left': posArr[index].left,
'top': posArr[index].top
}, function () {
flag = true;
})
})
}
let timer = setInterval(()=>{
$('.next').click()
},3000)
$('.slider').mouseover(()=>{
clearInterval(timer)
})
$('.slider').mouseout(()=>{
timer = setInterval(()=>{
$('.next').click()
},3000)
})
}
</script>
</html>
浙公网安备 33010602011771号