swiper.js手机触屏滑动图片幻灯片切换代码



113 451 151



特效描述:swiper.js 手机触屏 滑动图片 幻灯片切换,适配各种尺寸:swiper触屏滑动图片幻灯片,手机幻灯片切换

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>

3. HTML代码

<div style="max-width:640px; margin:0 auto;">
<div class="swiper-container">
  <div class="swiper-wrapper">
  <div class="swiper-slide"><img src="images/zhiling1.jpg"  ></div>
    <div class="swiper-slide"><img src="images/zhiling2.jpg"  ></div>
    <div class="swiper-slide"><img src="images/zhiling3.jpg"  ></div>
    <div class="swiper-slide"><img src="images/zhiling4.jpg"  ></div>
    <div class="swiper-slide"><img src="images/zhiling5.jpg"  ></div>
    <div class="swiper-slide"><img src="images/zhiling6.jpg"  ></div>
    <div class="swiper-slide"><img src="images/zhiling7.jpg"  ></div>
  </div>
</div>
</div>
<script type = "text/javascript">
function fixPagesHeight() {
	$('.swiper-slide,.swiper-container').css({
		height: $(window).height(),
	})
}
$(window).on('resize', function() {
	fixPagesHeight();
})
fixPagesHeight();
var mySwiper = new Swiper('.swiper-container', {
    direction: 'vertical',
	mousewheelControl: true,
	watchSlidesProgress: true,
	onInit: function(swiper) {
		swiper.myactive = 0;
	},
	onProgress: function(swiper) {
		for (var i = 0; i < swiper.slides.length; i++) {
			var slide = swiper.slides[i];
			var progress = slide.progress;
			var translate, boxShadow;
			translate = progress * swiper.height * 0.8;
			scale = 1 - Math.min(Math.abs(progress * 0.2), 1);
			boxShadowOpacity = 0;
			slide.style.boxShadow = '0px 0px 10px rgba(0,0,0,' + boxShadowOpacity + ')';
			if (i == swiper.myactive) {
				es = slide.style;
				es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,' + (translate) + 'px,0) scale(' + scale + ')';
				es.zIndex=0;
			}else{
				es = slide.style;
				es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform ='';
				es.zIndex=1;
			}
		}
	},
	onTransitionEnd: function(swiper, speed) {
		for (var i = 0; i < swiper.slides.length; i++) {
		//	es = swiper.slides[i].style;
		//	es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = '';
		//	swiper.slides[i].style.zIndex = Math.abs(swiper.slides[i].progress);
		}
		swiper.myactive = swiper.activeIndex;
	},
	onSetTransition: function(swiper, speed) {
		for (var i = 0; i < swiper.slides.length; i++) {
			//if (i == swiper.myactive) {
				es = swiper.slides[i].style;
				es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';
			//}
		}
	}
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字叠加 滑动导航菜单 导航切换 图片叠加 滑动选项卡切换 图片滑动 图片切换 文字滑动 文字切换 滑动手风琴 背景切换 滑动星星打分 手风琴 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滑动滑过 滚动切换 滑动选项卡切换 叠加浮动层 选项卡切换 滑动手风琴 重叠层叠叠加

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到