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

最新推荐文章于 2024-05-03 10:06:59 发布
最新推荐文章于 2024-05-03 10:06:59 发布
阅读量973 收藏 1
点赞数
分类专栏： 批量滚动 滚动图片 文章标签： jquery插件 border function table class javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chinet_bridge/article/details/7393541
版权 
<!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>
做的插件水平还是垂直方向都能滚动
chinet_bridge
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery图片批量上传插件源码
01-20
资源名：jQuery图片批量上传插件源码 资源类型：程序源代码 源码说明：实现图片预览，预览图片移除，任意张数异步上传，上传进度条指示，已选中且上传的图片不会重复上传，且不能移除 使用方法 界面顶部引入IMGUP....
JQuery插件第十三个 : 图片批量滚动的封装
chinet_bridge的专栏
11-22 490
图片批量滚动 说明一 说明二
$ JQuery学习笔记
qq_46063425的博客
06-20 685
$ JQuery学习笔记 一、认识jquery 1.jquery中的顶级对象是 $ 或者 jQuery 用于 获取jquery对象 入口函数（页面加载事件） 高级功能 注意：jquery中的$和jQuery关键字本身为同一对象 $可以认为就是一个构造函数 可以使用 $(选择器) 的方式调用 $ ,得到一个对象，在对象上就可以调用$的实例方法 也可以使用 $.方法名 调用静态方法。 比如遍历数组对象的 $.each() 相当 for循环
node 压缩图片_推荐10个常用的图片处理小帮手（下）「值得收藏」
weixin_39523835的博客
10-25 430
作者： semlinker转发链接：https://mp.weixin.qq.com/s/i3ynTtPJOECoAYfqHFoo3Q前言本文给小伙伴们隆重介绍用于图片处理的十个 「“小帮手”」，他们各个身怀绝技，拥有模糊、压缩、裁剪、旋转、合成、比对等技能。相信认识他们之后，你将能够轻松应对大多数的图片处理场景。该章节你将会学到以下知识：如何区分图片的类型(可文件后缀名)；如何获取图片的尺寸(可...
JQuery
qq_40589140的博客
05-10 402
一. 什么是jQuery： 1. 什么是: (1). 第三方开发的: 必须先下载，才能用 (2). 执行DOM操作的: jquery还是在执行DOM 5件事，增删改查+事件绑定。学习jq，还是在重复学习DOM。 (3). 极简化的: jquery是对DOM的终极简化。 (4). 函数库: jq中使用函数来解决一切问题！没有属性！每一项操作，都要加()调用函数完成！ 2. 为什么: 2个 (1). 简单: (2). 解决了大部分浏览器兼容性问题 3.何时: 几乎所有旧的web项目都是用jq做的 4.
jQuery&ES6&Bootstrap
heywei_的博客
06-01 1429
前端 jQuery jQuery介绍 jQuery由美国人John Resig（约翰·莱西格）于2006年创建 jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装 它的设计思想是write less,do more jQuery能做什么? 1、访问和操作DOM元素 2、控制页面样式 3、对页面事件进行处理 4、扩展新的jQuery插件 5、与Ajax技术完美结合 6、jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率 7、jQu
jQuery 1.3 API 参考文档中文版
01-30 1853
核心 jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用
javascript实现图片轮播_Node.js实现将文字与图片合成技巧
weixin_39977642的博客
11-22 956
作者：诀九 前端名狮转发链接：https://mp.weixin.qq.com/s/BMg8bFUwa4gmm6v2acAe7Q前言在头条发布文章时，需要为文章配置一个封面图片。我的常规做法就是网上搜一张图片，然后利用 PhotoShop，在图片上加入文章标题，然后导出生成图片，如下图所示：上图实际就是在一张背景图中，加入了一行文字。操作步骤简单，但是每次都需要打开PhotoShop修改文字，感觉...
iOS常用三方库、插件、知名技术博客、常用开发工具使用介绍等等（Objective-C版本）
热门推荐
YLGWHYH的专栏
08-11 3万+
TimLiu-iOS Swift版本点击这里 Objective-C版本点击这里 欢迎加入QQ群交流: 594119878 更新日期：2018-4-11 About A curated list of iOS objective-C ecosystem. How to Use Simply press command + F + "xxx@" to search ...
jquery中文文档
05-15 2636
jQuery 1.3 API 参考文档中文版 核心 jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者
jQuery多张图片批量上传插件
06-24
jQuery多张图片批量上传插件是一款可以选择多张图片同时上传，不要的还可以移除。
jQuery支持预览多个文件_多张图片批量上传插件
05-18
jQuery支持预览多个文件_多张图片批量上传插件jQuery支持预览多个文件_多张图片批量上传插件jQuery支持预览多个文件_多张图片批量上传插件
Jquery jcarousel插件应用实用：横向无缝图片滚动
05-12
内容索引:脚本资源,jQuery,图片滚动,jcarousel,Jquery插件　Jquery jcarousel插件应用实用：横向无缝的图片滚动，两端带左右控制按钮，需要鼠标点击按钮才会滚动，点一下滚动一下，演示文档虽然是HTML格式，但由代码...
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
01-19
本文实例讲述了jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法。分享给大家供大家参考。具体如下： 这里介绍jQuery图片左右拖拽特效，无滚动条，将多张图片组合在一起形成的效果，插件使用的是jquery....
JQuery插件第三十一个：按钮点击换图片效果
chinet_bridge的专栏
03-26 2261
UL { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 100%; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM
自编JQuery插件第十二个:水平滚动图片
chinet_bridge的专栏
11-13 705
水平滚动图片效果: <SCRIPT language=javascript src="jquery-1.6.js" type=text/javascript> .margin_18 { MARGIN-RIGHT: 18px } #runbox { DISPLAY: block; OVERFLOW: hidden; WIDTH: 618px; HEIGHT: 87px } #runbo
JQ插件第四十九:图片滑动轮播
chinet_bridge的专栏
12-06 666
(function($) { $.fn.slide = function(option) { option = option || {}; var defaultOption = { W: $(window).width(), F: 5500, T: null,
基于Springboot的家具网站
最新发布
趙兴晨的博客
05-03 576
本文介绍了一款基于现代Web技术构建的家具网站，旨在通过互联网技术优化家具产品的展示与销售，提高用户的购物体验，同时为家具制造商和零售商提供一个高效的在线销售平台。本研究的主要目的是设计并实现一个高效、易用的家具网站，通过系统化的产品展示流程和智能化的购物功能，提升家具产品的在线销售效率和管理水平。本研究通过设计和实现家具网站，有效地解决了传统家具销售中的展示局限性和购物效率低下的问题，提高了家具产品的在线销售效率和用户的购物体验，并为相关领域的研究和实践提供了有益的参考。
jQuery 批量下载多个网络图片
05-28
可以使用jQuery的ajax方法和HTML5的File API来实现批量下载多个网络图片。 首先，你需要定义一个数组来存储要下载的图片的URL。然后，使用循环语句遍历这个数组，针对每个URL，使用jQuery的ajax方法向服务器发送...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值