swiper项目常用总结

最新推荐文章于 2024-09-21 20:57:10 发布

sayid760

最新推荐文章于 2024-09-21 20:57:10 发布

阅读量2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_14993375/article/details/80109627

版权

js 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

1、banner

<!--BANNER-->
<section class="swiper-container bannerBox">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="#">
                <img src="images/1.jpg" alt="">
                <p>岳云鹏网店上黑榜</p>
            </a>
        </div>
        <div class="swiper-slide">
            <a href="#">
                <img src="images/2.jpg" alt="">
                <p>港大新药清除艾滋</p>
            </a>
        </div>
        <div class="swiper-slide">
            <a href="#">
                <img src="images/3.jpg" alt="">
                <p>阿里投资人离职</p>
            </a>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</section>

//js部分
 let bannerExample = new Swiper('.bannerBox', {
        autoplay: 3000,
        autoplayDisableOnInteraction: false,
        loop: true,
        pagination: '.swiper-pagination',
        paginationType: 'fraction',

        //=>有关于图片延迟加载的
        lazyLoading: true,
        lazyLoadingInPrevNext: true
 });

2、向上滚动新闻

<!--Live-->	    
<section class="liveBox">
    <span class="tag"></span>
    <div class="swiper-container liveCon">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><a href="#">岳云鹏网店上黑榜</a></div>
            <div class="swiper-slide"><a href="#">港大新药清除艾滋</a></div>
            <div class="swiper-slide"><a href="#">阿里投资人离职</a></div>
            <div class="swiper-slide"><a href="#">央行严批支付乱象</a></div>
        </div>
    </div>
</section>




//js部分
let liveExample = new Swiper('.liveCon', { 
	direction: 'vertical', 
	autoplay: 3000, 
	loop: true, 
	onlyExternal: true //=>不能手动拖拽
});

上面两个demo

3、H5展示页、微官网

<div class="swiper-container">
	<div class="swiper-wrapper" style="opacity: 1;">
		<div class="swiper-slide first">
		    <p class="word">
		    	第一屏
		    </p>
			<div class="next"></div>
		</div>
		<div class="swiper-slide second">
			<p class="word">
		    	第二屏
		    </p>
			<div class="next"></div>
		</div>
		<div class="swiper-slide third ">
			<p class="word">
		    	第三屏
		    </p>
			<div class="next"></div>
		</div>
		<div class="swiper-slide forth">
			<p class="word">
		    	第四屏
		    </p>
			<div class="next"></div>
		</div>
		<div class="swiper-slide fifth">
			<p class="word">
		    	第五屏
		    </p>
		</div>
	</div>
</div>

var mySwiper = new Swiper('.swiper-container', {
	direction : '',
	initialSlide : 0,
	speed:800,
	followFinger : false,
	touchRatio : 0.1,
	resistanceRatio : 0,
	onSlideChangeStart:function(swiper){
		swiperSlide[swiper.previousIndex].style.zIndex = -9999;
		/*
		 //搭配noSwiping : true使用，为true时，可以在slide上（或其他元素）增加类名'swiper-no-swiping'，使slide触摸无效，目标无法拖动，只能点击箭头切换
		 for (var i = 0; i < swiperSlide.length; i++) {
			swiperSlide[i].classList.add("swiper-no-swiping")
		}
		setTimeout(function(){
			for (var i = 0; i < swiperSlide.length; i++) {
				if(i!=1){
					swiperSlide[i].classList.remove("swiper-no-swiping")
				}
			}
		},1000)
		*/
		
		if(swiper.activeIndex>swiper.previousIndex){
			swiperSlide[swiper.previousIndex].style.transform = "translateY("+ mySwiper.height +"px) scale(0.8)";
			swiperSlide[swiper.previousIndex].style.webkitFilter = "brightness(0.5)";
		}else{
			swiperSlide[swiper.previousIndex].style.transform = "translateY("+ -mySwiper.height +"px) scale(0.8)";
			swiperSlide[swiper.previousIndex].style.webkitFilter = "brightness(0.5)"
		}

		/*
		 * //也可以通过函数控制动画
		if(swiper.activeIndex === 0){			
			first();
		}
		if(swiper.activeIndex === 1){
			second();
		}
		if(swiper.activeIndex === 2){
			third();
		}
		if(swiper.activeIndex === 3){
			forth();
		}
		if(swiper.activeIndex === 4){
			fifth();
		}
		*/
	},
	onSlideChangeEnd: function(swiper){
		swiperSlide[swiper.previousIndex].style.transform = "translateY(0px) scale(1)";
		swiperSlide[swiper.previousIndex].style.zIndex = 0;
		swiperSlide[swiper.previousIndex].style.webkitFilter = "brightness(1)"
  },
	nextButton:'.next',
	//noSwiping : true //为ture时，使该slide无法拖动，比如不想让文字被选中时可以考虑使用
})

