var HomeDivView = {// 多图滑动
mySwiper : new Map(),
addSwiper : function(id) {
debugger;
if (HomeDivView.mySwiper.containsKey(id)) {
var swiper = HomeDivView.mySwiper.get(id);
// swiper.destroy(false);
swiper.reInit();
swiper.resizeFix();
HomeDivView.showSlideDesc(swiper);
return;
}else {
}
var swiper = new Swiper("#" + id, {
slidesPerView :7,
loop : false,
visibilityFullFit : true,
// Enable 3D Flow
tdFlow : {
rotate : 0,
stretch : 0,
depth : 520,
modifier : 0,
shadows : true
},
onTouchEnd : function(swiper) {
HomeDivView.showSlideDesc(swiper);
},
onSlideClick : function(swiper) {
debugger;
var obj = swiper.clickedSlide;
var phone = $(obj).find("a[name=goPhoneDetail]");
var mktResID = $(phone).attr("mktResID");
var mktResName= $(phone).attr("mktResName");
var mktResPrice= $(phone).attr("mktResPrice");
var pictureUrl= $(phone).attr("pictureUrl");
queryPhoneDetail(mktResID,mktResName,mktResPrice,pictureUrl,"phoneIndex","phonePage");
},
onSlideTouch : function(swiper) {
debugger;
if (swiper.clickedSlideIndex == 2
|| swiper.clickedSlideIndex == 3) {
var activeIndex = swiper.activeIndex;
if ((activeIndex + 1) == swiper.clickedSlideIndex) {
debugger;
var obj = swiper.clickedSlide;
var phone = $(obj).find("a[name=goPhoneDetail]");
var mktResID = $(phone).attr("mktResID");
var mktResName= $(phone).attr("mktResName");
var mktResPrice= $(phone).attr("mktResPrice");
var pictureUrl= $(phone).attr("pictureUrl");
queryPhoneDetail(mktResID,mktResName,mktResPrice,pictureUrl,"phoneIndex","phonePage");
}
}
}
});
HomeDivView.showSlideDesc(swiper);
HomeDivView.mySwiper.put(id, swiper);
},
showSlideDesc : function(swiper) {// 显示终端下面说明
console.log("----"+swiper);
}
};
分享到:
相关推荐
idangerous.swiper.min.js添加轮播图滑动事件,引用使用
idangerous.swiper-2.1.min.js,PC端可以用,解决ie8兼容问题
idangerous.swiper.css文件下载;idangerous.swiper.css文件下载;
使用swiper实现的可以滑动的选项卡,可以适合手机web的开发
idangerous.swiper.scrollbar-2.1.js添加上下滚动列表
Jquery触屏滑动选项卡切换代码是一款jquery idangerous.swiper.js制作的触屏滑动切换代码。
基于swiper.js手机触屏滑动全屏幻灯片左右切换代码,带缩略图和左右控制箭头的手机移动端图片轮播插件。
毫克刷 响应式html内容滑动器/滑块,带有基于奇妙的idangerous.swiper的全屏背景图像。 配置 1-安装插件2-配置幻灯片:添加文字和图片3-在您要显示滑块的页面中添加简码:[mg_swiper]
主要为大家详细介绍了移动端触屏幻灯片图片切换插件idangerous swiper.js的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
React危险的雨刷iDangerous Swiper的包装
基于swiper.js实现手机触屏滑动切换图片特效代码,也支持PC端鼠标滚动自动切换图片特效,支持向上 或者向下画的图片,效果还是不错的,非常的流畅,如果再加上向下的箭头会更加的人性化,当前HTML5 场景应用非常的...
基于vue移动端项目,修改后的swiper.animate.min.js文件,因为官方源码不支持 AMD/CMD/UMD 用法,具体请查看我博客相关文章
swiper.js手机触屏滑动选项卡标签切换代码一款基于swiper.js实现的自定义tab选项卡标签切换的手机触屏滑动选项卡切换代码,左右平滑动画滚动切换效果。
jQuery+swiper.js实现的手机触屏滑动切换幻灯片效果代码.zip
swiper-bundle.min.js
$(".gallery-thumbs-box .swiper-container").css("width",galleryThumbs_width) //大图 var galleryTop_width = $(window).width() - 80 $(".gallery-top-box .swiper-container").css("width",galleryTop_width...
swiper.animate.js是swiper提供的swiper结合animate的工具,然而他在vue中使用的话需要做一些修改.只是做了部分修改能使用了就可以了没有做什么大神的工厂模式各种设计,也没那能力.哈哈哈哈,反正能用,我是能用.