您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 焦点图 >

    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>

    jQuery手机焦点图切换特效代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/jiaodiantu/9856.html 源码搜藏承诺:本站所有资源无病毒,无弹窗,无干扰链接!