js實(shí)現(xiàn)京東輪播圖效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)京東輪播圖效果的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body,ul,li{padding:0;margin:0;} li{list-style-type:none;} .wrap{ position:relative; width:480px; height:260px; margin:100px auto; } .wrap>ul>li{position:absolute;display:none;} /*隱藏所有的li*/ .wrap img{width:480px;height:260px;} .wrap li:first-child{display:block;}/*顯示第一個(gè)*/ .arrow{ width:480px; height:60px; position:absolute; top:50%; margin-top:-30px; display:none; } .arrow>span{ font-size:24pt; line-height:60px; display:inline-block; width:36px; background-color:#CEE5E8; text-align:center; cursor:pointer; opacity:0.5; border-radius:5px;/*顯示圓框*/ -webkit-border-radius:5px; -moz-border-radius:5px; color:black; } .wrap:hover .arrow{ display:block; } .arrow>span:last-child{ float:right; } </style> </head> <body> <div class="wrap"> <!--圖片部分--> <ul> <li> <a href="javascript:void(0)"> <img src="images/1.jpg"/> </a> </li> <li> <a href="javascript:void(0)"> <img src="images/2.jpg"/> </a> </li> <li> <a href="javascript:void(0)"> <img src="images/3.jpg"/> </a> </li> <li> <a href="javascript:void(0)"> <img src="images/4.jpg"/> </a> </li> </ul> <!--按鈕部分--> <div class="arrow"> <span><</span> <span>></span> </div> </div> </body> <script src="jquery-1.12.0.min.js"></script> <script> $(function(){ var count = 0; function change() { count++; if( count == $(".wrap>ul>li").length){ count = 0; } $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut(); } var myTimer = setInterval(change,4000); function reRun(){ myTimer = setInterval(change,4000); } /*注意jquery中setInterval函數(shù)不要加引號(hào)和(),否則會(huì)報(bào)缺少對(duì)象*/ $(".arrow>span").eq(0).click(function(){ clearInterval(myTimer); /*清除計(jì)時(shí)器,目的在于不會(huì)因點(diǎn)擊按鈕時(shí)setInterval事件仍舊執(zhí)行*/ count--; if( count == -1){ count = $(".wrap>ul>li").length - 1; } $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut(); setTimeout(reRun,0); /*重新啟動(dòng)計(jì)時(shí)器,保證不點(diǎn)擊按鈕是能正常切換*/ }); $(".arrow>span").eq(1).click(function(){ clearInterval(myTimer); count++; if( count == $(".wrap>ul>li").length){ count = 0; } $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut(); setTimeout(reRun,0); }); }); </script> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 純js仿淘寶京東商品放大鏡功能
- Javascript仿京東放大鏡的效果
- js仿京東輪播效果 選項(xiàng)卡套選項(xiàng)卡使用
- JS仿京東移動(dòng)端手指撥動(dòng)切換輪播圖效果
- 利用AngularJs實(shí)現(xiàn)京東首頁(yè)輪播圖效果
- javascript仿京東導(dǎo)航左側(cè)分類(lèi)導(dǎo)航下拉菜單效果
- 基于JavaScript實(shí)現(xiàn)仿京東圖片輪播效果
- js實(shí)現(xiàn)仿京東2級(jí)菜單效果(帶延時(shí)功能)
- 原生js仿淘寶網(wǎng)商品放大鏡效果
- JavaScript實(shí)現(xiàn)京東購(gòu)物放大鏡和選項(xiàng)卡效果的方法分析
相關(guān)文章
js實(shí)現(xiàn)簡(jiǎn)單的左右兩邊固定廣告效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的左右兩邊固定廣告效果,實(shí)例分析了javascript實(shí)現(xiàn)固定廣告的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04利用js實(shí)現(xiàn)前臺(tái)動(dòng)態(tài)添加文本框,后臺(tái)獲取文本框內(nèi)容(示例代碼)
這篇文章主要是對(duì)利用js實(shí)現(xiàn)前臺(tái)動(dòng)態(tài)添加文本框,后臺(tái)獲取文本框內(nèi)容的示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11ElementUI 的 Tree 組件的基本使用實(shí)戰(zhàn)教程
這篇文章主要介紹了ElementUI 的 Tree 組件的基本使用實(shí)戰(zhàn)教程,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12js+css實(shí)現(xiàn)的圓角邊框TAB選項(xiàng)卡滑動(dòng)門(mén)代碼分享(2款)
這篇文章主要為大家詳細(xì)介紹了兩種js+css實(shí)現(xiàn)的圓角邊框TAB選項(xiàng)卡滑動(dòng)門(mén)效果,很實(shí)用的代碼,推薦給大家,有需要的小伙伴可以參考下2015-08-08淺談JavaScript中等號(hào)、雙等號(hào)、 三等號(hào)的區(qū)別
這篇文章主要介紹了淺談JavaScript中等號(hào)、雙等號(hào)、 三等號(hào)的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08JavaScript獲取偽元素(Pseudo-Element)屬性的方法技巧
這篇文章主要介紹了JavaScript獲取偽元素(Pseudo-Element)屬性的方法技巧,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-03-03javascript數(shù)組克隆簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要介紹了javascript數(shù)組克隆簡(jiǎn)單實(shí)現(xiàn)方法,實(shí)例分析了JavaScript中concat用于數(shù)組克隆的使用技巧,需要的朋友可以參考下2015-12-12JavaScript 中“...” 的多種用途及代碼實(shí)例
擴(kuò)展運(yùn)算符(Spread Operator)和剩余參數(shù)(Rest Parameters)是JavaScript中的兩個(gè)非常有用的特性,實(shí)際應(yīng)用中,這些功能可以用于合并數(shù)組、復(fù)制對(duì)象屬性等操作,極大地提高了JavaScript編程的便利性和功能性,感興趣的朋友跟隨小編一起看看吧2024-09-09微信小程序分享小程序碼的生成(帶參數(shù))以及參數(shù)的獲取
這篇文章主要介紹了微信小程序分享小程序碼的生成(帶參數(shù))以及參數(shù)的獲取,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03