Jquery图片滚动，幻灯片-打包二-JavaSript-爱易网页

Jquery图片滚动，幻灯片-打包二

日期：2014-05-16　浏览次数：20369 次

Jquery图片滚动，幻灯片-------------封装二
已经封装好了，主要修改文档加载中传入的类名即可。方便大家使用，以后经常封装一些好的插件给大家用，可以定制一些东西的那种（比如，速度，样式，等等）。

以下第一个是自己封装了，第二个是在csdn一个论坛友的基础上修改封装了。原文（也是我发布的）http://bbs.csdn.net/topics/390414000?page=1#post-394110448

1、图片滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript" src="jquery.min.js"></script>

    <script type="text/javascript">

 $(document).ready(function () {

    Xhun(".a");      //----------------------只需要修改   ”.a"  (就是最大的div的class值这里就行---------------------

});



function Xhun(_box) {

    var box_frame = _box + " div ul";

    var box_div = _box + " div";

    $(_box).find("ul").wrap("<div></div>");    //添加一个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).scrollLeft();     //scrollLeft()是获取对象的水平偏移量

        $(_box).scrollLeft(position + 1);

        if (position >= $(box_frame).width()) { $(_box).scrollLeft(0); }  //判断位移是否大于ul的总长度

    }

    $(_box).mouseleave(function () {

        dd = setInterval(gd, 30);

    }).mouseenter(function () {

        clearInterval(dd);

    });

}



    </script>

    

    <style type="text/css">

        * { margin: 0; padding: 0; }

        ul { list-style: none; }

        li { float: left; margin-left: 10px; width: 100px; }

        img { width: 100px; height: 100px; }

        .a { width: 400px; margin: 0 auto; overflow: hidden; height: 100px; }

    </style&g

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Jquery图片滚动，幻灯片-打包二

相关资料更多>

推荐阅读更多>