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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
浅谈Javascript面向对象编程
2011/11/15 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
深入学习Python中的装饰器使用
2016/06/20 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
Python网络编程 Python套接字编程
2017/09/13 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
django 发送手机验证码的示例代码
2018/04/25 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
古汉语文学求职信范文
2014/03/16 职场文书
房产继承公证书
2014/04/09 职场文书
会计系毕业生求职信
2014/05/28 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
2014年转正工作总结
2014/11/08 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
实习单位鉴定意见
2015/06/04 职场文书
田径运动会通讯稿
2015/07/18 职场文书