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插件
Mar 29 jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 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页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
python根据路径导入模块的方法
2014/09/30 Python
简单谈谈Python中的闭包
2016/11/30 Python
Python序列操作之进阶篇
2016/12/08 Python
Python 多线程实例详解
2017/03/25 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
ddl,dml和dcl的含义
2016/05/08 面试题
2014年党员评议表自我评价
2014/09/27 职场文书
工作检讨书怎么写
2014/10/10 职场文书
个人合伙协议书范本
2014/10/14 职场文书
环卫工人慰问信
2015/02/15 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
Python中request的基本使用解决乱码问题
2022/04/12 Python