摘要:最近想自己寫下輪播圖,在網(wǎng)上發(fā)現(xiàn)一個網(wǎng)友用屬性實現(xiàn)的輪播,趕腳超簡單哦,自己學(xué)習(xí)了后整理如下。如果我們用給加上類,的就要變成對吧,由于有屬性,所以要等,才能完全變?yōu)椋瑢崿F(xiàn)了淡入。
最近想自己寫下輪播圖,在網(wǎng)上發(fā)現(xiàn)一個網(wǎng)友用CSS transition屬性實現(xiàn)的輪播,趕腳超簡單哦,自己學(xué)習(xí)了后整理如下。(找不到原網(wǎng)址了-.-...就不貼了...)
(如果不了解transition,先去這里(點(diǎn)我,點(diǎn)我)學(xué)習(xí)下)
思路
圖片淡入淡出效果是不透明度(CSS opacity屬性)的變換過程。舉例,讓圖片淡出,就是圖片的opacity屬性在一段時間內(nèi)逐漸從1變?yōu)?,淡入呢,則是圖片的opacity屬性在一段時間內(nèi)逐漸從0變?yōu)?,用transition可以輕松實現(xiàn)啊。
我們設(shè)置圖片的CSS樣式如下,先不考慮布局和寬高這些。
img{ opacity: 0; transition: opacity 1s; } img.active{ opacity: 1; }
這段CSS能實現(xiàn)什么呢?
一開始,img的opacity為0,所以我們看不見。如果我們用JS給img加上active類,img的opacity就要變成1對吧,由于有transition屬性,所以要等1s,opacity才能完全變?yōu)?,實現(xiàn)了淡入。
那淡出呢?你想下,等img淡入完了之后,我又用JS刪掉img的active類會怎么樣?這時候img的opacity應(yīng)該從1變?yōu)?對吧,又由于有transition屬性,所以opacity要等1s才能變?yōu)?,這就實現(xiàn)了淡出。
JS的setInterval(code,millisec)(點(diǎn)我學(xué)習(xí)該函數(shù))可以每隔一段時間就執(zhí)行指定代碼。如果我每隔1s就更改下img的類名,如果有active類就刪掉,如果沒有就加上,這樣圖片就不斷地淡入 → 淡出 → 淡入 → 淡出。
怎么實現(xiàn)多張圖片輪流淡入淡出呢?
你每次刪掉當(dāng)前圖片的active類(淡出),然后給下一張圖片加上active類(淡入),這樣就實現(xiàn)了圖片的切換。
剩下的就是每隔固定時間間隔,執(zhí)行切換圖片函數(shù)就行了。
先上兩個效果圖。
點(diǎn)我跳轉(zhuǎn)CodePen看本文代碼最終效果,打開可能有點(diǎn)慢,耐心等等。這個是圖片自動輪播,也可以通過圖片底部的頁碼選擇圖片。
點(diǎn)我跳轉(zhuǎn)看稍微變動后的另一種效果(這是仿的京東首頁輪播圖效果,鼠標(biāo)滑到圖片上時會顯示左右按鈕框,點(diǎn)擊左右按鈕框也可實現(xiàn)圖片切換。)
只有圖片的輪播
HTML比較簡單,就是一個
CSS如下。設(shè)置好
*{ padding: 0; margin: 0; } #slideshow{ width: 800px; height: 350px; margin: 0 auto; /*設(shè)置在頁面水平居中*/ overflow: hidden; position: relative; } #slideshow img{ width: 800px; position: absolute; /*圖片采取絕對定位,均位于左上角,重疊在一起*/ top: 0; left: 0; opacity: 0; /*初始不透明度為0,圖片都看不見*/ transition: opacity 1s linear; /*--重點(diǎn)--定義一個關(guān)于透明度的transition*/ } #slideshow img.active{ opacity: 1; /*有active類的圖片不透明度為1,即顯示圖片*/ }
JS如下。在輪播函數(shù)slideshow()里,定義了圖片淡出函數(shù)slideOff(),圖片淡入函數(shù)slideOn()和切換圖片函數(shù)changeSlide()。
//---------主角:輪播圖函數(shù)------------- function slideshow() { var slideshow=document.getElementById("slideshow"), imgs=slideshow.getElementsByTagName("img"), //得到圖片們 current=0; //current為當(dāng)前活躍的圖片編號 function slideOff() { imgs[current].className=""; //圖片淡出 } function slideOn() { imgs[current].className="active"; //圖片淡入 } function changeSlide() { //切換圖片的函數(shù) slideOff(); //圖片淡出 current++; //自增1 if(current>=3) current=0; slideOn(); //圖片淡入 } //每2s調(diào)用changeSlide函數(shù)進(jìn)行圖片輪播 var slideon=setInterval(changeSlide,2000); } slideshow();
這里有個問題哦,輪播圖一般鼠標(biāo)移入圖片后,輪播就停止了,當(dāng)鼠標(biāo)移出后,輪播又開始對吧。我們用JS的onmouseover和onmouseout來實現(xiàn)。
在JS的slideshow()函數(shù)中加入以下代碼即可。
slideshow.onmouseover=function () { clearInterval(slideon); //當(dāng)鼠標(biāo)移入時清除輪播事件 } slideshow.onmouseout=function () { slideon=setInterval(changeSlide,2000); //當(dāng)鼠標(biāo)移出時重新開始輪播事件 }
具體效果見CodePen鏈接。
加上頁碼恩,然后我們加上和每張圖片相對應(yīng)的頁碼,并實現(xiàn)鼠標(biāo)移上去就會顯示相應(yīng)圖片這個功能。
在HTML的
1 2 3
第一個我也是已經(jīng)添加了active類。
然后設(shè)置頁碼的樣式,讓它們位于圖片的底部,一字排開。
/* 設(shè)置頁碼的樣式 */ #slideshow div{ width: 100%; position: absolute; bottom: 10px; text-align: center; } #slideshow span{ display: inline-block; width: 25px; line-height: 25px; /*當(dāng)只有一行文本時height等于line-height*/ border-radius: 25px; /*設(shè)置頁碼為圓形*/ margin: 0 15px; background: white; font-size: 16px; } #slideshow span.active{ color: white; background: #FFDD55; }
在JS中,slideOff()和slideOn()函數(shù)都要更新下,因為淡入淡出時的類名也要進(jìn)行變更。
function slideOff() { imgs[current].className=""; //圖片淡出 pages[current].className=""; } function slideOn() { imgs[current].className="active"; //圖片淡入 pages[current].className="active"; }
再就是鼠標(biāo)移入時,需要顯示對應(yīng)的圖片對吧。我們先把當(dāng)前圖片淡出,然后得到當(dāng)前對應(yīng)的current,再讓圖片淡入就好啦。
for(var i=0; i<pages.length; i++)="" {="" 定義鼠標(biāo)移入和移出頁碼事件="" pages[i].onmouseover="function(){" slideoff();="" 圖片淡出="" current="this.innerHTML-1;" 得到鼠標(biāo)停留的頁碼對應(yīng)的current="" slideon();="" }="" }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/115351.html
摘要:首先,巧妙的使用這一標(biāo)記,將游覽器從所有情況中分離出來。元素不能用作語義用途以外的其他目的。空白段落元素并非用于跳行。當(dāng)瀏覽器支持時,它們會自動地呈現(xiàn)出來并發(fā)揮作用。Html1、Html5有哪些新特性,移除了哪些元素?如何處理HTML5新標(biāo)簽的瀏覽器兼容問題?如何區(qū)別HTML和HTML5?HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集,主要是關(guān)于圖像,位置,存儲,多任務(wù)等功能的增加。拖拽釋放(D...
摘要:網(wǎng)上的淡入淡出效果大多是依照中和的方法使用來控制元素的透明度達(dá)到目的,但缺點(diǎn)是有輕微的卡頓感,并且運(yùn)行效率一般。思路是將淡入,淡出的效果做成預(yù)先定義好的樣式類,然后用改變元素的類來達(dá)到圖片輪播。 網(wǎng)上的淡入淡出效果大多是依照jquery中fadeIn和fadeOut的方法使用js來控制元素的透明度達(dá)到目的,但缺點(diǎn)是有輕微的卡頓感,并且運(yùn)行效率一般。 這里提供另外一個思路,即通過預(yù)先定義...
摘要:實戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配,不同的公司不同的團(tuán)隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個網(wǎng)格,實際上是你將一個元素聲明為一個網(wǎng)格容器,并把元素內(nèi)容置于網(wǎng)格中。 移動端頁面適配—...
摘要:起因現(xiàn)在自學(xué)前端中,學(xué)到移動端,在做一個項目,課程開始用原生的方法寫輪播圖無縫,但是視頻講的是面向過程的方式,現(xiàn)在自己用面向?qū)ο蟮姆绞綄懸幌隆? ## 起因 ## 現(xiàn)在自學(xué)前端中,學(xué)到移動端,在做一個項目,課程開始用原生的方法寫輪播圖(無縫),但是視頻講的是面向過程的方式,現(xiàn)在自己用面向?qū)ο蟮姆绞綄懸幌隆?## 上代碼 ## html的代碼 分類 ...
閱讀 1090·2021-11-15 18:00
閱讀 2802·2021-09-22 15:18
閱讀 1964·2021-09-04 16:45
閱讀 750·2019-08-30 15:55
閱讀 3853·2019-08-30 13:10
閱讀 1331·2019-08-30 11:06
閱讀 1983·2019-08-29 12:51
閱讀 2294·2019-08-26 13:55