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 相关文章推荐
JQuery的$命名冲突详细解析
Dec 28 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
vue地区选择组件教程详解
May 04 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
php中序列化与反序列化详解
2017/02/13 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
小程序实现tab标签页
2020/11/16 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
keras.layer.input()用法说明
2020/06/16 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
好学生评语大全
2014/05/05 职场文书
政风行风评议整改方案
2014/09/15 职场文书
详解Python内置模块Collections
2022/03/22 Python
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL