1:html的代码
<div id="slideshow">
<div class="swiper" id="swiper">
<div class="swiper-time b"></div>
<div class="swiper-time a"></div>
<div class="swiper-time dd"></div>
<div class="swiper-time dd"></div>
<div class="swiper-time dd"></div>
<div class="swiper-time dd"></div>
<div class="swiper-time dd"></div>
<div class="swiper-time dd"></div>
<div class="swiper-time c"></div>
</div>
</div>
2:然后是css
#slideshow{
width: 620px;
height: 300px;
float: left;
margin-top: 20px;
overflow: hidden;
background-color: rgb(252, 252, 252);
}
.swiper, #swiper {
width: 620px;
height: 300px;
position: relative;
}
.swiper div {
display: block;
position: absolute;
width: 295px;
height: 170px;
overflow: hidden;
left: 164px;
top: 0;
transition: 0.5s;
color: #fff;
font-size: 50px;
text-align: center;
line-height: 200px;
}
.swiper div:nth-child(1) {
background-image: url("../image/w_1.jpeg");
background-size: cover;
}
.swiper div:nth-child(2) {
background-image: url("../image/w_2.jpeg");
background-size: cover;
}
.swiper div:nth-child(3) {
background-image: url("../image/w_3.jpeg");
background-size: cover;
}
.swiper div:nth-child(4) {
background-image: url("../image/w_4.jpeg");
background-size: cover;
}
.swiper div:nth-child(5) {
background-image: url("../image/w_5.jpeg");
background-size: cover;
}
.swiper div:nth-child(6) {
background-image: url("../image/w_6.jpeg");
background-size: cover;
}
.swiper div:nth-child(7) {
background-image: url("../image/w_7.jpeg");
background-size: cover;
}
.swiper div:nth-child(8) {
background-image: url("../image/w_8.jpeg");
background-size: cover;
}
.swiper div:nth-child(9) {
background-image: url("../image/w_9.jpeg");
background-size: cover;
}
.swiper .a {
opacity: 1;
z-index: 23;
-webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
-ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
transform: perspective(500px) translateX(300px) translateZ(-253px) rotateY(-45deg);
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
}
.swiper .b {
opacity: 1;
z-index: 33;
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
transform: translateX(0) translateZ(-100px) rotateY(0deg)
}
.swiper .c {
opacity: 1;
z-index: 23;
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
-webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
-ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
transform: perspective(500px) translateX(-300px) translateZ(-253px) rotateY(45deg);
}
.swiper .dd {
opacity: 0;
z-index: -1;
-webkit-transform: translateX(0) translateZ(-300px) rotateY(0);
-ms-transform: translateX(0) translateZ(-300px) rotateY(0);
transform: perspective(500px) translateX(0) translateZ(-253px) rotateY(0);
}
3:最后就是js的代码了
function slideshow() {
const time = 3000; //自动播放速度
var index = 0 // 索引
const swiperitem = document.getElementById('swiper') //获取父元素
const swiper = swiperitem.getElementsByTagName('div') //获取合集
// 自动轮播
var setTime = setInterval(() => {
if (index < swiper.length - 1) {
index++
} else {
index = 0
}
style()
}, time)
// 点解切换
for (let i = 0; i < swiper.length; i++) {
swiper[i].onclick = function () {
if (i === index) return
index = i
style()
}
}
// 鼠标移入暂停
swiperitem.onmouseover = function () {
clearInterval(setTime)
}
// 鼠标移出继续轮播
swiperitem.onmouseout = function () {
setTime = setInterval(() => {
if (index < swiper.length - 1) {
index++
} else {
index = 0
}
style()
}, time)
}
// 滚动事件
function style() {
for (let i = 0; i < swiper.length; i++) {
swiper[i].className = 'swiper-time dd'
}
if (index === swiper.length - 1) {
swiper[index].className = 'swiper-time b'
swiper[0].className = 'swiper-time a'
swiper[index - 1].className = 'swiper-time c'
} else if (index === 0) {
swiper[index].className = 'swiper-time b'
swiper[index + 1].className = 'swiper-time a'
swiper[swiper.length - 1].className = 'swiper-time c'
} else {
swiper[index].className = 'swiper-time b'
swiper[index + 1].className = 'swiper-time a'
swiper[index - 1].className = 'swiper-time c'
}
}
}