Connect_logo_6.png 退出
前端视频教程 小程序 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码

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

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2018-04-20
基于swiper.js手机触屏滑动全屏幻灯片左右切换代码,带缩略图和左右控制箭头的手机移动端图片轮播插件。

上海快3开奖号码今天 www.y44gu.cn

js代码

<script src="js/swiper.min.js"></script> 
<script>
  	//图片等比例
	galleryTopHeight()
	$(window).resize(function(){
		galleryTopHeight()
	})
	
    var galleryTop = new Swiper('.gallery-top-box .gallery-top', {
	  centeredSlides: true,
	  autoplay:{
		delay:4000,
		disableOnInteraction: false 
	  },
	  slidesPerView: 'auto',
      spaceBetween: 10,
      navigation: {
        nextEl: '.gallery-top-box .swiper-button-next',
        prevEl: '.gallery-top-box .swiper-button-prev',
      },
	  scrollbar: {
        el: '.swiper-scrollbar',
        hide: false,
		draggable: true,
		dragSize:150,
      }
    });
	
	$(".slideshow").click(function(){
		if($(this).hasClass("pauseed")){
			//播放
			$(this).removeClass("pauseed")
			galleryTop.autoplay.start()
		}else{
			//暂停
			$(this).addClass("pauseed")
			galleryTop.autoplay.stop()
			
		}
	})
	
	galleryTop.scrollbar.$el.css({
		"bottom":"0px",
		"background":"none",
		"height":"5px"
	});
	galleryTop.scrollbar.$dragEl.css({
		'background':'rgba(171,171,171,171.6)'
	}); 
	galleryTop.scrollbar.updateSize();
	
    var galleryThumbs = new Swiper('.gallery-thumbs-box .gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 'auto',
      touchRatio: 0.2,
	  navigation: {
        nextEl: '.gallery-thumbs-box .swiper-button-next',
        prevEl: '.gallery-thumbs-box .swiper-button-prev',
      }
    });
	
	galleryTop.controller.control = galleryThumbs;
	
	<!--注意添加objThumbs,objTop对应的索引值1 ~ N -->
	var objThumbs = $(".gallery-thumbs .swiper-wrapper .swiper-slide");
	var objTop = $(".gallery-top .swiper-wrapper .swiper-slide");
	objThumbs.click(function(e){
		var currentId = $(this).attr("data-id");
		for(var i = 0 ; i< objTop.length; i++){
			if($(objTop[i]).attr("data-id") === currentId){
				$(objTop[i-1]).addClass("swiper-slide-prev")
				$(objTop[i-1]).siblings().removeClass("swiper-slide-prev")
				$(objTop[i]).addClass("swiper-slide-active")
				$(objTop[i]).siblings().removeClass("swiper-slide-active")
				$(objTop[i+1]).addClass("swiper-slide-next")
				$(objTop[i+1]).siblings().removeClass("swiper-slide-next")
				e.preventDefault();
				galleryTop.slideTo(i,1000, false);
			}
		}
	})
	
	function galleryTopHeight(){
		//处理图片比例
		var wh = $(window).height();
		var headernav_height = $(".headernav").height()
		var footernav_height = $(".footernav").height()
		var galleryThumbs_height = $(".gallery-thumbs").height()
		var galleryTop_height = wh - galleryThumbs_height - headernav_height - footernav_height - 22
		$(".gallery-top").css("height",galleryTop_height)
		//缩略图
		var galleryThumbs_width = $(window).width() - 60
		$(".gallery-thumbs-box .swiper-container").css("width",galleryThumbs_width)
		//大图
		var galleryTop_width = $(window).width() - 80
		$(".gallery-top-box .swiper-container").css("width",galleryTop_width)
	}

</script>

  • 墨西哥地震与球队进球民众跳跃啥关系?专家:无关 2018-07-14
  • 视频:16小时长效持妆 测YSL墨水气垫限量版 2018-07-14
  • 城口修齐镇开展污水处理厂(站)运行管理工作检查 2018-07-13
  • 做强茶企 告别“大而不强” 2018-07-13
  • 【理上网来辉煌十九大】美国学者关注十九大报告:中国将形成新的共识继续推进改革 2018-07-12
  • 丰瑞祥亮相全球互联网经济大会 探索大数据下金融支付的发展方向 2018-07-11
  • “青城纵马” 2018呼和浩特马拉松7月8日纵情开跑 2018-07-11
  • 收益走高 2018年银行理财产品怎么买? 2018-07-10
  • 粽香传真情 军民一家亲 2018-07-09
  • 江西省第33届“爱鸟周”正式启动 2018-07-08
  • 传媒每周热闻第357期:人民日报社与雄安新区共建文化传媒平台 2018网络媒体新春走基层主题活动启动 2018-07-08
  • 习近平为传统文化“代言” 2018-07-07
  • 陕西特殊药品实现医院备案 2018-07-06
  • 青海:52个客运站卫生间将全面改造 2018-07-06
  • 344| 488| 413| 260| 874| 11| 92| 694| 450| 622|