swiper异形切换

最新推荐文章于 2024-06-21 11:17:24 发布
最新推荐文章于 2024-06-21 11:17:24 发布
阅读量1.5w 收藏 7
点赞数
分类专栏： web 文章标签： swiper
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxhmm921/article/details/85272329
版权

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta name="format-detection" content="telephone=no">
        <meta http-equiv="Cache-Control" content="no-transform">
        <meta http-equiv="Cache-Control" content="no-siteapp">
        <meta name="applicable-device" content="mobile">
        <title></title>
        <script src="//static.haokecheng.com/js/uaredirect.js" type="text/javascript"></script>
        <script type="text/javascript">        pcredirect("");</script>
        <script type='application/javascript' src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js" charset="utf-8"></script>
        <link rel="stylesheet" href="css/m-reset.css" />
        <link rel="stylesheet" type="text/css" href="css/common.css" charset="utf-8">
		<link rel="stylesheet" href="css/admin.css" />
		<link rel="stylesheet" href="css/swiper-3.4.2.min .css" />
		<style>
			.content{position:relative;padding-top:20px;width:100%;height:300px;border:1px solid #dedede;}
			ul{list-style: none;}
			li{display:inline-block;float:left;width:200px;height:300px;}
			ul li img{width:100%;}
			.more{position:absolute;top:25px;right:-50px;padding:10px 15px;width:50px;height:115px;font-size:15px;color:#323232;background:#dedede;transition: all .5s;border-top-left-radius:100px;border-bottom-left-radius: 100px;}
			.more.tran{right:0px;}
			.swiper-slide {
				-webkit-transition: transform 1.0s;
				-moz-transition: transform 1.0s;
				-ms-transition: transform 1.0s;
				-o-transition: transform 1.0s;
				-webkit-transform: scale(0.7);
				transform: scale(0.7);
			}
			.swiper-slide-active,.swiper-slide-duplicate-active {
				-webkit-transform: scale(1);
				transform: scale(1);
			}
		</style>
	</head>
	<body>
		<div class="content swiper-container">
			<ul class="box swiper-wrapper clearfix">
				<li class="item swiper-slide"><img src="img/6.jpg" alt="" /></li>
				<li class="item swiper-slide"><img src="img/6.jpg" alt="" /></li>
				<li class="item swiper-slide"><img src="img/6.jpg" alt="" /></li>
			</ul>
			<div class="more">更多</div>
		</div>
		<script src="js/jquery-1.11.3.js"></script>
		<script src="js/swiper-3.4.2.jquery.min.js"></script>
		<script>
			var mySwiper = new Swiper('.swiper-container',{
				autoplay:3000,
				speed:1000,
				autoplayDisableOnInteraction : false,//用户操作swiper之后，是否禁止autoplay
				loop:true,
				centeredSlides : true,
				slidesPerView:2,
				pagination : '.swiper-pagination',
				paginationClickable:true,//点击分页器是否会切换
				prevButton:'.swiper-button-prev',
				nextButton:'.swiper-button-next',
				onInit:function(swiper){//回调函数，初始化后执行。
					swiper.slides[2].className="swiper-slide swiper-slide-active";//第一次打开不要动画
					},

			    
			})    
		</script>
	</body>
</html>

方法二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta name="format-detection" content="telephone=no">
        <meta http-equiv="Cache-Control" content="no-transform">
        <meta http-equiv="Cache-Control" content="no-siteapp">
        <meta name="applicable-device" content="mobile">
        <title></title>
        <script src="//static.haokecheng.com/js/uaredirect.js" type="text/javascript"></script>
        <script type="text/javascript">        pcredirect("");</script>
        <script type='application/javascript' src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js" charset="utf-8"></script>
        <link rel="stylesheet" href="css/m-reset.css" />
        <link rel="stylesheet" type="text/css" href="css/common.css" charset="utf-8">
		<link rel="stylesheet" href="css/admin.css" />
		<link rel="stylesheet" href="css/swiper-3.4.2.min .css" />
		<style>
			.banner {
				margin-top: .24rem;
				height: 4.08rem;
			}
			
			.banner .swiper-slide {
				width: 6.8rem;
				height: 3.6rem;
			}
			
			.banner .swiper-slide img {
				width: 100%;
			}
			
			.banner.swiper-container-horizontal>.swiper-pagination-bullets,
			.swiper-pagination-custom,
			.swiper-pagination-fraction {
				bottom: .24rem;
			}
			
			.banner.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
				margin: 0 .06rem;
			}
			
			.banner .swiper-pagination-bullet {
				width: 6px;
				height: 6px;
				opacity: 1;
				background: #888888;
			}
			
			.banner .swiper-pagination-bullet-active {
				background: #C71045;
			}

		</style>
	</head>
	<body>
		<div class="swiper-container banner">
		    <div class="swiper-wrapper">
		    	        <div class="swiper-slide"><a href="/mspecial/2018_ielts_12h_m/"><img src="http://m.eickaopei.com/uploads/banner/20181206/2003da65e0dca85594bb18b217e66d92.jpg" alt="12小时雅思特训班" /></a></div>
		                <div class="swiper-slide"><a href="/mspecial/2018_ielts_12h_m/"><img src="http://m.eickaopei.com/uploads/banner/20181217/3eae375bad00937a12d8b444550ad3e0.jpg" alt="千人一堂课" /></a></div>
		                <div class="swiper-slide"><a href="/mspecial/ielts_jjfwj/"><img src="http://m.eickaopei.com/uploads/banner/20180802/208cc3301b8810df6ed42a79144c7dc9.jpg" alt="雅思机经下载" /></a></div>
		                <div class="swiper-slide"><a href="/mspecial/2018_toefl_12h_m/"><img src="http://m.eickaopei.com/uploads/banner/20181206/6715342ed2fbda87d801ef889239cd55.jpg" alt="12小时托福特训班" /></a></div>
		                <div class="swiper-slide"><a href="/mspecial/2018_hjb_m/"><img src="http://m.eickaopei.com/uploads/banner/20181130/a675e642c572966e0c727a461893fc95.jpg" alt="2019寒假班" /></a></div>
		                <div class="swiper-slide"><a href="/mspecial/2018_tset_2min_m/"><img src="http://m.eickaopei.com/uploads/banner/20180706/d81f1b7776b08bc35197d1c8d82884b1.jpg" alt="2分钟快速测雅思&托福水平" /></a></div>
		                <div class="swiper-slide"><a href="/mspecial/2018_toefl_m/"><img src="http://m.eickaopei.com/uploads/banner/20180914/ee17c05a86883f4fdc36487f873029b6.jpg" alt="托福培训" /></a></div>
		                <div class="swiper-slide"><a href="/mspecial/2018_prepsmith_m/"><img src="http://m.eickaopei.com/uploads/banner/20181112/e4eedc2fa4d2101bb12426bbbe8c71f1.jpg" alt="备考史密斯" /></a></div>
		            </div>
		    <div class="swiper-pagination"></div>
		</div>

		<script src="js/jquery-1.11.3.js"></script>
		<script src="js/swiper-3.4.2.jquery.min.js"></script>
		<script>
			//banner 轮播
				var size = $(window).innerWidth() / 7.5,
			//		depthNum = 1.15 * size,
					stretchNum = .5 * size;
				
				var banner = new Swiper ('.banner', {
				    loop: true,
				    
				    pagination: '.swiper-pagination',
			        effect: 'coverflow',
			        grabCursor: true,
			        centeredSlides: true,
			        slidesPerView: 'auto',
			        coverflow: {
			            rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
			            stretch: -stretchNum,//每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
			            depth: 115, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
			            slideShadows: false //开启slide阴影。默认 true。
			        }
				})  
	
		</script>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/admin.css" />
		<link rel="stylesheet" href="css/swiper-3.4.2.min .css" />
		<style>
			.content{position:relative;padding-top:20px;width:700px;height:300px;border:1px solid #dedede;}
			ul{list-style: none;}
			.item{display:inline-block;float:left;width:300px;height:300px;margin-right:20px;}
			.item img{width:300px;}
			.more{position:absolute;top:25px;right:-50px;padding:10px 15px;width:50px;height:115px;font-size:15px;color:#323232;background:#dedede;transition: all .5s;border-top-left-radius:100px;border-bottom-left-radius: 100px;}
			.more.tran{right:0px;}
		</style>
	</head>
	<body>
		<div class="content swiper-container">
			<ul class="box swiper-wrapper clearfix">
				<li class="item swiper-slide"><img src="img/1.jpg" alt="" /></li>
				<li class="item swiper-slide"><img src="img/1.jpg" alt="" /></li>
				<li class="item swiper-slide"><img src="img/1.jpg" alt="" /></li>
			</ul>
			<div class="more">更多</div>
		</div>
		<script src="js/jquery-1.11.3.js"></script>
		<script src="js/swiper-3.4.2.jquery.min.js"></script>
		<script>
			var mySwiper = new Swiper('.swiper-container',{
				//autoplay:1000,
				freeMode: true,
			    freeModeMomentumRatio: 0.5,
			    slidesPerView: 'auto',
			    onSliderMove:function(swiper){
			    	var num=-50;
			    	TR=swiper.translate;
			    	len=-264-TR;
			    	if(TR<-264){
			    		if(num+len>0){
			    			$(".more").css("right",0);
			    		}else{
			    			$(".more").css("right",(num+len));
			    		}
			    		if(TR<-350){
			    			$(".more").text("释放更多");
			    		}else{
			    			$(".more").text("更多");
			    		}
			    	}
			    	
			    },
				onTouchEnd: function(swiper){
					TR=swiper.translate
						if(TR<-350){
						//swiper.setWrapperTranslate(TR);
						
						location.href ="http://www.baidu.com";
						};
						
					$(".more").css("right",-50);
					}
				})    
		</script>
	</body>
</html>
mySunshine921
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
swiper异形轮播
Ice__wine的博客
11-23 775
<!--在head中引入css--> <link rel="stylesheet" href="../dist/css/swiper.min.css"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">1</div> <div class="swiper-slide">2</div&g.
vue3使用swiper6+版本实现异型轮播图
Wancc123的博客
08-05 2957
首先下载swiper，默认为最新版本 npm install swiper --save 引入 import { Swiper, SwiperSlide } from 'swiper/vue'; import 'swiper/swiper.scss'; import SwiperCore, { EffectCoverflow } from 'swiper/core'; SwiperCore.use([EffectCoverflow]); html <swiper :initial
Swiper垂直异形滚动
最新发布
qq_34925033的博客
06-21 232
【代码】swiper垂直滚动。
swiper实现异形轮播效果
12-13
swiper轮播—异形轮播，供大家参考，具体内容如下 最近经常会碰到很多用swiper插件做各种各样轮播图的需求，没有做过3d异形轮播图，所以研究了一下，把经验给大家分享一下 上面图片就是轮播图所要达到的效果：焦点图片居中并向前突出，自动轮播。 代码介绍： 1.我的移动端屏幕尺寸640px，这个移动端屏幕适应是封装好的，如果需要引用，只需要改一下屏幕尺寸就好了。 2.我的图片大小是251*441。 3.swiper：指滑动、切换（整个滑动对象，有时特指滑块释放后仍然正向移动直到贴合边缘的过程（过渡）） container：指容器（swiper的容器里面包括滑动快（slide）的集合（wrap
整页翻屏
曲小强
02-11 386
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial...
swiper异形切换(可视化)
Mr_yq的博客
09-18 4104
swiper 版本 Swiper4.x 自己用到这个组件，数值老是调不理想 做了个简单demo,方便以后调用，需要用到的试试吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https...
使用vue-awesome-swiper实现轮播图异形卡片化两侧切换显示一半的遮挡效果
zuo-yiran的博客
01-14 4474
vue 可以直接使用插件 效果如图： 主要设置如下： <swiper class="service-advantage" ref="carouselSwiper" :options="swiperOptions"> <swiper-slide v-for="(item,index) in serviceAdvantageData" :key="`item${index}`"> <div class="card-area"> 第{{index}}张swiper
swiper插件自定义切换箭头按钮
08-28
Swiper 插件自定义切换箭头按钮 Swiper 是一个非常流行的滑块插件，广泛应用于各种网站和移动应用程序中。然而，在使用 Swiper 时，我们经常会遇到一些棘手的问题，例如如何自定义切换箭头按钮的样式和位置。本文将...
小程序swiper 3D 切换代码
07-27
在3D切换的场景下，Swiper能够带来更丰富的视觉体验，使用户界面更加生动。本文将深入探讨如何在小程序中实现Swiper 3D切换，并基于提供的`selectDoctor`文件进行分析。 首先，我们要了解Swiper组件的基本用法。在...
基于swiper图片切换显示特效代码
03-20
【基于swiper图片切换显示特效代码】的知识点详解 Swiper.js是一个流行的JavaScript库，用于创建高性能的触摸滑动内容，特别是在移动设备上。它广泛应用于创建轮播图、幻灯片展示、产品滑块等场景。在【基于swiper...
基于Swiper实现的列表切换效果
09-08
这是一个基于Swiper实现的列表切换效果，与之前做的相比较更加的大气一些，因为增加了一些过渡的动画效果，在移动端的体验更好。
react-手把手教你在react中使用Swiper4做轮播图
08-15
手把手教你在 react 中使用 Swiper 4 做轮播图
vue2移动端+swiper 实现异形的slide
skylar的博客
09-23 2348
vue2移动端+swiper 实现异形的slide
Vue3 + Vite + ts 使用 swiper 实现 异形轮播图
weixin_48692423的博客
08-29 1946
vue3 + vite + ts 使用 swiper 实现异形的slide
啥,ui叫我做一个移动端好看的轮播--异形的Slide
m0_66809099的博客
01-23 616
我的基础架构是 next.js+swiper。先看效果,得实现两边的缩放和无线滚动。
VueAwesomeSwiper的异形轮播
brevey的博客
01-15 1819
1.进入项目目录，安装swiper和vue-awesome-swiper npm install vue-awesome-swiper --save npm install swiper 2.引入资源（main.js文件) import VueAwesomeSwiper from 'vue-awesome-swiper' // import 'swiper/swiper-bundle.css'(swiper6的引入css) import 'swiper/css/swiper.css' //引入样式(sw
swiper轮播图(旋转木马,异形swiper)
zhouzhoua123321的博客
12-01 2730
参考链接：添加链接描述-----查看源代码看 使用swiper轮播图组件库，查看vue中使用的文档和API文档(swiper6优缺点，滑动会跳动一下) 在.vue文件中具体如何使用参考文档 **loop:true循环时的一些坑： 1、前后复制的slide中图片是src是空的// 图片src是动态获取的，在src数据还没从后台获取到，swiper就完成了复制操作，此时src都是空的 2、前后复制的slide点击跳转事件不生效// swiper只前后复制dom，并不会复制事件 解决： 1、让swiper组件在获
swiper——异形swiper中最后一个元素无法使用点击事件
Juliet_xmj的博客
09-16 1471
swiper——异性swiper中最后一个元素无法使用点击事件 1.原因 swiper异性中使用了loop:true属性，循环，但是元素总共就那几个，swiper循环时会复制前后元素，但是只复制元素，不复制事件，导致最后一个元素渲染成功，但是无法使用事件 表现在：点击左边这个圆圈其实是切换到了最后一个轮播元素，点击事件失效，但是向右点击到该轮播元素点击事件正常 2.解决 因为渲染的元素存在，可以将事件绑定在dom节点上，而我使用的方法是比较笨的一种，但是很有效果，点击事件要加在图中按钮中，内容比较隐私，没什
swiper 异形的slide
09-19
Swiper 是一个流行的 JavaScript 库，用于创建响应式的滑动组件，包括幻灯片（slide）效果。如果你想创建一个异形的 slide，可以通过修改 CSS 样式来实现。 首先，你需要为 slide 添加自定义的 CSS 样式，使其具有异形效果。你可以使用 CSS 的 `clip-path` 属性来裁剪 slide 的形状。例如，你可以通过设置 `clip-path` 属性为一个多边形来创建异形的 slide。 下面是一个示例代码，展示如何创建一个具有异形效果的 slide： ```html <!DOCTYPE html> <html> <head> <style> .swiper-slide { background-color: #ccc; clip-path: polygon(0% 0%, 100% 20%, 100% 80%, 0% 100%); } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> <script src="path/to/swiper.js"></script> <script> // 初始化 Swiper var swiper = new Swiper('.swiper-container'); </script> </body> </html> ``` 在上述示例中，我们使用了 `clip-path: polygon()` 来创建一个多边形形状的 slide。你可以根据自己的需求调整多边形的顶点位置，从而实现不同的异形效果。 希望这个示例对你有所帮助！如果你还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值