jquery实现简单实用的轮播器

前端之家收集整理的这篇文章主要介绍了jquery实现简单实用的轮播器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

WEB开发经常实用到一种情况,即某个容器内的各项轮流循环播放显示,同时有相应的导航条提示,因为这个在很多地方可以使用,而且功能很相似的,所以写一个这样的播放功能,共享一下,需要注意的是这个需要jQuery的支持,这个自己网上搜索下载即可,下面总结出来如下,直接看代码

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

=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$('#' + cid).css({"position":"relative",'width':w,'height':h,'overflow':'hidden'});
$('#' + cid + "NavCon").css({'color':'#333333','height':'26px','position':'absolute','width':'95%','left':'0','bottom':'3px','text-align':'right','display':'block'});
var t = 0;
if(intervalTime == 'undefined' || intervalTime == null){
t = 3000;
}else{
try{ t = parseInt(intervalTime);}catch(e){ t = 3000;}
}
this.speed = t;
var navList = "#" + cid + "NavCon a";
this.appMaxNum = $(navList).size();
if(0 == this.appMaxNum){ return; }
var _this = this;
$(navList).each(function(i){
$(this).css({'padding':'2px 5px','margin-right':'2px','background-color':'#CCCCCC'});
if(i == 0){
$(this).css({'background-color':'#333333','color':'#FFFFFF'});
}
$(this).mouSEOver(function(){
_this.playData=i+'xstop';
_this.appTab(i);
});
$(this).mouSEOut(function(){
_this.playData=i+'xplay';
_this.appTab(i);
});
});
}
};

二、如何使用:

1.需要使用的web页面中引入jQery文件和本 itemPlayerApp.js 文件,例如:

2.建立如下格式的HTML文件

<div id="containerIDNavCon">
<a id="itemNav0" class="item1" href="#">1
<a id="itemNav1" class="item1" href="#">2
<a id="itemNav2" class="item1" href="#">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(); }

三、如下一个例子

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

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"> TEST
Box" class="columnLeft01 Box02">
BoxNavCon"> 1 2 3
BoxItemCon">

项目循环轮播功能

提示: jQuery.js 的文件请网上自己下载。 在使用到的时候直接使用即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的jQuery相关文章