（一）动画实现方法：

方法一：可以通过css控制，由于 .swiper-slide-active表示当前页，只要在当前页的子元素加上动画样式既可以

.first.swiper-slide-active .word{
	animation: bounceIn 1s ease 1s 1 normal both;
}

方法二：通过js控制，在onSlideChangeStart 函数里加上判断，当页面到那个索引值时，执行某个函数

if(swiper.activeIndex === 0){
	first();
}
if(swiper.activeIndex === 1){
	second();
}
if(swiper.activeIndex === 2){
	third();
}

（二）noSwiping : true 为true时，可以在slide上（或其他元素）增加类名'swiper-no-swiping'，使slide触摸无效，目标无法拖动，只能点击箭头切换比如不让它拖动某些文字或者input框里面的内容

（三）还可以引入 TweenMax动画库实现炫酷动画；

demo进入：链接: https://pan.baidu.com/s/1VEVPeMNlqjeUzU7L2muI4A 密码: v8fc

4、tab切换

*{margin:0; padding:0;}
body{background: #f2f2f2;}
*{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
a{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);} /* 取消链接高亮 */
.my-pagination .swiper-pagination-bullet {text-align: center;border-radius: 0;opacity: 1;}
.my-pagination ul { display: -webkit-box; }
.my-pagination li { display: block; background: #fff; overflow: hidden; box-flex: 1; -moz-box-flex: 1; -webkit-box-flex: 1; height: 40px; line-height: 40px; position: relative; font-size: 15px; }
.my-pagination li:after { position: absolute; top: auto; right: auto; bottom: 0; left: 0; z-index: 1; display: block; width: 100%; height: 1px; content: ''; background-color: #dcdcdc; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scaleY(.5) }
.my-pagination .swiper-pagination-bullet-active { color: #21a4f4; }
.my-pagination .swiper-pagination-bullet-active:after { opacity: 1; background-color: #21a4f4; height: 4px; }


<div class="swiper-container">
	<div class="my-pagination"><ul class="my-pagination-ul"></ul></div>
	<div class="swiper-wrapper">
		<div class="swiper-slide">1</div>
		<div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
        <div class="swiper-slide">4</div>
	</div>
</div>


//js
var mySwiper = new Swiper('.swiper-container',{
	pagination: '.my-pagination-ul', //自定义分页器名字
	paginationClickable: true, //true时，点击分页器的指示点分页器会控制Swiper切换
	paginationBulletRender: function (index, className) {
		switch (index) {
		  case 0: name='热卖';break;
		  case 1: name='水果';break;
		  case 2: name='乳品';break;
		  case 3: name='零食';break;
		  default: name='';
		}
	    return '<li class="' + className + '">' + name + '</li>';
	  }
})

demo

5、swiper知识点

①将swiper对象的显示slider定位到指定的索引
mySwiper.slideTo(index);

②设定初始化时slide的索引
var mySwiper = new Swiper('.swiper-container',{
initialSlide :2 //索引0开始，2为第三张图

})

③设置为true则点击slide会过渡到这个slide

var mySwiper = new Swiper('.swiper-container',{
slideToClickedSlide:true,

})

④slidesPerView
设置slider容器能够同时显示的slides数量(carousel模式)。
可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。
loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
案例：小黄单车