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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
详解javascript高级定时器
Dec 31 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 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的性能
2013/10/30 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
图文讲解vue的v-if使用方法
2019/02/11 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
如何使用python写截屏小工具
2020/09/29 Python
python实现图片转字符画的完整代码
2021/02/21 Python
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
《爱的教育》读书心得
2014/11/08 职场文书
2014年检验科工作总结
2014/11/22 职场文书
力克胡哲观后感
2015/06/10 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
基于angular实现树形二级表格
2021/10/16 Javascript