jquery实现简单实用的轮播器


Posted in jQuery onMay 23, 2017

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<this.appMaxNum;j++){    
   if(k==j){      
   $('#itemNav'+j).css({'background-color':'#333333','color':'#FFFFFF'});     
   $('#item'+j).show('fast');    
   }else{   
   $('#itemNav'+j).css({'background-color':'#CCCCCC','color':'#000000'}); 
   $('#item'+j).hide('fast');  
   } 
  }   
 }, 
 appActive:function(){ 
  var _this = this; 
  this.playerID = setInterval(function(){ _this.appPlay(); },this.speed); 
 }, 
 init:function(refContainerId,intervalTime,refWidth,refHeight){  
  var cid = "";  
  var w = 300; 
  var h = 200; 
  if(refContainerId == 'undefined' || refContainerId == null || refContainerId == ''){ 
   return; 
  }else{ 
   cid = $.trim(refContainerId); 
  }  
  if(refWidth == 'undefined' || refWidth == null || refWidth == ''){ 
   w = 300; 
  }else{ 
   w = parseInt(refWidth); 
  }  
  if(refHeight == 'undefined' || refHeight == null || refHeight == ''){ 
   h = 200; 
  }else{ 
   h = parseInt(refHeight); 
  }  
   
  $('#' + 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 文件,例如:

<script language="javascript" src="xpath/itemPlayer.js"></script> 

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

<div id="containerID">

<div id="containerIDNavCon">
<a id="itemNav0" class="item1" href="#">1</a>
<a id="itemNav1" class="item1" href="#">2</a>
<a id="itemNav2" class="item1" href="#">3</a>
</div>
<div id="containerIDItemCon">
<a id="item0" href="#"><img src="img/pic0.jpg" width="300" height="200"></a>
<a id="item1" href="#"><img src="img/pic1.jpg" width="300" height="200"></a>
<a id="item2" href="#"><img src="img/pic2.jpg" width="300" height="200"></a>
</div>
</div>

注意:因为尽量简单,所以需要建立适当格式的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();
}

三、如下一个例子

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>TEST</title> 
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script language="javascript" type="text/javascript" src="itemPlayerApp.js"></script> 
<style type="text/css"> 
*{font-family:"宋体",verdana,arial; font-size:12px;color:#000000;} 
#playerBox{font-family:"宋体",verdana,arial; font-size:12px;color:#000000;} 
</style> 
</head> 
<body> 
<div id="playerBox" class="columnLeft01 box02"> 
<div id="playerBoxNavCon"> 
<a id="itemNav0" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a> 
<a id="itemNav1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a> 
<a id="itemNav2" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a> 
</div> 
<div id="playerBoxItemCon"> 
<a id="item0" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" width="100%" height="200" border="0"></a> 
<a id="item1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://csdnimg.cn/www/images/csdnindex_logo.gif" width="100%" height="200" border="0"></a> 
<a id="item2" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://avatar.csdn.net/5/1/9/1_shenzhennba.jpg" width="100%" height="200" border="0"></a> 
</div> 
</div> 
<p> </p> 
<p>项目循环轮播功能</p> 
<script language="javascript" type="text/javascript"> 
window.onload=function(){ 
itemPlayerApp.init('playerBox',3000,300,200); 
itemPlayerApp.appActive(); 
} 
</script> 
</body> 
</html>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
Jquery获取radio选中的值
May 05 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jquery实现图片轮播器
May 23 #jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 #jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 #jQuery
jQuery表单验证之密码确认
May 22 #jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 #jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 #jQuery
关于jQuery库冲突的完美解决办法
May 20 #jQuery
You might like
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
python连接池实现示例程序
2013/11/26 Python
Python中实现的RC4算法
2015/02/14 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python文件操作相关知识点总结整理
2016/02/22 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
python实现KNN分类算法
2019/10/16 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
印度在线杂货店:bigbasket
2018/08/23 全球购物
日本语毕业生自荐信
2014/02/01 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
英语导游词
2015/02/13 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书