取消懒加载

for (var i in $('.p01-s9 .lazyload')) {
$('.p01-s9 .lazyload').eq(i).attr('src',$('.p01-s9 .lazyload').eq(i).attr('data-src'));
}
$('.p01-s9 .lazyload').removeClass('lazyload').addClass('lazyloaded');

//轮播箭头垂直居中
function reactiveGallaryArrowTop($swiper) {

var outerHeight = $($swiper).find(".swiper-wrapper").height();
var imgHeight = $($swiper).find(".swiper-slide").find("img").height();
var percentage = 0.5*imgHeight/outerHeight * 100;

var prevArrow = $($swiper).find(".prev");
var nextArrow = $($swiper).find(".next");

prevArrow.css({
"top": percentage + '%'
});
nextArrow.css({
"top": percentage + '%'
});
}
//swiper调用
            on: {
                imagesReady: function() {

$('.p01-s5 img').load(function() {
reactiveGallaryArrowTop('#p01-s5');
});

},
                resize: function() {
$('.p01-s5 img').load(function() {
reactiveGallaryArrowTop('#p01-s5');
});
                }
            }

swiper轮播箭头垂直居中的更多相关文章

  1. swiper轮播在ie浏览器上遇到的显示问题探索

    前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...

  2. 视频swiper轮播

    关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...

  3. swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  4. 使用Swiper轮播插件引起的探索

    提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...

  5. swiper轮播图(逆向自动切换类似于无限循环)

    swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...

  6. Swiper轮播图

    今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码:   <!DOCTYPE html>   <html lang="en">   < ...

  7. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

  8. Swiper轮播隐藏再显示后不动

    公告用Swiper轮播方式,在某些不需要显示公告的页面进行隐藏,在需要展示公告的页面进行显示时候,公告不能正常轮播,在条件里加入重新设置轮播方法等网上的一些方法仍然不行,最后解决方法: this.my ...

  9. Swiper轮播手动后不动

    最近项目首页轮播图用了Swiper轮播,今天突然发现轮播图动画初始正常但是手动换过之后就不动了,解决方法有两种,具体根据采用的情况为准: 1.autoplayDisableOnInteraction: ...

随机推荐

  1. proxy-target-class="false"与proxy-target-class="true"区别

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11484063.html <aop:aspectj-autoproxy proxy-target- ...

  2. 【leetcode】207. Course Schedule

    题目如下: There are a total of n courses you have to take, labeled from 0 to n-1. Some courses may have ...

  3. while循环语句基础

    while循环语句基础 一while循环语句介绍 循环语句命令常用于重复执行一条指令或一组指令,直到条件不再满足时停止,   Shell脚本语言的循环语句常见的有while, until, for及s ...

  4. 深度 | 带领国产数据库走向世界,POLARDB底层逻辑是什么?

    POLARDB 是阿里云自主研发的下一代云原生分布式数据库,100%兼容MySQL.PostgreSQL等开源数据库,高度兼容Oracle语法,使用RDS服务的客户不需要修改应用代码,可以一键迁移到P ...

  5. Xcode 编辑器之关于Other Linker Flags相关问题

    一,概述 问题场景一 当从网上去下载一些之前的完整的项目的时候,用终端也 pod update了,但一运行,熟悉的linker错误就出来了. 解决办法 在Other Linker Flags(也即 O ...

  6. Mysql学习-安装与启动

    安装mysqlrpm -ivh Mysql-server....rpm安装完成后,会提示/usr/bin/mysqladmin -u root password 'new-password'也可以用m ...

  7. Network基础(五):配置静态路由、配置浮动路由、配置多路由的静态路由、配置默认路由

    一.配置静态路由 目标: 配置路由接口IP地址并通过静态路由的配置实现全网的互通. 方案: 按如下网络拓扑配置接口IP地址并通过静态路由的配置实现全网的互通如下图所示: 步骤: 步骤一:配置静态路由 ...

  8. vue登录页和主页路由配置问题

    登录页和主菜单首页是同一级的,都是用一个router-view,对于home页面里还有菜单,这里边还可以再增加一个router-view,那么在配置时候就是在home的路径增加个children路径配 ...

  9. Centos7安装部署SonarQube7.9.1教程

    0.参考文档 LTS 7.9.1 新特性:https://www.sonarqube.org/sonarqube-7-9-lts/ JDK11 下载地址: 链接:https://pan.baidu.c ...

  10. Data URL scheme 笔记

    0x01起因 今天做CTF的时候,发现一堆数据,大概是这样的 data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAIUAAACFCAYAAAB12js8AAA ...