js swipe 图片滑动控件实现 任意尺寸适用任意屏幕
JS 实现 图片 控件 屏幕 滑动 任意 适用
2023-09-11 14:18:04 时间
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 从性能角度考虑 更优
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 6 <link rel="stylesheet" type="text/css" href="css/layout.css"/> 7 <!-- Link Swiper's CSS --> 8 <link rel="stylesheet" href="css/swiper.min.css"> 9 <!-- Demo styles --> 10 <style> 11 html, body { 12 position: relative; 13 height: 100%; 14 } 15 body { 16 background: #eee; 17 font-family: Helvetica Neue, Helvetica, A 18 font-size: 14px; 19 color:#000; 20 margin: 0; 21 padding: 0; 22 } 23 .swiper-container { 24 width: 100%; 25 } 26 27 .swiper-slide { 28 text-align: center; 29 font-size: 18px; 30 background: #fff; 31 /* Center slide text vertically */ 32 display: -webkit-box; 33 display: -ms-flexbox; 34 display: -webkit-flex; 35 display: flex; 36 -webkit-box-pack: center; 37 -ms-flex-pack: center; 38 -webkit-justify-content: center; 39 justify-content: center; 40 -webkit-box-align: center; 41 -ms-flex-align: center; 42 -webkit-align-items: center; 43 align-items: center; 44 45 } 46 </style> 47 48 <title>倍赚宝首页</title> 49 <script type="text/javascript" src="js/jquery1.9.1.js""></script> 50 <!-- Swiper JS --> 51 <script src="js/swiper.js"></script> 52 53 <script type="text/javascript" src="js/iscroll.js"></script> 54 <script type="text/javascript" src="js/hybrid-1.0.2.js"></script> 55 <script type="text/javascript" src="js/plugins/WinnerFrame.js"></script> 56 <script type="text/javascript"> 57 var leverage={ 58 leverageStock:function(){ 59 window.plugins.winnerFrame.redirectTrade(); 60 }, 61 leverageNew:function(){ 62 window.plugins.winnerFrame.redirectZijin(); 63 }} 64 $(function(){ 65 var imageRealWidth,imageRealHeight; 66 imageRealWidth=localStorage['imageRealWidth']; 67 imageRealHeight=localStorage["imageRealHeight"]; 68 function callSwiper(){ 69 //设置宽高 70 //$(".swiper-container").css("width",localStorage['swipercontainerWidth']); 71 //$(".swiper-container").css("height",localStorage['swipercontainerHeight']); 72 $(".swiper-container").css("height",$(".swiper-container").width()/imageRealWidth*imageRealHeight); 73 //alert("w h"+imageRealWidth+" "+imageRealHeight+", swiper-container w h "+$(".swiper-container").width()+" "+$(".swiper-container").height()); 74 swiper = new Swiper('.swiper-container', { 75 pagination: '.swiper-pagination', 76 paginationClickable: true, 77 spaceBetween: 10, 78 centeredSlides: true, 79 autoplay: 2500, 80 autoplayDisableOnInteraction: false 81 }); 82 } 83 if(imageRealWidth==null||imageRealHeight==null){ 84 var image=new Image(); 85 var swiper; 86 image.src="images/banner01.png"; 87 image.onload=function(){ 88 imageRealWidth=this.width; 89 imageRealHeight=this.height; 90 localStorage['imageRealWidth']= imageRealWidth; // 存储 cookie 91 localStorage['imageRealHeight']= imageRealHeight; // 存储 cookie 92 //存储 container控件宽高 93 localStorage['swipercontainerWidth']=$(".swiper-container").width(); 94 localStorage['swipercontainerHeight']=$(".swiper-container").height(); 95 callSwiper(); 96 }; 97 delete image; 98 }else{ 99 callSwiper(); 100 } 101 102 }) 103 </script> 104 105 </head> 106 107 <body> 108 <article class="header"> 109 <div class="logo"><img src="images/logo.png" width="100" height="34" alt="logo"/> </div> 110 </article> 111 <!-- 112 <div class="banner"> 113 <div class="flex-viewport"> 114 <!-- 改变 -webkit-transform: translate3d(-100px, 0px, 0px), 改变位置 115 <ul class="slides" style="-webkit-transform: translate3d(0px, 0px, 0px);"> 116 <li style="left:0;"><a><img src="images/banner01.png"/></a></li> 117 <li style="left:100%;"><a><img src="images/banner02.png"/></a></li> 118 <li style="left:200%;"><a><img src="images/banner03.png"/></a></li> 119 </ul> 120 </div> 121 </div> 122 123 --> 124 <!-- Swiper --> 125 <div class="swiper-container"> 126 <div class="swiper-wrapper"> 127 <div class="swiper-slide" style="background:url('images/banner01.png');background-repeat:no-repeat;background-size:100%;"></div> 128 <div class="swiper-slide" style="background:url('images/banner02.png');background-repeat:no-repeat;background-size:100%;"></div> 129 <div class="swiper-slide" style="background:url('images/banner03.png');background-repeat:no-repeat;background-size:100%;"></div> 130 </div> 131 <!-- Add Pagination --> 132 <div class="swiper-pagination"></div> 133 134 </div> 135 136 <article class="content am-grid"> 137 <div class="clearfix"> 138 <div class="blockButton blockButtoncg" onclick="leverage.leverageStock()">leverageStock</div> 139 <div class="blockButton blockButtondx" onclick="leverage.leverageNew()">leverageNew</div> 140 </div> 141 <p class="whytitle clearfix"> 142 <span class="line"></span> 143 <span class="title">why choose this</span> 144 <span class="line"></span> 145 </p> 146 <aside class="reasons clearfix"> 147 <div class="circle ycircle am-grid-item"> 148 <div class="icon"></div> 149 <div class="txt">the maximum 1.8</div> 150 </div> 151 <div class="circle rcircle am-grid-item"> 152 <div class="icon"></div> 153 154 <div class="txt">above 2.5 w</div> 155 </div> 156 <div class="circle bcircle am-grid-item"> 157 <div class="icon"></div> 158 <div class="txt">8 percentage</div> 159 </div> 160 </aside> 161 </article> 162 163 164 165 </body> 166 </html>
相关文章
- Js实现图片点击切换与轮播
- Vue.js 开发实践：实现精巧的无限加载与分页功能
- JS框架_(JQuery.js)圆形多选菜单选项
- JS框架_(JQuery.js)网页文字评论弹幕
- destoon开发笔记-JQ+JS实现倒计时功能
- Knockout.Js官网学习(数组observable)
- js-ECMAScript-5：常用的内置对象，数组，date，math，json，正则
- React.js 小书
- js实现登录时记住用户名
- JS实现的表头列头固定页面功能示例
- Js apply方法详解
- JS调用onBackPressed
- QRCode.js：使用 JavaScript 生成二维码
- js实现页面跳转的几种方式
- Atitit. 悬浮窗口的实现 java swing c# .net c++ js html 的实现
- html+css+js实现时钟
- JS：crypto-js实现AES加密解密
- 手写实现 js 中的bind,并实现 softBind
- js实现多个异步任务的串行和并行执行（add/sum）
- js实现图片粘贴上传到服务器并展示
- 【JS高级】js面向对象三大特性之封装—如何创建对象_05
- 原生js实现随机验证码HTMl-JS
- js的sort方法的使用