资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

jquery如何实现轮播器-创新互联

这篇文章将为大家详细讲解有关jquery如何实现轮播器，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

10年积累的网站设计制作、网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有内江免费网站建设让你可以放心的选择与我们合作。

WEB开发经常实用到一种情况，即某个容器内的各项轮流循环播放显示，同时有相应的导航条提示，因为这个在很多地方可以使用，而且功能很相似的，所以写一个这样的播放功能，共享一下，需要注意的是这个需要jQuery的支持。

一、把如下保存为一个独立的文件 itemPlayerApp.js：

//attend: this need jQuery.js support 
var itemPlayerApp={ 
 author:'shenzhenNBA', 
 version:'v1.0', 
 appMaxNum:0, 
 playData:'1xplay', 
 playerID:"", 
 speed:3000, 
 appPlay:function(){  
  var f=this.playData.toLowerCase().split('x'); 
  if(f[1]=='play'){ 
   var i; 
   try{i=parseInt(f[0]);}catch(e){i=0;} 
   if(i>=this.appMaxNum){i=0;}    
   this.appTab(i);   
   this.playData=(++i)+"xplay"; 
  }   
 }, 
 appTab:function(tabIndex){ 
  var k,j; 
  try{k=parseInt(tabIndex);}catch(e){k=0;}   
  for(j=0;j
二、如何使用：
1.需要使用的web页面中引入jQery文件和本 itemPlayerApp.js 文件，例如:
 
2.建立如下格式的HTML文件



1
2
3

注意：因为尽量简单，所以需要建立适当格式的HTML,主要要求如下，注意颜色部分，

//A, id = containerIDNavCon和 id = containerIDItemCon 中的连接 A 元素的数量应该相等；
//B, 导航容器的 ID 构成应为主容器 ID 加上 NavCon，如上 containerIDNavCon；
//C, 导航容器中的每个 A 元素的 ID 构成为，itemNav 加上以0开始的递增数字序列，如上面的绿色部分；
//D, 显示项目容器内的每个 A 元素的 ID 构成为，item 加上以0开始的递增数字序列，如上面的紫色部分；

3.在WEB页面中的加载事件onload，初始化和启用该轮播功能，例如:
window.onload=function(){
itemPlayerApp.init('containerID',3000,300,200);
itemPlayerApp.active();
}

三、如下一个例子

假如所有文件都放在一个文件夹里，

 
 
 
 
TEST 
 
 
 
*{font-family:"宋体",verdana,arial; font-size:12px;color:#000000;} 
#playerBox{font-family:"宋体",verdana,arial; font-size:12px;color:#000000;} 
 
 
 
 
 
1 
2 
3 
 
 
 
 
 
 
 

 
 

项目循环轮播功能
 
 
window.onload=function(){ 
itemPlayerApp.init('playerBox',3000,300,200); 
itemPlayerApp.appActive(); 
} 
 
 

提示: jQuery.js 的文件请网上自己下载。

关于“jquery如何实现轮播器”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


网站名称：jquery如何实现轮播器-创新互联
本文URL：http://cdkjz.cn/article/dgsegd.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都定制网站小程序开发公司成都小程序温江网站建设成都棕树机房成都免费建网站攀枝花网站建设支点广告重庆网络营销外贸网站建设方案

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图