自己写的一个轮播demo，还有一些BUG，比如快速点上一张下一张会出现乱滚动
HTML部分
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>苹果风格轮播</title>
<link rel="stylesheet" href="./style.css">
<script src="jquery-1.12.2.js"></script>
</head>
<body>
<h1>苹果风格轮播</h1>
<div class="wrapper">
<div class="images">
<div class="slide">
<img src="01.jpg" alt="">
<img src="02.jpg" alt="">
<img src="03.jpg" alt="">
<img src="04.jpg" alt="">
</div>
</div>
<div class="btn">
<div class="spans">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<div class="left"><</div>
<div class="right">></div>
</div>
</body>
</html>
CSS部分
* {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin-top: 100px;
margin-bottom: 60px;
font-weight: normal;
}
body {
background-color: rgb(242, 242, 242);
text-align: center;
}
.wrapper {
background-color: #fff;
width: 800px;
height: 450px;
display: inline-block;
border-radius: 4px;
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, .2);
padding: 100px 260px 150px 260px;
box-sizing: border-box;
position: relative;
}
.images {
width: 260px;
height: 195px;
text-align: center;
overflow: hidden;
}
.images .slide {
display: flex;
transition: all .3s;
}
.btn {
width: 100%;
background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from(#FFFFFF), to(#ddd));
box-shadow:0px 1px 2px 0px #ccc inset;
position: absolute;
box-sizing: border-box;
border: 1px solid #fff;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
left: 0;
bottom: 0;
}
.btn .spans {
border-left: 1px solid #ccc;
border-right: 1px solid #fff;
display: inline-block;
padding-left: 5px;
}
.btn span {
display: inline-block;
margin-left:-5px;
padding: 12px 20px;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
cursor: pointer;
padding-right: 19px;
}
.left, .right {
padding: 20px 14px;
background-color: #eee;
display: inline-block;
font-family: '宋体';
font-weight: bold;
color: #fff;
position: absolute;
top: 170px;
cursor: pointer;
}
.left {
left: 30px;
}
.right {
right: 30px;
}
JS部分
let $buttons = $('.btn > .spans > span')
let $slide = $('.slide')
let $images = $slide.find('img')
let current = 0
makeFakeSlides()
$slide.css({transform: 'translateX(-260px)'})
bindEvents()
// 拷贝最后一张到前面，拷贝第一张到后面
function makeFakeSlides() {
let $fistCopy = $images.eq(0).clone(true)
let $lastCopy = $images.eq($buttons.length - 1).clone(true)
$slide.append($fistCopy)
$slide.prepend($lastCopy)
}
function bindEvents() {
$buttons.eq(0).on('click', function () {
if (current === 3) { // 最后一张到第一张
$slide.css({transform: 'translateX(-1300px)'})
.one('transitionend', function () {
$slide.hide().offset()
$slide.css({transform: 'translateX(-260px)'})
.show()
})
} else {
$slide.css({transform: 'translateX(-260px)'})
}
current = 0
})
$buttons.eq(1).on('click', function () {
$slide.css({transform: 'translateX(-520px)'})
current = 1
})
$buttons.eq(2).on('click', function () {
$slide.css({transform: 'translateX(-780px)'})
current = 2
})
$buttons.eq(3).on('click', function () {
if (current === 0) { // 第一张到最后一张
$slide.css({transform: 'translateX(0px)'})
.one('transitionend', function () {
$slide.hide().offset()
$slide.css({transform: 'translateX(-1040px)'})
.show()
})
} else {
$slide.css({transform: 'translateX(-1040px)'})
}
current = 3
})
}
优化
let $buttons = $('.btn > .spans > span')
let $slide = $('.slide')
let $images = $slide.find('img')
let current = 0
makeFakeSlides()
$slide.css({transform: 'translateX(-260px)'})
bindEvents()
// 上一张
$('.left').on('click', function () {
goToSlide(current + 1)
})
// 下一张
$('.right').on('click', function () {
goToSlide(current - 1)
})
// 自动轮播
let timer = setInterval(function () {
goToSlide(current + 1)
}, 1000)
// 鼠标滑入停止
$('.wrapper').on('mouseenter', function () {
clearInterval(timer)
})
// 鼠标滑出继续
$('.wrapper').on('mouseleave', function () {
timer = setInterval(function () {
goToSlide(current + 1)
}, 1000)
})
// 拷贝最后一张到前面，拷贝第一张到后面
function makeFakeSlides() {
let $fistCopy = $images.eq(0).clone(true)
let $lastCopy = $images.eq($buttons.length - 1).clone(true)
$slide.append($fistCopy)
$slide.prepend($lastCopy)
}
function bindEvents() {
$('.btn > .spans').on('click', 'span', function (e) {
let $button = $(e.currentTarget)
let index = $button.index()
goToSlide(index)
})
}
function goToSlide(index) { // 点击按钮到达相应位置
if (index > $buttons.length - 1) {
index = 0
} else if (index < 0) {
index = $buttons.length - 1
}
if (current === $buttons.length - 1 && index === 0) { // 最后一张到第一张
$slide.css({transform: 'translateX(' + -($buttons.length + 1 ) * 260 + 'px)'})
.one('transitionend', function () {
$slide.hide().offset()
$slide.css({transform: 'translateX(' + -(index + 1 ) * 260 + 'px)'})
.show()
})
} else if (current === 0 && index === $buttons.length - 1) { // 第一张到最后一张
$slide.css({transform: 'translateX(0px)'})
.one('transitionend', function () {
$slide.hide().offset()
$slide.css({transform: 'translateX(' + -(index + 1 ) * 260 + 'px)'})
.show()
})
} else { // 其他按钮
$slide.css({transform: 'translateX(' + -(index + 1 ) * 260 + 'px)'})
}
current = index
}
网友评论