js swipe 图片滑动控件实现 任意尺寸适用任意屏幕

时间：2022-11-13 07:56:08

http://www.swiper.com.cn/
http://www.idangero.us/swiper/demos/

解决问题点：

1.先得到图片真实的宽高， 根据真实宽高 等比例

2.调用的控件 宽高的计算 其实是 获取  .swiper-container 样式的宽和高，所以此样式的宽高要设定好。

宽100%   高 则根据 真实图片的 比例来

 72     $(".swiper-container").css("height",$(".swiper-container").width()/imageRealWidth*imageRealHeight);                                                                         
3.再采用cookie 技术 否则每次加载 页面都new Image 从性能角度考虑 更优                                                                                                                               
 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

 <link rel="stylesheet" type="text/css" href="css/layout.css"/>

 <!-- Link Swiper's CSS -->

 <link rel="stylesheet" href="css/swiper.min.css">

     <!-- Demo styles -->

 <style>

     html, body {

         position: relative;

         height: 100%;

     }

     body {

         background: #eee;

         font-family: Helvetica Neue, Helvetica, A

         font-size: 14px;

         color:#000;

         margin: 0;

         padding: 0;

     }

     .swiper-container {

         width: 100%;

     }   

   .swiper-slide {

         text-align: center;

         font-size: 18px;

         background: #fff;

         /* Center slide text vertically */

         display: -webkit-box;

         display: -ms-flexbox;

         display: -webkit-flex;

         display: flex;

         -webkit-box-pack: center;

         -ms-flex-pack: center;

         -webkit-justify-content: center;

         justify-content: center;

         -webkit-box-align: center;

         -ms-flex-align: center;

         -webkit-align-items: center;

         align-items: center;                     

     }

 </style>                                     

 <title>倍赚宝首页</title>

 <script type="text/javascript" src="js/jquery1.9.1.js""></script>

  <!-- Swiper JS -->

  <script src="js/swiper.js"></script>  

 <script type="text/javascript" src="js/iscroll.js"></script>

 <script type="text/javascript" src="js/hybrid-1.0.2.js"></script>

 <script type="text/javascript" src="js/plugins/WinnerFrame.js"></script>

 <script type="text/javascript">

     var leverage={

         leverageStock:function(){

             window.plugins.winnerFrame.redirectTrade();

         },

         leverageNew:function(){

             window.plugins.winnerFrame.redirectZijin();

         }}

     $(function(){

            var imageRealWidth,imageRealHeight;

            imageRealWidth=localStorage['imageRealWidth'];

            imageRealHeight=localStorage["imageRealHeight"];

            function callSwiper(){

              //设置宽高

              //$(".swiper-container").css("width",localStorage['swipercontainerWidth']);

             //$(".swiper-container").css("height",localStorage['swipercontainerHeight']);

             $(".swiper-container").css("height",$(".swiper-container").width()/imageRealWidth*imageRealHeight);

             //alert("w   h"+imageRealWidth+" "+imageRealHeight+", swiper-container w h "+$(".swiper-container").width()+"  "+$(".swiper-container").height());

             swiper = new Swiper('.swiper-container', {

                 pagination: '.swiper-pagination',

                 paginationClickable: true,

                     spaceBetween: 10,

                    centeredSlides: true,

                 autoplay: 2500,

                 autoplayDisableOnInteraction: false

                    });

              }

            if(imageRealWidth==null||imageRealHeight==null){

             var image=new Image();

                var swiper;

             image.src="data:images/banner01.png";

             image.onload=function(){

                 imageRealWidth=this.width;

                 imageRealHeight=this.height;

                 localStorage['imageRealWidth']= imageRealWidth; // 存储 cookie

                 localStorage['imageRealHeight']= imageRealHeight; // 存储 cookie

                 //存储 container控件宽高

                 localStorage['swipercontainerWidth']=$(".swiper-container").width();

                 localStorage['swipercontainerHeight']=$(".swiper-container").height();

                 callSwiper();

                 };

              delete image;

              }else{

                  callSwiper();

              }

        })

 </script>

 </head>

 <body>

 <article class="header">

     <div class="logo"><img src="data:images/logo.png" width="100" height="34" alt="logo"/> </div>

 </article>

 <!--

 <div class="banner">

     <div class="flex-viewport">

         <!-- 改变 -webkit-transform: translate3d(-100px, 0px, 0px), 改变位置

         <ul class="slides" style="-webkit-transform: translate3d(0px, 0px, 0px);">

             <li style="left:0;"><a><img src="data:images/banner01.png"/></a></li>

             <li style="left:100%;"><a><img src="data:images/banner02.png"/></a></li>

             <li style="left:200%;"><a><img src="data:images/banner03.png"/></a></li>

         </ul>

     </div>

 </div>

 -->

     <!-- Swiper -->

     <div class="swiper-container">

         <div class="swiper-wrapper">

             <div class="swiper-slide" style="background:url('images/banner01.png');background-repeat:no-repeat;background-size:100%;"></div>

             <div class="swiper-slide" style="background:url('images/banner02.png');background-repeat:no-repeat;background-size:100%;"></div>

             <div class="swiper-slide" style="background:url('images/banner03.png');background-repeat:no-repeat;background-size:100%;"></div>

         </div>

         <!-- Add Pagination -->

         <div class="swiper-pagination"></div>                                                                                                    

     </div>                                                                                                                                       

 <article class="content am-grid">

     <div class="clearfix">

         <div class="blockButton blockButtoncg" onclick="leverage.leverageStock()">leverageStock</div>

         <div class="blockButton blockButtondx" onclick="leverage.leverageNew()">leverageNew</div>

     </div>

     <p class="whytitle clearfix">

         <span class="line"></span>

         <span class="title">why choose this</span>

         <span class="line"></span>

     </p>

     <aside class="reasons clearfix">

         <div class="circle ycircle am-grid-item">

             <div class="icon"></div>

             <div class="txt">the maximum 1.8</div>

         </div>

         <div class="circle rcircle am-grid-item">

             <div class="icon"></div>

             <div class="txt">above 2.5 w</div>

         </div>

         <div class="circle bcircle am-grid-item">

             <div class="icon"></div>

             <div class="txt">8 percentage</div>

         </div>

     </aside>

 </article>

 </body>

 </html>

