<!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>
<!--top可以去掉-->
<div class="header">这里你可以放菜单或是logo</div>
<!--top_end-->
<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>
<!--foot可以去掉-->
<div class="copyRight">这里底部行</div>
<!--foot_end-->
<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>
简洁版-手机版网页网站移动触屏全屏满屏左右滚屏翻屏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资源评论
