支持同一页面多次使用的jQuery插件

插件下载： http://ethanzhu.github.com/jq.imageShown/

创新互联是一家专业提供宝坻企业网站建设,专注与成都网站建设、成都网站设计、H5高端网站建设、小程序制作等业务。10年已为宝坻众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

演示Demo : http://ethanzhu.github.com/jq.imageShown/Demo.html

演示的Demo中主要提供了几家视屏网站的广告示例，（搜狐奇艺迅雷 QQ视屏）

更新 1.2版本删除回调函数的控制台输出调试，因为在IE6下没有控制台会造成插件出错，完成build功能。提示信息按钮支持多个，此版本为***的稳定版。

近期将会提供更加详细的data书写格式说明，build时html格式说明，详细的options参数说明。补充内容类型的切换展示案例。

Introduction:

jquery imageShown 插件可以完成多种形式的内容轮显切换，所有我提供的Demo中虽然都是导航带动的轮显图片，但是它还能完成内容的切换，即可以完成Tab功能，单纯的图片轮显功能，新闻信息的轮显。也就是说这个插件在使用合理参数的配合下可以显示任何形式的内容。

此插件可以在上下左右四个方向上显示导航，背景滑动动画可以独立设置，播放区域动画可以独立设置，每次进入显示区域导航数量可以独立设置，如果设置错误或者设置不合理会被插件内部重置。提示信息是否显示，以及显示动画可以独立设置。具体请参考Demo相关内容。

注：在使用Tab功能时需要设置 pContent为 content 并且由于由于显示区域已经被固定大小，所以针对未知大小的内容请在callback函数中处理。

插件内部已经对请求的资源是否存在做了判断，例如出现错误你可以直接显示参数中你提供默认显示信息，同时你也可以在callback函数中对这个错误区域进行处理。callback函数你可以接收回传的参数。
回传参数的说明：

     
 
 
      
  
  id //当前Dom的ID，在你页面未设置ID的情况下这个ID会是插件自动生成的唯一值。  
      
  
  
      
  
  total //轮显内容的数量  
      
  
  
      
  
  /* 
      
  
  当前选择的***个内容区域，当你loop设置为false时此内容就是页面Dom中的index值，当loop为true时导航区域需要根据 attr('data-index')来获取当前的index。player区域不受loop限制，永远为当前内容的index值 
      
  
  */ 
      
  
  selected 
      
  
  
      
  
  curNav//当前导航，可以通过 attr('data-missing')来确认内容是否正常加载。 
      
  
  
      
  
  curPlay//当前显示的主要内容，可以通过 attr('data-missing')来确认内容是否正常加载。 
      
  
  
      
  
  curData//你传入数据data的当前值。

下一步开发计划：
当你不愿意或者不会使用data参数时，你可以讲需要显示的内容按照固定格式写入html页面，然后使用 build命令由插件自行完成余下内容
例如：

     
 
 
      
  
  $('elem').imageShown('bulid');  
      
  
  $('elem').imageShown('bulid',{'options'});  
      
  
  $('elem').imageShown('bulid','option','value');

提供外部暂停和重启自动播放的接口，方便你能够在回调函数中进行使用。提供更多的说明和示例。

默认参数：

     
 
 
      
  
  id:    null, 
      
  
          navSpace: 47,  
      
  
          pWidth: 0 ,  
      
  
          pHeight:0 ,  
      
  
          navNum: 4,  
      
  
          navPlace: null,  
      
  
          autoPlay: true,  
      
  
          autoTime: 4000,  
      
  
          events: 'mouseenter',  
      
  
          tbgAnimate: true,  
      
  
          tbgSpeed: 'fast',  
      
  
          addtional:false, 
      
  
          step: 1,  
      
  
          scrollSpeed:'fast', 
      
  
          opacity:0.6,  
      
  
          data: null,  
      
  
          loop: true,  
      
  
          player: true,  
      
  
          animate: 'fade',//left,right,top,bottom,fade,none 
      
  
          //deepNav: false,  
      
  
          showTips: true,  
      
  
          tipsAnimate: 'fade',//fade,slide 
      
  
          selected: 1,  
      
  
          callback: null,  
      
  
          preload: true,  
      
  
          target: '_blank',  
      
  
          pSpeed:500,  
      
  
          pType: false, 
      
  
          tContent:'image',//num,none,image,content 
      
  
          listPlace:null, 
      
  
          tipsBtn:false,  
      
  
          loadClass: 'img-player-loading', 
      
  
          pContent:'image'

使用方法：

     
 
 
      
  
  $('elem').imageShown({'options'}); 
      
  
  setter: 
      
  
  $('elem').imageShown('option',{'options'}); 
      
  
  $('elem').imageShown('option','option','value'); 
      
  
  getter 
      
  
  var option = $('elem').imageShown('option','option name');

在build功能完成之后将提供更加相信的参数以及配置的说明。

同时buid将会以扩展的形式发布，即需要使用build功能时，需要引入另外的文件。这样做的目的是为了解决文件大小问题。

插件经过非常多的暴虐暂时没发现问题，性能上已经处理的很好，经过测试暂时未发现内存泄露问题。测试平台：ie6，firefox3.6， windows2003

欢迎您能够给我提出宝贵的意见。

Future：

计划在播放区域内加入上一张，下一张按钮。（只在计划中，暂未具体实施。）

网站标题：支持同一页面多次使用的jQuery插件
标题链接：http://www.shufengxianlan.com/qtweb/news26/409376.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容