js swipe 图片滑动控件实现 任意尺寸适用任意屏幕的更多相关文章

  1. Slider&period;js轻量级图片播放控件

    Slider.js基于HTML5和CSS3实现的Slideshow 1.Slider.js 是一个图片播放Slideshow引擎,采用jQuery.CSS3和HTML5 canvas技术实现. 2.可 ...

  2. Android实现图片滚动控件，含页签功能，让你的应用像淘宝一样炫起来

    首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机. 如果你是网购达人,你的手机上一定少不了淘宝客户 ...

  3. appium&plus;python：自己写的一个滑动控件的方式

    #调用方式roll_ele("ID","ele_id","7","up",3)#将控件分为7格,从底部倒数第二格向上滑动 ...

  4. Android进阶篇-时间滑动控件

    仿Iphone时间选择滑动控件: WheelView.java: /** * @author Administrator * * 时间滑动滚轮 */ public class WheelView ex ...

  5. Android开发技巧——定制仿微信图片裁剪控件

    拍照--裁剪,或者是选择图片--裁剪,是我们设置头像或上传图片时经常需要的一组操作.上篇讲了Camera的使用,这篇讲一下我对图片裁剪的实现. 背景 下面的需求都来自产品. 裁剪图片要像微信那样,拖动 ...

  6. JS与APP原生控件交互

    "热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...

  7. &lbrack;js开源组件开发&rsqb;js多选日期控件

    js多选日期控件 详情请见:http://www.lovewebgames.com/jsmodule/calendar.html 它的github地址:https://github.com/tianx ...

  8. UI-UIImageView的图片填充方式&lpar;contentMode&rpar;&lowbar;图片作为控件背景图的拉伸方式&lpar;stretch&rpar;介绍

    常用图片填充方式 这里只介绍三个最常用的图片填充方式 UIViewContentModeScaleToFill模式会导致图片变形.例如: UIViewContentModeScaleAspectFit ...

  9. js实现图片滑动显示效果

    js实现图片滑动显示效果 今天用户提出一个需求,要实现一个滑动显示新闻列表的效果,具体就是图片新闻自动滑动显示,鼠标移上去就停止滑动,移开就继续滑动:效果如下: 第一:先用HTML和CSS实现显示,主 ...

随机推荐

  1. C&num;微信公众平台开发—access&lowbar;token的获取存储与更新

    一.什么是access_token? access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token.正常情况下access_token有效期为7200秒,重复获取 ...

  2. 黑客语（Leet）

    黑客语(Leet)   Leet是从网络发展起来的一种文字书写方式.通常将英语中的字母替换为数字和特殊符号.这种方式被很多黑客组织所使用.由于具有隐密性,所以它也广泛被用于密码中.使用Leet书写的密 ...

  3. Codeforces Round &num;135 &lpar;Div&period; 2&rpar;

    A. k-String 统计每个字母出现次数即可. B. Special Offer! Super Price 999 Bourles! 枚举末尾有几个9,注意不要爆掉\(long\ long\)的范 ...

  4. Linq101-Conversion Operators

    using System; using System.Linq; namespace Linq101 { class Conversion { /// <summary> /// This ...

  5. Ubuntu下安装Texmaker的问题与解决方案

    在Ubuntu下安装好了texlive后,为了开发方便,希望再继续安装一个编辑器,用于方便的编辑latex文档. 而texmaker就是一个很好的工具. 问题1, 被安装了早期版本的latex 不管你 ...

  6. SQL Server 事务隔离级别

    一.事务隔离级别控制着事务的如下表现: 读取数据时是否占用锁以及所请求的锁类型. 占用读取锁的时间. 引用其他事务修改的行的读操作是否: 在该行上的排他锁被释放之前阻塞其他事务. 检索在启动语句或事务 ...

  7. profile和bashrc四种的区别

    Linux下profile和bashrc四种的区别 12160阅读 0评论 /etc/profile./etc/bashrc.~/.bash_profile.~/.bashrc很容易混淆,他们之间有什 ...

  8. laravel数据库配置

    1.说明,查看laravel数据库配置 项目名/config/database.php     'default' => env('DB_CONNECTION', 'mysql') 2.数据开发 ...

  9. SVM学习笔记2-拉格朗日对偶

    下面我们抛开1中的问题.介绍拉格朗日对偶.这一篇中的东西都是一些结论,没有证明. 假设我们有这样的问题:$min_{w}$ $f(w)$,使得满足:(1)$g_{i}(w)\leq 0,1\leq i ...

  10. THML DOM &sol; Element 对象操作

    随着Vue等MVVM框架流行,操作DOM已经不想之前那么频繁,因此很多DOM的操作已经陌生,特此回顾HTML中DOM操作 获取Element节点 熟悉的有 通过ID获取,返回element对象    ...

相关文章