jquery获取当前元素索引值用法实例
网络编程 2021-07-04 21:48www.168986.cn编程入门
这篇文章主要介绍了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./ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis./ajax/libs/jquery/1.4.2/jquery.min.js"></SCRIPT> <SCRIPT type=text/javascript> var carousedata = [ {index:0,link:"http://.dangdang.",imgsrc:"1.jpg",text:"数千款名品手机6折起"}, {index:1,link:"http://.baidu.",imgsrc:"2.jpg",text:"测试文本2"}, {index:2,link:"http://.google.",imgsrc:"3.jpg",text:"测试文本3"}, {index:3,link:"http://.soso.",imgsrc:"xf.jpg",text:"测试文本4"}, {index:4,link:"https://.jb51.",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程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程