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

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量490 收藏
点赞数
分类专栏： 批量滚动 滚动图片 文章标签： jquery插件 border function class javascript table 
<!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>
<script type="text/javascript" language="javascript" src="jquery-1.6.js" ></script>
<script type="text/javascript" language="javascript" src="jQuery.runPic.js" ></script>
</body>
</html>

 jQuery.runPic.js:

(function ($) { 
  $.fn.runPic = function(options){
      var defaults = {  speed:10,picClass:"pic",ma:function(b){
                              var pic=$('.'+this.picClass,b).get(0);
                              if(pic.offsetWidth-b.scrollLeft<=0)
                                  b.scrollLeft-=pic.offsetWidth
                              else{
                                  b.scrollLeft++
                              }
                          }
                     }
      var opts = $.extend(defaults, options);
      this.each(function(){
            var b=this;
            var pic=$('.'+opts.picClass,b);pic.after(pic.clone());
            var M=setInterval(function(){opts.ma(b);},opts.speed);
            $(b).mouseover(function() {clearInterval(M)}).mouseout(function() {M=setInterval(function(){opts.ma(b);},opts.speed)});
      });
  };
})(jQuery);
      
$(function(){
    $(".box").runPic({speed:18});
});



 

chinet_bridge
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery同时展示多张图片+定时向左单张滚动+前后箭头插件..
05-25
jQuery插件，同时展示多张图片，定时滚动，并有左右箭头用于点击控制图片滚动。测试兼容到了IE8+，chrome49.0+,firefox45.0+。应该可以兼容所有现代浏览器。对代码进行了详细的注释，对新手的学习可能有些帮助。有问题可以联系我
jquery单击单张焦点显示相册列表代码.zip
07-04
jquery单击单张焦点显示相册列表代码
jquery实例-多张图片无缝滚动实现
热门推荐
小哲的专栏
08-23 1万+
：http://blog.zxtms.net/blog/WorkPace/Jquery/jquerySider/sider.html 演示效果
使用jquery实现的漂亮的滚动图片
三级小野怪的专栏
11-17 5045
应客户的要求实现一个滚动图片的效果，使用javascript+css从0开始还是有一定难度的。但是我们有万能的互联网，从网上找了一下，很多这样的列子，于是找了一个稍加修改就达到了客户的要求。 首先看一下效果图：   下载地址   下面贴一下主要的代码： 水平滚动 <img src="jt.gif" width="17" height=
jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
z69183787的专栏
03-10 6797
以下代码，运行后，需要刷新下，才能加载jquery,要不然看不到效果。 1、单行滚动效果 无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li
jQuery图片批量上传插件源码
01-20
资源名：jQuery图片批量上传插件源码 资源类型：程序源代码 源码说明：实现图片预览，预览图片移除，任意张数异步上传，上传进度条指示，已选中且上传的图片不会重复上传，且不能移除 使用方法 界面顶部引入IMGUP....
jQuery支持预览多个文件_多张图片批量上传插件
05-18
jQuery支持预览多个文件_多张图片批量上传插件jQuery支持预览多个文件_多张图片批量上传插件jQuery支持预览多个文件_多张图片批量上传插件
Jquery jcarousel插件应用实用：横向无缝图片滚动
05-12
内容索引:脚本资源,jQuery,图片滚动,jcarousel,Jquery插件　Jquery jcarousel插件应用实用：横向无缝的图片滚动，两端带左右控制按钮，需要鼠标点击按钮才会滚动，点一下滚动一下，演示文档虽然是HTML格式，但由代码...
jQuery多张图片批量上传插件
06-24
jQuery多张图片批量上传插件是一款可以选择多张图片同时上传，不要的还可以移除。
jQuery支持拖拽图片上传的图片批量上传插件.zip
07-11
jQuery支持拖拽图片上传的图片批量上传插件
jquery图片滚动插件制作焦点图片滚动或列表图片滚动
wxlovezyd的博客
07-15 398
这次我们来说说网页上的Banner， 当前流行的网站和网页上面几乎都有Banner，Banner俗话说就是一个网站和网页的中心横幅。Banner主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心，一个好的Banner可以更好的提升用户的体验。 css样式 style type="text/css"> *{ margin: 0px;padding: 0px } #ba
自己写的一个Jquery图片滚动插件
weixin_34051201的博客
04-29 149
2019独角兽企业重金招聘Python工程师标准>>> ...
10多个 jQuery 图片滚动效果插件
weixin_34390105的博客
03-11 173
今天我们为大家收集了10+个jQuery图片滚动插件，希望对您的日常工作会有很大的帮助，在页面的最后奉献的是用jQuery插件实现图片滚动的几个站点，希望您会喜欢！！ 1、jCarousel 这款jQuery图片滚动插件用的人很多，功能上颇为强大，你可以控制是水平滚动还是垂直滚动。 2、jCarousel Lite 这款插件优势在于小巧，只有2K的js，...
10款很好用的 jQuery 图片滚动插件
weixin_33896726的博客
07-06 316
jQuery 作为最流行的 JavaScript 框架，使用简单灵活，同时还有许多优秀的插件可供使用。其中最令人印象深刻的应用之一就是各种很酷的图片效果，它可以让的网站更具吸引力。这里收集了10款很好用的 jQuery 图片滚动插件分享给大家。 1、Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件，有独立的 jQuery 插件和 WordPress 插件两个版本。目前下载...
JQuery插件第三十个 : 图片批量滚动的封装功能增强版
chinet_bridge的专栏
03-26 972
图片批量滚动
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 340
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1005
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 508
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
jQuery 批量下载多个网络图片
05-28
可以使用jQuery的ajax方法和HTML5的File API来实现批量下载多个网络图片。 首先，你需要定义一个数组来存储要下载的图片的URL。然后，使用循环语句遍历这个数组，针对每个URL，使用jQuery的ajax方法向服务器发送...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值