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插件第十三个 : 图片批量滚动的封装

图片批量滚动 说明一 ...

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

图片批量滚动

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

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

点击弹出框           点击浮动框架一           点击浮动框架二      ...

jquery 图片滚动插件

一般网站都有图片左右滚动的特效 下面就是jquery图片滚动插件jQuery.fn.imageScroller = function(params){ var p = params || { n...

自编JQuery插件第十二个:水平滚动图片

水平滚动图片效果: .margin_18 { MARGIN-RIGHT: 18px } #runbox { DISPLAY: block; OVERFLOW: hidden; WIDTH...

图片批量滚动

图片批量滚动 说明一 ...

26个功能强大的JQUERY插件

图片弹出,滚动框,伸缩栏,鼠标拖拽….Jquery真是太强大了,如此多的插件和开发者,我们总会找到自己想要的效果。  在这里非常感谢tutorialzine , sohtanaka 开发搜集工作。当...

jquery插件封装:滚动条

jQuery插件封装,感觉颇有技术含量,现提供一个封装的框架,下次封装时候直接拿来可用

Jquery图片滚动插件—BxCarousel

转自:http://www.cnblogs.com/luluping/archive/2010/10/30/1864924.html Jquery图片滚动插件—BxCarousel BxCarou...

jQuery插件-div中滚动图片

(function($){ $.extend($.fn,{ divInit:function(options){ options=$.extend({ picWidth : 500...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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