jq h5实现swiper轮播图全屏预览

红太狼 2023-06-17 08:54 1阅读 0赞

今天实现swiper轮播图全屏预览，之前写mip化页面的时候轮播图组件有全屏预览的属性

以为swiper.js（[https://www.swiper.com.cn/][https_www.swiper.com.cn]）会有，可是没有找到呀，网上的框架也很多，但是不想改插件了

所以用最简单的方式css+jq 对swiper插件实现了全屏预览（单个轮播或多个轮播可用）

逻辑：1. 通过用户点击轮播图元素，在动态生成一个全屏的轮播图，把点击的轮播图内容复制到全屏的轮播图中，

2. 判断用户点击轮播图的索引，通过swiper给的slideTo（）方法指定全屏轮播图默认显示第几张图片

3. showfull字段判断当前是否是预览模式 默认showfull = 0；如果是再次点击清空全屏轮播容器，退出预览模式

var showfull = 0;
    $("body").on('click', '.swiper-container', function(e) {
    			if(showfull == 0){
    				var index = $(this).parents(".wrap").attr("data-index");
    				var html = '';
    				var i = $(this).find(".swiper-slide-active").index();
    				html += '<div class="swiper-container fullswiper-container" style="width: 100% !important;;height: 100% !important;">'
    				html += '<div class="swiper-wrapper">'
    				$.each(arrlist[index].Grass_Planting_Pictures, function(index, swiperarr) {
    					html += '<div class="swiper-slide">'
    					if(swiperarr.contypet == "ResourcePic"){
    					   html += '	<img mode="widthFix"  src=' + swiperarr.imgurl +' alt="" style="width: 100%;"> '
    					}else if(swiperarr.contypet == "ResourceVideo"){
    					   html += '	<video controls="controls" src='+ swiperarr.videourl +' poster='+ swiperarr.videoCover +' style="height: 100%;width: 100%;"></video> '
    					}
    					html += '</div>'
    				});
    				html +=	'</div>'
    				html += '<div class="swiper-pagination"></div>'
    				html += '</div>'
    				$(".fullwrapper").append(html)
    				var myfullSwiper = new Swiper ('.fullswiper-container', {
    					observer: true,//修改swiper自己或子元素时，自动初始化swiper
    					observeParents: true,//修改swiper的父元素时，自动初始化swiper
    					pagination: {
    						  el: '.swiper-pagination',
    					}
    				});
    				myfullSwiper.slideTo(i, 0, false);//切换到第一个slide，速度为1秒
    				$(".fullwrapper").fadeIn(250);
    				showfull = 1;
    				$('body').css({"overflow-y":"hidden"});
    			}else{
    				$('body').css({"overflow-y":"scroll"});
    				$(".fullwrapper").fadeOut(250,function(){
    					$(".fullwrapper").empty();
    				});
    				showfull = 0;
    			}
    		});

[https_www.swiper.com.cn]: https://www.swiper.com.cn/

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关简单使用swiper实现轮播图

1、引入CSS CDN（在页面head） <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.

梦里梦外;/ 2023年06月25日 03:29/ 0 赞/ 2 阅读

相关 jq h5实现swiper轮播图全屏预览

今天实现swiper轮播图全屏预览，之前写mip化页面的时候轮播图组件有全屏预览的属性以为swiper.js（[https://www.swiper.com.cn/][ht

红太狼/ 2023年06月17日 08:54/ 0 赞/ 2 阅读

相关 jq实现简单的swiper轮播预览原图

最近项目中用到的一个效果，简单记录一下效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

ゝ一世哀愁。/ 2022年12月28日 07:40/ 0 赞/ 180 阅读

相关 swiper轮播图

> swiper中只能放swiper-item > `block` 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 <swiper

妖狐艹你老母/ 2022年09月05日 02:00/ 0 赞/ 239 阅读

相关 Jquery实现全屏焦点轮播图效果

一、效果展示 ![20180221195436942][] 二、实现原理焦点轮播图原理如下图：（以四张图片组成的轮播图为例） ![2018022

素颜马尾好姑娘i/ 2022年05月31日 10:24/ 0 赞/ 260 阅读

相关 h5轮播图代码

下面是一个完整的h5轮播图html代码，复制后把图片改成自己的即可运行 <!DOCTYPE html> <html> <head>

朴灿烈づ我的快乐病毒、/ 2022年05月09日 13:06/ 0 赞/ 213 阅读

相关用Swiper实现轮播图

任务描述本关任务：用Swiper实现一个轮播图。效果如下： ![196943][] 相关知识为了完成本关任务，你需要掌握：1.swiper基本的HTMl结构，2

╰+哭是因爲堅強的太久メ/ 2022年04月04日 11:58/ 0 赞/ 356 阅读

相关 JQ实现轮播图

<script> $(function(){ var t; var index=

小鱼儿/ 2021年09月19日 01:18/ 0 赞/ 451 阅读

相关 jq swiper(各种轮播图样式)

具体样式教程查看地址[swiper][] 各种样式引用地址[各种样式][Link 1] 引入swiper.min.css文件 swiper.jqu

客官°小女子只卖身不卖艺/ 2021年07月24日 12:32/ 0 赞/ 668 阅读

相关用Swiper实现轮播图

用Swiper实现轮播图任务描述相关知识搭建Swiper环境代码文件任务描述本关任务：用Swiper实现一

系统管理员/ 2021年06月24日 13:58/ 0 赞/ 559 阅读