JQuery插件第三十个 : 图片批量滚动的封装功能增强版

原创 2012年03月26日 08:53:58
<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>图片批量滚动</title>
</head>
<body>
    <div class="box" style='overflow: hidden; height: 120px; width: 700px; color: #ff0000'>
        <table align="left" cellpadding="0" cellspace="0" border="0">
            <tr>
                <td id="pic01" class="pic" valign="top">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <a href="http://www.fankelipinka.com" target="_blank">
                                    <img border="0" src="1.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明一</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.wangtx.com" target="_blank">
                                    <img border="0" src="2.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明二</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.yamaxun.org" target="_blank">
                                    <img border="0" src="3.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明三</b>
                                </center>
                            </td>
                            <td>
                                <a href="http://www.cnwenger.com" target="_blank">
                                    <img border="0" src="4.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明四</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.pc555.com" target="_blank">
                                    <img border="0" src="5.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明五</b>
                                </center>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <div class="box" style='overflow: hidden; height: 120px; width: 700px; color: #ff0000'>
        <table align="left" cellpadding="0" cellspace="0" border="0">
            <tr>
                <td id="pic11" class="pic" valign="top">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <a href="http://www.fankelipinka.com" target="_blank">
                                    <img border="0" src="5.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明一</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.wangtx.com" target="_blank">
                                    <img border="0" src="4.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明二</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.yamaxun.org" target="_blank">
                                    <img border="0" src="3.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明三</b>
                                </center>
                            </td>
                            <td>
                                <a href="http://www.cnwenger.com" target="_blank">
                                    <img border="0" src="2.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明四</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.pc555.com" target="_blank">
                                    <img border="0" src="1.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明五</b>
                                </center>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <div class="box" style='overflow: hidden; height: 120px; width: 700px; color: #ff0000'>
        <table align="left" cellpadding="0" cellspace="0" border="0">
            <tr>
                <td id="pic21" class="pic" valign="top">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <a href="http://www.fankelipinka.com" target="_blank">
                                    <img border="0" src="4.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明一</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.wangtx.com" target="_blank">
                                    <img border="0" src="5.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明二</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.yamaxun.org" target="_blank">
                                    <img border="0" src="2.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明三</b>
                                </center>
                            </td>
                            <td>
                                <a href="http://www.cnwenger.com" target="_blank">
                                    <img border="0" src="3.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明四</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.pc555.com" target="_blank">
                                    <img border="0" src="1.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明五</b>
                                </center>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <div class="vbox" style='overflow: hidden; height:500px; width:150px; color: #ff0000'>
        <table align="left" cellpadding="0" cellspace="0" border="0">
            <tr>
                <td valign="top">
                    <table border="0" cellpadding="0" cellspacing="0" class="pic" >
                        <tr>
                            <td>
                                <a href="http://www.fankelipinka.com" target="_blank">
                                    <img border="0" src="4.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明一</b>
                                </center>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="http://www.wangtx.com" target="_blank">
                                    <img border="0" src="5.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明二</b>
                                </center>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="http://www.yamaxun.org" target="_blank">
                                    <img border="0" src="2.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明三</b>
                                </center>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="http://www.cnwenger.com" target="_blank">
                                    <img border="0" src="3.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明四</b>
                                </center>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="http://www.pc555.com" target="_blank">
                                    <img border="0" src="1.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明五</b>
                                </center>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript" language="javascript" src="jquery-1.6.js"></script>

    <script type="text/javascript" language="javascript">
(function ($) { 
  $.fn.runPic = function(options){
        var defaults = {  speed:10,picClass:"pic",c:0}
        var opts = $.extend(defaults, options);
        var css='.'+opts.picClass;
        var ma = (opts.c != 1)?function(b){
            var pic=$(css,b).get(0);
            if(pic.offsetWidth-b.scrollLeft<=0)
              b.scrollLeft-=pic.offsetWidth
            else{
              b.scrollLeft++
            }
        }:function(b){
            var pic=$(css,b).get(0);
            if(pic.offsetHeight-b.scrollTop<=0)
              b.scrollTop-=pic.offsetHeight
            else{
              b.scrollTop++
            }
        }
      this.each(function(){
            var b=this;
            var pic=$(css,b);pic.after(pic.clone());
            var M=setInterval(function(){ma(b);},opts.speed);
            $(b).mouseover(function() {
            clearInterval(M)}).mouseout(function() { 
            M=setInterval(function(){ma(b);
            }
            ,opts.speed
            )});
      });
  };
})(jQuery);
      
$(function(){
    $(".box").runPic({speed:18});//水平滚动    
    $(".vbox").runPic({speed:18,c:1});//纵向滚动
});  
    </script>

</body>
</html>

做的插件水平还是垂直方向都能滚动

JQuery插件第十三个 : 图片批量滚动的封装

图片批量滚动 说明一 ...
  • chinet_bridge
  • chinet_bridge
  • 2011年11月22日 06:44
  • 362

封装自己的jquery插件

接下来我们一起来写个高亮的jqury插件 1.定一个闭包区域,防止插件"污染" //闭包限定命名空间 (function ($) { })(window.jQuery); 2...
  • u010963051
  • u010963051
  • 2017年01月10日 21:32
  • 1968

jquery插件封装

扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱。 入门 编写一个jQuery插件开始于给jQuer...
  • qq_19244423
  • qq_19244423
  • 2015年07月09日 10:22
  • 12988

jQuery插件原理及封装

小飞有话说 2016-12-14 11:18 我们知道jQ插件,是通过$.fn来进行拓展的,但是为什么这样能拓展,可能就没多少人知道了。其实我们简单测试一下就明白了: console.lo...
  • u011277123
  • u011277123
  • 2016年12月15日 08:53
  • 5642

图片批量滚动

图片批量滚动 说明一 ...
  • chinet_bridge
  • chinet_bridge
  • 2011年11月17日 07:41
  • 235

JQuery插件第十五个:弹出框功能增强版

点击弹出框           点击浮动框架一           点击浮动框架二           (function ($) {   $.fn.showDialog = funct...
  • chinet_bridge
  • chinet_bridge
  • 2011年12月10日 08:29
  • 1940

RequireJS 构造方法以及封装成jQuery插件

scrollto.js// 定义模块 define(['jquery'], function($){ // 构造函数(方法名跟文件名相同,首字母要大些) function ScrollT...
  • xinyflove
  • xinyflove
  • 2015年07月09日 16:46
  • 1314

Microsoft Office Plus 2016专业增强版激活

原文网址:0ffoce 2016专业增强版激活非常好用,以后不用上网到处找秘钥了,直接用激活工具省事多了...
  • weixin_36340947
  • weixin_36340947
  • 2017年07月30日 09:42
  • 1208

JQuery插件第四十个:批量选择检查

(function($) { $.fn.confirmCheckbox = function(options) { var defaults = { ...
  • chinet_bridge
  • chinet_bridge
  • 2014年04月17日 12:54
  • 735

图片间断滚动---jQuery插件bxCarousel

BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: Ø  可以指定显示的元素数 Ø  可以指定每次滚动元素数 Ø  自动播放模式 Ø  前一张/后一张按钮控制图片流动...
  • li_shanshan_ok
  • li_shanshan_ok
  • 2014年03月13日 19:19
  • 359
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery插件第三十个 : 图片批量滚动的封装功能增强版
举报原因:
原因补充:

(最多只允许输入30个字)