swiper.js + jquery.magnific-popup.js 实现奇葩的轮播需要
奇葩的轮播图
说轮播图很简单的,一定是没有遇到厉害的产品。
先说需求:
首先,一个mask会有三张图片,点击左右按钮会左右滑动一张图片的宽度。
点击展示的三张图片的任意一张,弹出遮罩,显示该图片的放大样式,并支持左右箭头的点击,类似一个新的轮播图。
轮播的插件
找了很久都没有找到一个合适的插件,如果自己书写,无疑会花费更多的时间,故采取一个折中的方案,用两个轮播插件实现需求。
一个插件实现左右滚动的效过,一个插件弹出的左右效果。
插件如下:
jquery.magnific-popup.js
swiper.min.js
配置说明
html结构
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="./1.jpg" data-source="./1.jpg" style="width:100%;">
<img src="./1.jpg" width="100%">
</a>
</div>
<div class="swiper-slide">
<a href="./4.jpg" data-source="./4.jpg" style="width:100%;">
<img src="./4.jpg" width="100%">
</a>
</div>
<div class="swiper-slide">
<a href="./4.jpg" data-source="./4.jpg" style="width:100%;">
<img src="./4.jpg" width="100%">
</a>
</div>
<div class="swiper-slide">
<a href="./4.jpg" data-source="./4.jpg" style="width:100%;">
<img src="./4.jpg" width="100%">
</a>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
私有css样式
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
.swiper-container a {
display: inline-block;
}
body {
margin: 0;
padding: 0;
}
相关js的配置
var swiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 3,
centeredSlides: false,
spaceBetween: 0,
});
$('.swiper-wrapper').magnificPopup({
delegate: 'a',
type: 'image',
closeOnContentClick: false,
closeBtnInside: false,
mainClass: 'mfp-with-zoom mfp-img-mobile',
gallery: {
enabled: true
},
zoom: {
enabled: true,
duration: 300,
opener: function (element) {
return element.find('img');
}
}
});
注意:当设置swiper配置项目为循环播放的时候,会导致插件magnificPopup的图片数量增加。
很多的实现循环播放的插件都会至少增加图片栈的最前与最后的一张图片,以在视觉上显示无线循环的假象,当前这种技术是基于定时器动画才有的限制。
当采用css3显示的轮播图,通过淡入淡出,可以不用增加图片的数量,来完成无限轮播。
more
magnific-Popup github地址
swiper 中文网地址
swiper.js + jquery.magnific-popup.js 实现奇葩的轮播需要的更多相关文章
- js渐隐渐现透明度变化淡入淡出轮播图
js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- 基于jQuery带进度条全屏图片轮播代码
基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- JS框架_(Popup.js)3D对话框窗口插件
百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- js原生选项卡(自动播放无缝滚动轮播图)二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...
- jQuery系列(十三):实现轮播
1.轮播一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- jQuery无缝循环开源多元素动画轮播jquery.slides插件
详细内容请点击 初始化插件: 一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型$(".slideInner").slide({slideContainer: ...
- No mapping found for HTTP request with URI [/SLSaleSystem/js/jquery.dataTables.min.js] in DispatcherServlet with name 'spring' 静态资源文件访问不到,无解!!!!!!!
报错信息: 网上三种修改 web.xml 文件方法尝试未果 尝试未果:<mvc:default-servlet-handler/> 尝试未果:方法2:直接告诉spring,这个你就得这 ...
随机推荐
- 虚拟机与Docker有何不同?
译者按: 各种虚拟机技术开启了云计算时代:而Docker,作为下一代虚拟化技术,正在改变我们开发.测试.部署应用的方式.那虚拟机与Docker究竟有何不同呢? 原文: Comparing Virtua ...
- vue从入门到进阶:vue-router路由功能(九)
基本使用 html: <script src="https://unpkg.com/vue/dist/vue.js"></script> <scrip ...
- JS之innerHTML,innerText,outerHTML,textContent的用法与区别
示例html代码: <div id="test"> <span style="color:red">test1</span> ...
- 2018-11-04 在线代码离线翻译Chrome插件"一马"v0.0.14
续前文: 在线代码离线翻译Chrome插件"一马"v0.0.8. 主要改进如下. 项目源码库: program-in-chinese/webextension_github_cod ...
- Ambari架构源码解析
1. Ambari介绍 Apache Ambari是一种基于Web的工具,支持Apache Hadoop集群的供应.管理和监控.Ambari已支持大多数Hadoop组件,包括HDFS.MapReduc ...
- CSS的继承和使用方式
CSS的继承 css的继承指的是当标签具有嵌套关系时,内部标签自动拥有外部标签的不冲突的样式的性质. 在Css中有些属性不允许继承,例如,border属性没有继承性.多边框类的属性都没有继承 ,例如, ...
- Ubuntu添加新分区
1.查看分区 ~$ sudo fdisk -l 2.添加分区 ~$ fdisk /dev/sda 3.输入m查看帮助 ~$ m 4.输入n新建分区,即添加分区 ~$ n 这里会出现设置分区大小 5.输 ...
- Android SurfaceView实现跟随手指移动的光标
实例 public class DragSurfaceView extends SurfaceView implements SurfaceHolder.Callback,Runnable{ priv ...
- 浅谈servlet与jsp的关系
servlet是用java语言编写的,是一个java类.主要功能是用来接受.处理客户端的请求,并把处理结果返回到客户端显示.Jsp是servlet发展后期的产物.在没有jsp之前,servlet利用输 ...
- Android绘制优化(一)绘制性能分析
前言 一个优秀的应用不仅仅是要有吸引人的功能和交互,同时在性能上也有很高的要求.运行Android系统的手机,虽然配置在不断的提升,但仍旧无法和PC相比,无法做到PC那样拥有超大的内存以及高性能的CP ...