首页

源码搜藏网

首页 > 网页特效 > 焦点图 >

jQuery手机焦点图切换特效代码

创建时间:2014-07-25 08:21  

jQuery手机焦点图切换特效代码
jQuery手机焦点图切换特效代码
效果预览 立即下载

jQuery手机焦点图切换特效代码jQuery手机焦点图切换特效代码是一款支持触屏滑动切换大图,做微信网站或手机方面的webapp都可以使用到这个代码,有需要的朋友参考下。jQuery鼠标拖动图片切换滑动切换 所属专题:焦点图代码

<script>
(function(d, $){
var scrollPicView = d.getElementById("scroll_pic_view"),
scrollPicViewDiv = d.getElementById("scroll_pic_view_div"),
lis = scrollPicViewDiv.querySelectorAll("li"),
w = scrollPicView.offsetWidth,
len = lis.length;
for(var i=0; i<len; i++){
lis[i].style.width = w+"px";
if(i == len-1){
scrollPicViewDiv.style.width = w * len + "px";
}
}


var scroll_pic_view = new iScroll('scroll_pic_view', { 
snap: true,
momentum: false,
hScrollbar: false,
useTransition: true,
onScrollEnd: function() {
$("#scroll_pic_nav li").removeClass("on").eq(this.currPageX).addClass("on");
//$("#scroll_pic_nav li.on").prev().addClass("left");
//$("#scroll_pic_nav li.on").next().removeClass("left");

var  list=$("#scroll_pic_nav li");
for(var k=0;k<list.length;k++){
if(k<this.currPageX)
$(list[k]).addClass("left");
else
$(list[k]).removeClass("left");
}
}
});
//
var nav_lis = new Array(lis.length);
d.write('<li class="on"><span>1</span></li>');
for(var i=1; i<nav_lis.length; i++){
d.write("<li><span>"+(i+1)+"</span></li>");
}
})(document, $);
</script>

上一篇:jQuery实用淡入淡出幻灯片
下一篇:jQuery鼠标滚轮控制幻灯片切换

相关内容

热门推荐