輕松實(shí)現(xiàn)javascript圖片輪播特效
本文實(shí)例介紹了javascript圖片輪播特效的詳細(xì)代碼以及實(shí)現(xiàn)思路,分享給大家供大家參考,具體內(nèi)容如下
還是先來看一看效果圖:
具體代碼:
一、HTML代碼分析
<body> <div class="dota"> <ul id="content"> <li><a href="#"><img src="images/1.jpg"/></a></li> <li><a href="#"><img src="images/2.jpg"/></a></li> <li><a href="#"><img src="images/3.jpg"/></a></li> <li><a href="#"><img src="images/4.jpg"/></a></li> <li><a href="#"><img src="images/5.jpg"/></a></li> </ul> <ul id="indicator"> <li class="current"><a href="#">A版是一款手機(jī)DOTA應(yīng)用,它涵蓋了</a></li> <li><a href="#">A版是一款手機(jī)應(yīng)用,它涵蓋了</a></li> <li><a href="#">A版是一款手機(jī)應(yīng)用,它涵蓋了</a></li> <li><a href="#">A版是一款手機(jī)應(yīng)用,它涵蓋了</a></li> <li><a href="#">A版是一款手機(jī)應(yīng)用,它涵蓋了</a></li> </ul> </div> </body>
此效果的層次結(jié)構(gòu)比較清楚:
1. class為data的div是最外層的容器,可以用來控制整個(gè)效果圖顯示的位置。
2. id為content的ul用來存放左側(cè)滾動(dòng)的圖片。
3. id為indicator的ul用來顯示右側(cè)的指示欄。
二、CSS代碼
*{margin: 0; padding: 0;} img{ border:0; } .dota{ width:570px; height: 230px; margin:100px auto; position: relative; overflow: hidden; } .dota #content{ float: left; list-style: none; position: absolute; width:380px; height:230px; } .dota #content img{ width:380px; height:230px; } .dota #indicator{ float: right; list-style: none; width:180px; height:220px; padding: 5px; background-color: #100F13; } .dota #indicator li{ width: 180px; height: 44px; background: url(images/anniu.png) 0 -44px; } .dota #indicator li.current{ background-position: 0 0; } .dota #indicator li a{ display: block; width: 160px; height: 34px; padding: 5px 0 5px 25px; } .dota #indicator li a:link , .dota #indicator li a:visited{ text-decoration: none; color: #686477; font: 12px/145% "宋體"; }
這里,我對indicator中l(wèi)i的代碼進(jìn)行說明:
.dota #indicator li中的css代碼就是設(shè)置右側(cè)指示欄中的每一項(xiàng),注意到,這里使用了background屬性,也就是說li的背景是一張圖片。準(zhǔn)備好的圖片如下:
這張準(zhǔn)備好的圖片大小為 180 * 88, 而.dota #indicator li中的background屬性設(shè)置的position屬性大小為 0 -44px, 即截取的圖片的下半部分;所以indicator中所有的背景圖片顯示的是下半部分比較暗的部分; 而.dota #indicator li.current 的position屬性大小為 0 0,所以默認(rèn)情況下indicator的第一個(gè)顯示高亮,其余的顯示為暗黑的那部分。然后通過JQuery代碼控制current屬性作用在 "誰" 身上來切換選中狀態(tài)。
三、JQuery代碼
<script type="text/javascript"> $(function(){ var nowImage = 0; /* 為定時(shí)動(dòng)畫服務(wù) */ $(".dota #content li").first().clone().appendTo($(".dota #content")); var timer = setInterval(autoAnimate, 1500); $(".dota").mouseenter(function(){ clearInterval(timer); }).mouseleave(function(){ timer = setInterval(autoAnimate, 1500); });; $(".dota #indicator li").mouseenter(function(){ $(this).addClass("current").siblings().removeClass("current"); nowImage = $(this).index(); /*stop() 可以立刻清楚以前的動(dòng)畫,防止動(dòng)畫疊加*/ $(".dota #content").stop().animate({"top": -230 * nowImage}, 1000); }); function autoAnimate(){ if(nowImage == 4){ nowImage = 0; $(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); $(".dota #content").stop().animate({"top":-230 * 5}, 1000,function(){ $(".dota #content").css("top",0); }); } else{ nowImage++; $(".dota #content").stop().animate({"top": -230 * nowImage}, 1000); $(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); } } }); </script>
以上就是輕松實(shí)現(xiàn)javascript圖片輪播特效的詳細(xì)代碼,希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
window.location.href和window.open窗口跳轉(zhuǎn)區(qū)別解析
這篇文章主要為大家介紹了window.location.href和window.open 跳轉(zhuǎn)區(qū)別解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07微信小程序?qū)崿F(xiàn)的點(diǎn)擊按鈕 彈出底部上拉菜單功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的點(diǎn)擊按鈕 彈出底部上拉菜單功能,結(jié)合實(shí)例形式分析了action-sheet組件及事件響應(yīng)簡單使用技巧,需要的朋友可以參考下2018-12-12如何快速高效創(chuàng)建JavaScript 一維數(shù)組方法詳解
這篇文章主要為大家介紹了如何快速高效創(chuàng)建JavaScript 一維數(shù)組方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02noscript 標(biāo)簽 一個(gè)被忽視的重要標(biāo)簽
這篇文章主要介紹了noscript 標(biāo)簽 一個(gè)被忽視的重要標(biāo)簽,需要的朋友可以參考下2023-03-03Bootstrap教程JS插件彈出框?qū)W習(xí)筆記分享
這篇文章主要為大家分享了Bootstrap教程JS插件彈出框?qū)W習(xí)筆記,為大家詳細(xì)介紹Bootstrap彈出框的使用方法,感興趣的小伙伴們可以參考一下2016-05-05A標(biāo)簽中通過href和onclick傳遞的this對象實(shí)現(xiàn)思路
想傳遞當(dāng)前對象給一個(gè)函數(shù),于是就將這個(gè)URL寫成"Javascript:shoControlSidebar(this)",可是結(jié)果發(fā)現(xiàn)這并不可行,接下來為大家詳細(xì)介紹下解決方法2013-04-04