jquery获取当前元素索引值用法实例


Posted in Javascript onJune 10, 2015

本文实例讲述了jquery获取当前元素索引值用法。分享给大家供大家参考。具体如下:

今天在做促销页面的图片轮转效果时,下方页码的左边需要对应显示图片的说明信息,效果如下:

jquery获取当前元素索引值用法实例

思路:

页面部分当为当前状态的时候,会添加“active”样式。

通过获取 li class="active" 的索引值,对应找到相应的图片说明信息,显示出来。

解决:

通过jquery的 index() 可以很轻松的实现该效果。

代码如下:

HTML:

<div id="carousel"> 
  <div id="carouselimg"> 
 <div id="imgcontainer"> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
 </div> 
  </div> 
  <div id="carouseltitle"> 
 <div class="carouseltext"> 
   <span> </span> 
   <span> </span> 
   <span> </span> 
   <span> </span> 
   <span> </span> 
 </div> 
 <ul> 
   <li><span>1</span></li> 
   <li><span>2</span></li> 
   <li><span>3</span></li> 
   <li><span>4</span></li> 
   <li><span>5</span></li> 
 </ul> 
  </div> 
</div>

JavaScript:

<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></SCRIPT> 
<SCRIPT type=text/javascript>  
var carousedata = [ 
  {index:0,link:"http://www.dangdang.com",imgsrc:"1.jpg",text:"数千款名品手机6折起"}, 
  {index:1,link:"http://www.baidu.com",imgsrc:"2.jpg",text:"测试文本2"}, 
  {index:2,link:"http://www.google.com",imgsrc:"3.jpg",text:"测试文本3"}, 
  {index:3,link:"http://www.soso.com",imgsrc:"xf.jpg",text:"测试文本4"}, 
  {index:4,link:"https://3water.com",imgsrc:"py.jpg",text:"测试文本5"} 
]; 
$(document).ready(function(){ 
  $("#imgcontainer a").each(function(i){ 
 $(this).attr("href",carousedata[i].link); 
 $(this).children("img").attr("src",carousedata[i].imgsrc); 
  }); 
  $(".carouseltext span").each(function(i){ 
 $(this).text(carousedata[i].text); 
  }) 
  setInterval(function(){ 
 var li_index = $("#carouseltitle ul li").index($("#carouseltitle ul li.active")[0]); 
 $(".carouseltext span").hide(); 
 $(".carouseltext span").eq(li_index).show(); 
  },10); 
}); 
</script>

这里,我使用setinterval ,没10ms查找一次。

该代码还有可以优化的地方。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
jQuery实现checkbox全选的方法
Jun 10 #Javascript
JavaScript中的getTime()方法使用详解
Jun 10 #Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 #Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 #Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 #Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 #Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 #Javascript
You might like
PHP.MVC的模板标签系统(一)
2006/09/05 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
简单的分页代码js实现
2016/05/17 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
Python实现的最近最少使用算法
2015/07/10 Python
python直接访问私有属性的简单方法
2016/07/25 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
解析Python的缩进规则的使用
2019/01/16 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
python列表推导式操作解析
2019/11/26 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
小学社团活动总结
2014/06/27 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
中秋联欢会主持词
2015/07/04 职场文书
环保建议书作文400字
2015/09/14 职场文书
心理学培训心得体会
2016/01/22 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis