jquery獲取當(dāng)前元素索引值用法實(shí)例
本文實(shí)例講述了jquery獲取當(dāng)前元素索引值用法。分享給大家供大家參考。具體如下:
今天在做促銷(xiāo)頁(yè)面的圖片輪轉(zhuǎn)效果時(shí),下方頁(yè)碼的左邊需要對(duì)應(yīng)顯示圖片的說(shuō)明信息,效果如下:
思路:
頁(yè)面部分當(dāng)為當(dāng)前狀態(tài)的時(shí)候,會(huì)添加“active”樣式。
通過(guò)獲取 li class="active" 的索引值,對(duì)應(yīng)找到相應(yīng)的圖片說(shuō)明信息,顯示出來(lái)。
解決:
通過(guò)jquery的 index() 可以很輕松的實(shí)現(xiàn)該效果。
代碼如下:
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:"數(shù)千款名品手機(jī)6折起"}, {index:1,link:"http://www.baidu.com",imgsrc:"2.jpg",text:"測(cè)試文本2"}, {index:2,link:"http://www.google.com",imgsrc:"3.jpg",text:"測(cè)試文本3"}, {index:3,link:"http://www.soso.com",imgsrc:"xf.jpg",text:"測(cè)試文本4"}, {index:4,link:"http://www.dbjr.com.cn",imgsrc:"py.jpg",text:"測(cè)試文本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 ,沒(méi)10ms查找一次。
該代碼還有可以?xún)?yōu)化的地方。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jquery獲取元素索引值index()示例
- jquery 獲取當(dāng)前元素的索引值
- Jquery index()方法 獲取相應(yīng)元素索引值
- jQuery實(shí)現(xiàn)select下拉框獲取當(dāng)前選中文本、值、索引
- jQuery實(shí)現(xiàn)獲取元素索引值index的方法
- jquery 獲取索引值在一定范圍的列表方法
- jQuery在ul中顯示某個(gè)li索引號(hào)的方法
- jQuery建立一個(gè)按字母順序排列的友好頁(yè)面索引(兼容IE6/7/8)
- jQuery實(shí)現(xiàn)帶右側(cè)索引功能的通訊錄示例【附源碼下載】
- jQuery實(shí)現(xiàn)的簡(jiǎn)單獲取索引功能示例
相關(guān)文章
jQuery實(shí)現(xiàn)菜單欄導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單菜單欄導(dǎo)航效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08jquery通過(guò)closest選擇器修改上級(jí)元素的方法
這篇文章主要介紹了jquery通過(guò)closest選擇器修改上級(jí)元素的方法,實(shí)例分析了jQuery中closest選擇器的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jQuery實(shí)現(xiàn)html表格動(dòng)態(tài)添加新行的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)html表格動(dòng)態(tài)添加新行的方法,涉及jQuery鼠標(biāo)事件及頁(yè)面元素的操作技巧,需要的朋友可以參考下2015-05-05BootStrap網(wǎng)頁(yè)中代碼顯示<code><pre>用法詳解
網(wǎng)頁(yè)中代碼的顯示,包括行中代碼顯示;成段的代碼顯示.本文給大家介紹bootstrap網(wǎng)頁(yè)中代碼顯示<code><pre>用法詳解,感興趣的朋友一起看看吧2016-10-10jquery將一個(gè)表單序列化為一個(gè)對(duì)象的方法
將表單序列化為一個(gè)對(duì)象的方法有很多,在本文為大家介紹下使用jquery是如何做到的,感興趣的朋友可以參考下2014-01-01jQuery插件WebUploader實(shí)現(xiàn)文件上傳
這篇文章主要為大家詳細(xì)介紹了jQuery插件WebUploader實(shí)現(xiàn)文件上傳,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11jQuery實(shí)現(xiàn)圖片走馬燈效果的原理分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片走馬燈效果的原理,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery實(shí)現(xiàn)走馬燈的相關(guān)html頁(yè)面設(shè)計(jì)、css樣式布局與jQuery相關(guān)函數(shù)的使用,需要的朋友可以參考下2016-01-01