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

 更新时间:2015年06月10日 11:02:43   作者:spring21st  
这篇文章主要介绍了jquery获取当前元素索引值用法,实例分析了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://www.jb51.net",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程序设计有所帮助。

相关文章

  • jQuery zTree加载树形菜单功能

    jQuery zTree加载树形菜单功能

    这篇文章主要为大家详细介绍了jQuery zTree加载树形菜单功能,轻松设计树形结构菜单功能,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • jQuery Validate插件自定义验证规则的方法

    jQuery Validate插件自定义验证规则的方法

    这篇文章主要介绍了jQuery Validate插件自定义验证规则的方法,f非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • jQuery formValidator表单验证

    jQuery formValidator表单验证

    这篇文章主要介绍了jQuery formValidator表单验证 的相关资料,需要的朋友可以参考下
    2016-01-01
  • jQuery实现边框动态效果的实例代码

    jQuery实现边框动态效果的实例代码

    这篇文章给大家分享了一个jQuery边框动态的效果,当鼠标移动到边框区域的时候,边框会有个动态的加载动画效果,实现的效果真的非常不错,下面来一起看看吧。
    2016-09-09
  • 浅谈jQuery中height与width

    浅谈jQuery中height与width

    本文给大家简单谈谈jQuery中的获取高度和宽度的height和width方法,这里总结一下,方便大家更好的理解,有需要的小伙伴可以参考下。
    2015-07-07
  • 使用jquery清空、复位整个输入域

    使用jquery清空、复位整个输入域

    这篇文章主要介绍了使用jquery清空、复位整个输入域,非常的简单实用,这里推荐给大家,需要的朋友可以参考下
    2015-04-04
  • jquery遍历checkbox的注意事项说明

    jquery遍历checkbox的注意事项说明

    本篇文章主要是对jquery遍历checkbox的注意事项进行了说明介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • jquery实现省市select下拉框的替换(示例代码)

    jquery实现省市select下拉框的替换(示例代码)

    本篇文章主要是对jquery实现省市select下拉框的替换(示例代码)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • JQuery球队选择实例

    JQuery球队选择实例

    这篇文章主要介绍了JQuery球队选择实现方法,实例分析了jQuery中鼠标事件与页面元素相关操作技巧,需要的朋友可以参考下
    2015-05-05
  • JQuery中节点遍历方法实例

    JQuery中节点遍历方法实例

    这篇文章主要介绍了JQuery中节点遍历方法,实例分析了jQuery遍历节点的技巧,需要的朋友可以参考下
    2015-05-05

最新评论