<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="./css/index.css"/>
</head>
<body>
<div class="am-swiper-container swiper-container-hot-events">
<div class="am-swiper-body">
<div class="am-swiper-content">
<div class="am-swiper-slide">
<img src="./img/9.png" alt="">
</div>
<div class="am-swiper-slide">
<img src="./img/9.png" alt="">
</div>
<div class="am-swiper-slide">
<img src="./img/9.png" alt="">
</div>
</div>
</div>
//下标，上面am-swiper-slide有几个就写几个
<div class="am-swiper-item">
<div class="item-button"></div>
<div class="item-button"></div>
<div class="item-button"></div>
</div>
</div>
</body>
<script src="./js/jquery-2.1.4.min.js.js"></script>
<script type="text/javascript">
function Swiper(container,index,showLength = 1){
this.index = index;
this.containerWidth = ($(container).width() + 1) / showLength;
this.startX;
this.moveEndX;
this.init = function(){
var self = this;
$(container).find('.am-swiper-slide').css('width', self.containerWidth + 'px');
$(container).find('.am-swiper-item .item-button').eq(0).addClass('active');
$(container).find('.am-swiper-slide').eq(0).addClass('active');
var itemWidth = $(container).find('.am-swiper-item').width();
$(container).find('.am-swiper-item').css('left','calc(50% - '+itemWidth/2+'px)');
if(showLength > 1){
$(container).find('.am-swiper-content').css('transform', 'translate3d(' + (-(self.index - 1) * self.containerWidth - 30) + 'px, 0px, 0px)');
}
$(container).find('.am-swiper-body').on('touchstart', function(e) {
e.preventDefault();
self.startX = e.originalEvent.changedTouches[0].pageX;
});
$(container).find('.am-swiper-body').on("touchmove", function(e) {
e.preventDefault();
self.moveEndX = e.originalEvent.changedTouches[0].pageX;
});
$(container).find('.am-swiper-body').on("touchend", function(e) {
e.preventDefault();
if (self.moveEndX - self.startX > 50) {
self.index--;
} else if(self.moveEndX - self.startX < -50) {
self.index++;
}
if (self.index >= $(container).find('.am-swiper-slide').length - 1) {
self.index = $(container).find('.am-swiper-slide').length - 1;
}
if (self.index <= 0) {
self.index = 0;
}
$(container).find('.item-button').removeClass('active');
$(container).find('.item-button').eq(self.index).addClass('active');
$(container).find('.am-swiper-slide').removeClass('active');
$(container).find('.am-swiper-slide').eq(self.index).addClass('active');
if(showLength > 1){
$(container).find('.am-swiper-content').css('transform', 'translate3d(' + (-(self.index - 1) * self.containerWidth - 30) + 'px, 0px, 0px)');
} else {
$(container).find('.am-swiper-content').css('transform', 'translate3d(' + (-self.index * self.containerWidth) + 'px, 0px, 0px)');
}
});
}
}
var hotEvent = new Swiper('.swiper-container-hot-events',0); // 返回新对象的实例
hotEvent.init();
var hotEvent = new Swiper('.swiper-container-hot-recommend',0); // 返回新对象的实例
hotEvent.init();
var equity = new Swiper('.swiper-container-equity',0,3); // 返回新对象的实例
equity.init();
</script>
</html>
css:
* {
margin: 0;
padding: 0;
}
.am-swiper-container {
width: 100%;
height: 230px;
position: relative;
}
.am-swiper-body {
width: 100%;
height: calc(100% - 30px);
overflow: hidden;
position: relative;
}
.am-swiper-container .am-swiper-content {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
transition-duration: 300ms;
}
.am-swiper-container .am-swiper-content .am-swiper-slide {
width: 100%;
height: 100%;
transition-property: transform;
float: left;
flex-shrink: 0;
}
.am-swiper-slide>div,
.am-swiper-slide>img {
width: 100%;
height: 100%;
}
.am-swiper-item {
display: flex;
justify-content: center;
z-index: 9999;
position: absolute;
bottom: 10px;
}
.am-swiper-item div {
flex-shrink: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.2);
margin-right: 10px;
}
.am-swiper-item .item-button.active {
background-color: #d20d17;
}
