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 用CreateElement动态创建标签示例
Nov 20 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
详解Vue底部导航栏组件
May 02 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 Javascript
用javascript实现倒计时效果
Feb 09 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
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
ADODB类使用
2006/11/25 PHP
php获取apk包信息的方法
2014/08/15 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
Prototype的Class.create函数解析
2011/09/22 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
pow在python中的含义及用法
2019/07/11 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
python 循环数据赋值实例
2019/12/02 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
期末学生评语大全
2014/04/24 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
教师工作决心书
2015/02/04 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
js实现模拟购物商城案例
2021/05/18 Javascript
Java实现二分搜索树的示例代码
2022/03/17 Java/Android