首頁 >web前端 >js教程 >Jquery圖片滾動與幻燈片的實例代碼_jquery

Jquery圖片滾動與幻燈片的實例代碼_jquery

WBOY
WBOY原創
2016-05-16 17:38:00847瀏覽

1、圖片捲動

複製代碼 代碼如下:

代碼如下:



   
   
   
");    //新增一個div,以控制偏移量
    $(box_div).append($(box_frame).clone());   //複製一個ul並新增至div中,為了實現無縫循環
 $(box_div).append($(box_frame).clone());   //複製一個ul並加入div中,為了實現無縫循環
    var li_size = $ (_box).find("li").size();   //取得li的數量    var li_width = $(box_frame).children("li").width();  //取得li的寬度

    var box_div_width = $(box_div).width(li_size * li_width * 5);  //設定div的寬度

    $(box_frame).css("float", "left") 

    var dd = setInterval(gd, 30);
    function gd() {
        var position = $(_box).        var position = $(_box)。 🎜>        $(_box).scrollLeft(position 1);
        if (position >= $(box_frame).width()) { $(__box).scroll(_box);總長
    }
    $(_box).mouseleave(function () {
        dd = setInterval(  clearInterval(dd );
    });
}
   


   


   

       
複製程式碼


程式碼如下:





   
    幻灯片切换
   
   
");
 $(cls+" div").attr("class","iframe");
    var li = $(cls).find("li").size();//统计多少张图片
    var li_width = $(cls).find("li").width(); //获取li的宽度
    $(cls + " div").children("ul").width(li_width * li);//设置宽度,使图片排成一排
    var s = "
    ";//生成li的按钮
        for (var i = 0; i         s += "
  • " + (i + 1) + "
  • ";
        }
        s += "
";
    $(s).appendTo($(cls));//生成按钮结束,并添加到最大div里面
    var _i = 0;//当前的编号
    $(cls).find(".button li").each(function (i) {
        //生成按钮点击事件
        $(this).click(function () {
            _i = i;
            $(this).attr("class", "on").siblings().removeAttr("class");//设置class,没必要再多加一个off
            $(cls + " div").animate({ scrollLeft: i * li_width }, "slow");//图片移动
        });
    }).eq(0).click();
    function tt() {//定时器函数
        _i++;
        _i = _i % li;
        $(cls).find(".button li").eq(_i).click();//自动点击切换图片
    }
    var t = setInterval(tt, 3000);//定时器
    $(cls).hover(function () {
        clearInterval(t);//鼠标经过清除定时器,离开时又触发
    }, function () {
        t = setInterval(tt, 3000);
    })
}
   
   

 

   


          ">
                                 " width="280" height="280" alt="Jquery圖片滾動與幻燈片的實例代碼_jquery" //>;  

  •                                
                       
                             

  •                    
  • 陳述:
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn