swiper轮播图多个分页

最新推荐文章于 2023-03-02 14:17:35 发布

Fish北冥

最新推荐文章于 2023-03-02 14:17:35 发布

阅读量1.5k

点赞数 1

分类专栏： jQuery CSS HTML 文章标签： css html jquery javascript

本文链接：https://blog.youkuaiyun.com/qq_42400124/article/details/120418740

版权

CSS 同时被 3 个专栏收录

21 篇文章

订阅专栏

jQuery

17 篇文章

订阅专栏

HTML

9 篇文章

订阅专栏

swiper轮播图多个分页

演示效果：

swiper多分页轮播

注意：要引入jQuery和swiper插件，这边用的版本是（Swiper 4.4.2）
效果图：
在这里插入图片描述

HTML代码：

<div class="bannerwrap">	
	<div class="swiper-container bannerswiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide centerBig">
				<div class="box">
					<img src="img/img07.jpg" class="pcimg" />
					<div class="b-trext">
						<p>Spirited Away</p>
						<h3>千与千寻</h3>
						<h4>不管前方的路有多苦，只要走的方向正确，<br>不管多么崎岖不平，都比站在原地更接近幸福。</h4>
						<a href="javascript:;" class="more more01">探索更多</a>
					</div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="box">
					<img src="img/ing0101.jpg" class="pcimg" />
					<div class="b-trext">
						<p>My Neighbour Totoro</p>
						<h3>龙猫</h3>
						<h4>人生的某些障碍，你是逃不掉的。<br>与其费尽周折绕过去，不如勇敢的地攀越，或许这会铸就你人生的高点。</h4>
						<a href="javascript:;" class="more more01">探索更多</a>
					</div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="box">
					<img src="img/ing0102.jpg" class="pcimg" />
					<div class="b-trext">
						<p>Howl's Moving Castle</p>
						<h3>哈尔的移动城堡</h3>
						<h4>在茫茫人海中相遇相知相守无论谁都不会一帆风顺，<br>只有一颗舍得付出懂得感恩的心才能拥有一生的爱和幸福。</h4>
						<a href="javascript:;" class="more more01">探索更多</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="botpage">
		<ul class="text">
			<li>
				<h3>千与千寻</h3>
				<p>Spirited Away</p>
			</li>
			<li>
				<h3>龙猫</h3>
				<p>My Neighbour Totoro</p>
			</li>
			<li>
				<h3>哈尔的移动城堡</h3>
				<p>Howl's Moving Castle</p>
			</li>
		</ul>
		<div class="page">
			<div class="swiper-pagination bannercril"></div>
			<div class="swiper-num">
				<span class="active"></span>
				<strong></strong>
				<span class="total"></span>
			</div>
		</div>
	</div>
	<div class="banner-towrap">
		<a href="javascript:;" class="banner-to"><strong></strong></a>
		<p>SCROLL DOWN</p>
	</div>
	<div class="in-kong"  id="banner-to"></div>
</div>

css样式：

/* bannerwrap */
.bannerwrap{width: 100%;height: 100%;position: relative;box-sizing: border-box;overflow: hidden;z-index: 1;}

