网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

jquery如何实现轮播器

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

成都创新互联是一家专业从事网站建设、网站制作、网页设计的品牌网络公司。如今是成都地区具影响力的网站设计公司,作为专业的成都网站建设公司,成都创新互联依托强大的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站建设及网站设计开发服务!

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;} 
 
 
 
 
 
3 
 
 
 
 
 
 
 

 

 

项目循环轮播功能

    window.onload=function(){  itemPlayerApp.init('playerBox',3000,300,200);  itemPlayerApp.appActive();  }     

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

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


网站标题:jquery如何实现轮播器
标题链接:http://bjjierui.cn/article/pddsgs.html

其他资讯