MyException - 我的异常网
当前位置:我的异常网» JavaScript » Jquery图片滚动,幻灯片-打包二

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

www.myexceptions.net  网友分享于:2013-04-10  浏览:14次
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>
</head>
<body>
    <div class="a">

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有