实现适配于移动页面中间的swiper图片切换

关于swiper图片切换有很多类型,我就不一一介绍了,可以直接到官网查询,今天来写一个适配于页面正中间的图片切换,也同时适配于任何图片的大小(也就是这个图片切换不用限制图片的本身大小,特别是移动端动态获取的图片有可能大小不一致),所以无论任何图片若是都想让其一直处于移动页面的正中间的话,那么就要获取到图片的tstyle样式了,好了,不多说,来看代码,既然是swiper的图片切换,那么先要引入swiper的css和js:

 <script type="text/javascript" src="js/swiper.min.js"></script>
 <link rel="stylesheet" href="css/swiper.min.css">

这两个不可少,要写入</head>的上面,接下来看简单的css实现

<style>
        *{margin:0;padding:0;}
        body{font-size:14px; -webkit-text-size-adjust: 100%;}
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background-color:#000;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flexbox;
            display: -moz-flexbox;
            display: -webkit-flex;
            display: -moz-flex;
            display: flex;
            -webkit-box-pack: center;
            -moz-box-pack: center;
            -ms-box-pack: center;
            -moz-flex-pack: center;
            -ms-flex-pack: center;
            -webkit-flex-pack: center;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            justify-content: center;
            -webkit-justify-content: center;
            -webkit-box-align: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            align-items: center;
        }
        .swiper-slide img{width:100%;height:100%;}
        .swiper-slide .title{position:absolute;bottom:0;left:0;width:100%;height:35px;z-index:999}
        .swiper-slide .title p{position:absolute;line-height:35px;color:#fff;z-index:9999;left:10px;}
        .swiper-slide .fl-bg{width:100%;height:100%;position:absolute;top:0;left:0;background-color:#000;opacity: 0.6;}
        .swiper-pagination{position:fixed;color:#fff;}
        .slide-info{width:100%;height:auto;position:absolute;top:50%;left:0;}

    </style>

我直接写成内嵌式的css了,然后来看swiper的布局:

<!--需求:图片处于移动页面的中间切换-->
<div class="swiper-container swiper-container-horizontal">
    <div class="swiper-wrapper">

        <div class="swiper-slide">
            <div class="slide-info">
                <img src="img/pic1.jpg"  alt="" />
                <div class="title">
                    <p>图片一</p>
                    <div class="fl-bg" ></div>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="slide-info">
                <img src="img/pic2.jpg"  alt="" />
                <div class="title">
                    <p>图片二</p>
                    <div class="fl-bg" ></div>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="slide-info">
                <img src="img/pic3.jpg"  alt="" />
                <div class="title">
                    <p>图片三</p>
                    <div class="fl-bg" ></div>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="slide-info">
                <img src="img/pic4.jpg"  alt="" />
                <div class="title">
                    <p>图片一</p>
                    <div class="fl-bg" ></div>
                </div>
            </div>
        </div>

    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination swiper-pagination-fraction"></div>
</div>

接下来就是swiper的必须要写的js效果:

<script>
    //这是swiper自带的一些必须要写的js
    var swiper = new Swiper(‘.swiper-container‘, {
        pagination: {
            el: ‘.swiper-pagination‘,
            type: ‘fraction‘,
        },
        navigation: {
            nextEl: ‘.swiper-button-next‘,
            prevEl: ‘.swiper-button-prev‘,
        },
    });
    //图片处于页面中间的js
    //兼容不同浏览器获取行间样式
    function getStyle ( obj, attr ) {
        return obj.currentStyle?obj.currentStyle[attr] :     getComputedStyle( obj )[attr];
    }
    window.onload=function(){
        var winH = document.body.scrollHeight==0?document.documentElement.scrollHeight:document.body.scrollHeight;
        var picH=document.getElementsByClassName("swiper-slide");
        for(var i=0;i<picH.length;i++){
            var divH=picH[i].getElementsByClassName("slide-info")[0];
            var oImg=picH[i].getElementsByTagName("img")[0];
            picH[i].index=i;
            picH[i].style.height=winH+"px";
            divH.style.height = getStyle(oImg,‘height‘);
            divH.style.marginTop =-parseFloat(getStyle(oImg,‘height‘))/2+"px";

        }
    }
</script>

好了,这样简单的写一下,效果就会出现,来看简单的实现图:

想要实现这个小例子的话,几个核心点就是:

1、要适配各种手机,所以要知道每个的页面的scrollheight;

2、图片大小不同的情况下,还要计算的出每张图片的高度,然后让其定位在页面的正中央。

这只是一个简单的小例子,但是移动端很有可能会用的到,希望对大家有帮助!

原文地址:https://www.cnblogs.com/web001/p/8127330.html

时间: 2024-10-09 22:46:44

实现适配于移动页面中间的swiper图片切换的相关文章

一个页面多个swiper问题解决

关于一个页面中多处使用swiper而引起的翻页问题 最近公司项目做了一个双12活动,活动页面中存在18个轮播!!!然后在进行swiper声明的时候发现了问题,如果页面只是有一两个轮播,可以直接给每一个swiper-container 元素重新增加一个新类名,然后使用新类名进行声明. 但现在页面中一共存在18个轮播,如果要每个都进行声明,对代码本身是一种冗余.因此,需要换一种思路进行实现.初步设想对页面中的swiper-container 元素进行遍历声明,然而事实说明,初始渲染页面没问题,但是当

iphoneX适配-客户端H5页面

由于iphoneX做了全面屏并且还保留一块小刘海,因此很多以前的移动端H5页面需要结合App客户端做出相应的适配,具体如下: 1.顶部通栏 之前的客户端一直采用状态栏20pt+导航栏44pt的做法.由于iphoneX多了一块小刘海,因此iphoneX单独采用状态栏44pt+导航栏44pt,意味着内嵌的H5页面整体下移24pt. 2.底部操作栏 由于iphoneX是全面屏,页面最底部会被弯曲的拐角截掉一部分,特别是有底部固定悬浮的tab条会严重受到影响.这时候需要底部留出一块空白安全区域,页面内容

jquery实现页面按条件显示图片

function lazyload(option){ var settings={ defObj:null, defHeight:0 }; settings=$.extend(settings,option||{}); var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).fin

网站架构(页面静态化,图片服务器分离,负载均衡)方案全解析

网站架构(页面静态化,图片服务器分离,负载均衡)方案全解析 文章分类:综合技术 1.HTML静态化其实大家都知道,效率最高.消耗最小的就是纯静态化的html页面,所以我们尽可能使我们的网站上的页面采用静态页面来实现,这个最简单的方法其实也是最有效的方法.但是对于大量内容并且频繁更新的网站,我们无法全部手动去挨个实现,于是出现了我们常见的信息发布系统CMS,像我们常访问的各个门户站点的新闻频道,甚至他们的其他频道,都是通过信息发布系统来管理和实现的,信息发布系统可以实现最简单的信息录入自动生成静态

webview 中使用css适配简单的页面

package com.example.mycssdemo; import android.annotation.SuppressLint; import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view.Menu; import android.webkit.WebSettings; import android.webkit.WebSettings.Layo

页面多个 swiper 互补冲突

方法一:精简版 $(".swiper-container").each(function(){ $(this).swiper({ loop: true, initialSlide :0, pagination:$('.swiper-pagination',this), nextButton: $('.arrow-right',this), prevButton:$('.arrow-left',this) }); }); 方法二: $("ul>li").each

iOS 11 适配UIWebView,页面下移20的问题

方案1: AppDelegate文件 didFinishLaunchingWithOptions()中添加如下代码 if (@available(iOS 11.0, *)) { [[UIScrollView appearance] setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever]; } 方案2: 若按照<方案1>设置完依然存在UIWebView位置下移20pt的问题,那么在根控制器(vc.nav

移动端适配之雪碧图(sprite)背景图片定位

为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top,所以定位起来会比较准确.简单.但是在移动端就不一样了,各种手机的屏幕大小不一样,很难做到使用sprite图然后根据background-position来定位.所以普遍的做法都是使用单张图片,然后使用background-size: cover|100%|contain来控制背景图的大小.其实这样

页面显示头像(图片)

jsp <%-- <c:choose> --%> <%-- <c:when test="${not empty oaUserinfo.headpicturename || not empty oaUserinfo.picturename}"> --%> <img alt="头像" style="float: left; border-radius:10px;" src='${contextPa