手机版网页网站移动触屏全屏满屏左右滚屏翻屏swiper实现-全屏焦点图幻灯片100%宽和高，可以电脑及手机通用资源-CSDN文库

共7个文件

jpg：3个

js：2个

html：1个

需积分: 9 96 浏览量 2018-11-25 22:13:38 上传评论 1 收藏 1.14MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

简洁版-手机版网页网站移动触屏全屏满屏左右滚屏翻屏swiper实现-全屏焦点图幻灯片100%宽和高.rar （7个子文件）

swiper.min.js 94KB

201811199185188.jpg 442KB

jquery-1.12.3.min.js 95KB

index.html 4KB

swiper.min.css 17KB

2018111992051631.jpg 505KB

201811199230203.jpg 193KB

<!DOCTYPE html> <html> <head lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <TITLE>手机版网页网站移动触屏全屏满屏左右滚屏翻屏swiper实现-全屏焦点图幻灯片100%宽和高</TITLE> <LINK href="swiper.min.css" type=text/css rel=stylesheet /> <style> *{ margin: 0; padding: 0; } html, body{ height: 100%; } .swiper-container{ height: 100%; } .slide1{ background-color: red; } .slide2{ background-color: blue; } .slide3{ background-color: green; } /*top*/ .header{ width: 100%; height: 77px; position: absolute; top: 0; left: 0; background: rgba(0,0,0, .4); z-index: 100; } .copyRight{ width: calc(100% - 80px); position: absolute; bottom:23px; right: 80px; text-align: right; z-index: 2; color: #fff; font-size: 14px; } /*给整屏加上一个灰色透明背景在图片上*/ .index-img-cover{ width: 100%; height: 100%; background: rgba(0,0,0, .4); position: absolute; top: 0; left: 0; z-index: 49; } /*背景end*/ /*下面这句主要用来判断浏览器宽度，图片必须1920*880让图片等比例缩放，这样在手机端效果就极好，自动居中显示图片中间部分*/ .swiper-container1{width: 100%;} .swiper-slide{ overflow: hidden; } /*下面是让图片出现时由大变小的特效*/ .swiper-slide img{ transform: scale(2); transition: all 1.5s; -moz-transition: all 1.5s; /* Firefox 4 */ -webkit-transition: all 1.5s; /* Safari 和 Chrome */ -o-transition: all 1.5; /* Opera */ -ms-transform:scale(2); /* IE 9 */ -moz-transform:scale(2); /* Firefox */ -webkit-transform:scale(2); /* Safari 和 Chrome */ -o-transform:scale(2); /* Opera */ } .swiper-slide.swiper-slide-active img{ transform: scale(1); -ms-transform:scale(1); /* IE 9 */ -moz-transform:scale(1); /* Firefox */ -webkit-transform:scale(1); /* Safari 和 Chrome */ -o-transform:scale(1); /* Opera */ } /*图片由大变小的特效end*/ .img01{ /*width: 1920px;*/ height: 100%; position: absolute; left: 0; top: 0; /*margin-left: -960px;*/ } </style> </head> <body>  <div class="header">这里你可以放菜单或是logo</div>  <div class="swiper-container swiper-container1"> <div class="swiper-wrapper"> <div class="swiper-slide slide1"><img class="img01" src="201811199230203.jpg" height="100%"/><div class="index-img-cover"></div></div> <div class="swiper-slide slide2"><img class="img01" src="201811199185188.jpg" height="100%"/><div class="index-img-cover"></div></div> <div class="swiper-slide slide3"><img class="img01" src="2018111992051631.jpg" height="100%"/><div class="index-img-cover"></div></div> </div>  <div class="swiper-pagination"></div> </div>  <div class="copyRight">这里底部行</div>  <script src="jquery-1.12.3.min.js"></script> <script src="swiper.min.js"></script> <script type="text/javascript"> //设置满屏图片等比例显示，用于不同显示器和手机端效果 $(function(){ setSize(); $(window).resize(function(){ setSize(); }); function setSize(){ var innerHeight = parseFloat($(window).innerHeight()); var innerWidth = parseFloat($(window).innerWidth()); var imgRate = 1920/880;//图片原始比例 var rate = innerWidth / innerHeight; $('.swiper-container1').css('height',innerHeight); if( imgRate <= rate){ $('.img01').css('margin-left',0 ); $('.img01').height('auto'); var imgHeight = parseFloat( $('.img01').height()) ; }else{ $('.img01').height(innerHeight+'px'); $('.img01').width(imgRate*innerHeight+'px'); $('.img01').css('margin-left',-(imgRate*innerHeight - innerWidth)/2+'px' ); } } }); //下面是Swiper动画所需 var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', loop: true, autoplay : 3000, autoplayDisableOnInteraction : false, speed:1000, // 如果需要分页器 pagination: '.swiper-pagination', paginationClickable :true, }); </script> </body> </html>

评论收藏

内容反馈