.bannerwrap .bannerswiper{width: 100%;height: 100%;}
.bannerwrap .box{position: relative;overflow: hidden;width: 100%;height: 100%;z-index: 0;}
.bannerwrap .box img{display: block;width: 100%;height: 100%;object-fit: cover;}
.centerBig .box img{-webkit-animation-name:centerBig;animation-name:centerBig;}
@-webkit-keyframes centerBig{
100%{transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1);}}
@keyframes centerBig{
100%{transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1);}}
.swiper-slide .box img{animation-duration:5s;animation-timing-function:linear;animation-fill-mode: forwards;-webkit-animation-duration:5s;-webkit-animation-timing-function:linear;-webkit-animation-fill-mode: forwards;
}
/* botpage */
.botpage{width: 70%;box-sizing: border-box;background-color: #FFFFFF;position: absolute;left: 0;bottom: 0;display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;padding: 20px 0;z-index: 1;padding-left: 180px;height: 80px;}
.botpage li{display: none;}
.botpage li:first-child{display: block;}
.botpage .text{margin-right: 140px;}
.botpage .text h3{font-size: 16px;color: #444444;margin-bottom: 10px;}
.botpage .text p{font-size: 12px;color: #aaaaaa;text-transform: uppercase;min-width: 160px;}
.botpage .page{display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;}
.botpage .page .bannercril{position: relative;}
.botpage .page .swiper-pagination-bullet{opacity: 1;margin-right: 16px;background-color: #e4e4e4;}
.botpage .page .swiper-pagination-bullet:last-child{margin-right: 0;}
.botpage .page .bannercril .swiper-pagination-bullet-active{background-color: #2e5c72;}
.botpage .page .swiper-num{display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;margin-left: 60px;}
.botpage .page .swiper-num span{font-size: 14px;color: #333333;}
.botpage .page .swiper-num strong{display: block;width: 10px;height: 1px;background-color: #333333;margin: 0 10px;}



/* i-cont */
.i-cont{width: 86%;}
.b-trext{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);z-index: 2;width: 100%;box-sizing: border-box;padding: 0 180px 80px;;}
.bannerwrap .box:before{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: rgba(78, 50 ,111 ,0.3);z-index: 1;}
.b-trext p{font-size: 16px;text-transform: uppercase;color: #FFFFFF;opacity: 0.66;letter-spacing: 3px;margin-bottom: 30px;}
.b-trext h3{font-size: 58px;color: #FFFFFF;font-weight: bold;letter-spacing: 8px;margin-bottom: 40px;}
.b-trext h4{font-size: 20px;line-height: 30px;color: #FFFFFF;margin-bottom: 50px;}
.b-trext .more{border: none;width: 180px;height: 46px;line-height: 46px;background-color: #2e5c72;border-color: #2e5c72;}
.b-trext .more:hover{color: #2e5c72;}
.bannerwrap .banner-towrap{position: absolute;bottom: 0;left: 75%;z-index: 2;display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;height: 80px;}
.bannerwrap .banner-towrap p{font-size: 13px;color: #FFFFFF;text-align: center;margin-left:10px;}
.bannerwrap .banner-to{transition: all 0.2s linear 0s;-webkit-transition: all 0.2s linear 0s;display: block;font-size: 1em;width: 20px;height: 30px;border: 1px solid #FFFFFF;background-color: transparent;border-radius: 2rem;overflow: hidden;z-index: 9;margin: auto;}
.bannerwrap .banner-to strong{ animation: downico 1.5s ease-out infinite;position: relative;display: block;line-height: 30px;width: 3px;height: 5px;background: #FFFFFF;margin:10px auto;}
.in-kong{ position: absolute;width: 100%;height: 100px;display: block;bottom: 0;    z-index: -1;}
@keyframes downico{
	0%{top: 0;opacity: 1;}
	35%{top: 40%;opacity: 0;}
	65%{top: -40%;opacity: 0;}
	100%{top: 0;opacity: 1;}
}
@-webkit-keyframes downico{
	0%{top: 0;opacity: 1;}
	35%{top: 40%;opacity: 0;}
	65%{top: -40%;opacity: 0;}
	100%{top: 0;opacity: 1;}
}

#banner-to{position: absolute;left: 0;height: 80px;z-index: -2;}

JavaScript：

// banner
var bannerswiper = new Swiper('.bannerswiper', {
	speed: 1000,
	effect: 'fade',
	// loop:true,
	pagination: {
		el: '.bannercril',
		clickable: true,
	},
	// navigation: {
	// 	nextEl: '.swiper-button-next01',
	// 	prevEl: '.swiper-button-prev01',
	// },
	autoplay: {
		delay: 4000,
		disableOnInteraction: false,
	},
	on: {
		slideChangeTransitionStart: function() {
			nextSlide = bannerswiper.slides.eq(bannerswiper.activeIndex);
			nextSlide.addClass("centerBig");
			$(".botpage .text li").eq(bannerswiper.activeIndex).fadeIn().siblings().hide();
		},
		slideChangeTransitionEnd: function() {
			prevSlide = bannerswiper.slides[bannerswiper.previousIndex];
			prevSlide.className = "swiper-slide";
		},
		
	init:function(){
		console.log(this);
		var total=this.slides.length;
		console.log(total);
		$('.total').text('0'+total);
		this.emit('transitionEnd');
	   },
   transitionEnd:function(){
		console.log(this.realIndex);
		var tindex=this.realIndex;
		var index=this.realIndex+1;
		$(".swiper-num .active").text("0"+index);
		
		}
		
	},
});