当前位置:首页 > 网页特效 > 焦点图 >

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

时间:2014-07-25 08:21 来源:互联网 作者:源码搜藏 收藏 推荐

  • 广告推荐
效果预览 立即下载

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>

本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

焦点图下载排行

最新文章