您現在的位置是:電腦技術吧?>? 編程技術 ??>??html5幻燈片,html如何做幻燈片??>??正文詳情

html5幻燈片,html如何做幻燈片

戊思嬡2019-11-08 11:21:57 人圍觀
簡介js 幻燈片超簡單幻燈片由HTML5和CSS3實現,鼠標滾輪用于頁面切換。!doctype htmlhtml標題/標題樣式幻燈片{位置:絕對;左:0px;上:0px;高jquery幻燈片

用html5、css3實現的超簡單幻燈片,用鼠標滾輪滾動進行換頁。

!doctype htmlhtml head title/title style #slides{ position:absolute; left:0px; top:0px; height:100%; width:100%; overflow:hidden; } .slide{ position:absolute; height:600px; width:800px; opacity:0.7; background-color:rgba(0, 128, 196, 0.5) !important; background-color:#ccc; border-radius:10px; left:50%; top:50%; margin-top:-300px; box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5); transition:all 0.25s ease-in-out 0s; } .current{ opacity:1; margin-left:-400px; } .future{ margin-left:450px; transform: skew(-3deg) scale(0.8); -webkit-transform: skew(-3deg) scale(0.8); } .post{ margin-left:-1250px; transform: skew(3deg) scale(0.8); -webkit-transform: skew(3deg) scale(0.8); } .far-future{ margin-left:1200px; transition:none; }/style/headbodydiv id=slidesdiv class=slide current1/divdiv class=slide future2/divdiv class=slide far-future3/divdiv class=slide far-future4/divdiv class=slide far-future5/divdiv class=slide far-future6/divdiv class=slide far-future7/div/divscript !function(){ var slides = document.getElementById(slides).childNodes;var l = slides.length; function fslide(e){ var event = e || window.event;//console.log(event.wheelDelta event.detail); for(var i=0;il;i ){ if(slides[i].className==slide current){ var current_slide = slides[i]; break;}}//var current_slide = document.getElementsByClassName(current)[0];// getElementsByClassName只有火狐,谷歌等瀏覽器的較新版本支持if((event.wheelDelta 0 /*ie,谷歌等瀏覽器*/ || event.detail 0 /*firefox*/) nextel(current_slide)){if(prevel(current_slide)){ prevel(current_slide).className=slide far-future; }current_slide.className=slide post; nextel(current_slide).className=slide current;if(nextel(nextel(current_slide))){ nextel(nextel(current_slide)).className=slide future; } }else if((event.wheelDelta 0 || event.detail 0) prevel(current_slide)){ if(nextel(current_slide)){ nextel(current_slide).className=slide far-future; } current_slide.className=slide future; prevel(current_slide).className=slide current; if(prevel(prevel(current_slide))){ prevel(prevel(current_slide)).className=slide post } } } document.onmousewheel = fslide; // ie,谷歌等瀏覽器 if(document.addEventListener){ document.addEventListener(DOMMouseScroll,fslide,false); // firefox } }(); function prevel(el){ if(el.previousSibling == null) return null; return el.previousSibling.nodeType == 1 ? el.previousSibling : prevel(el.previousSibling); } function nextel(el){ if(el.nextSibling == null) return null; return el.nextSibling.nodeType == 1 ? el.nextSibling : nextel(el.nextSibling); } /script /body /html

版權聲明:本文由 戊思嬡 整理編輯。

原標題:幻燈片html,用html做出幻燈片

轉載注明出處:http://www.dn9ww09s.icu/program/11549.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 筆記本光驅讀不出來,筆記本電腦讀不了光驅

    筆記本光驅讀不出來,筆記本電腦讀不了光驅 相關圖片筆記本不讀光盤雖然現在市面上的大多數筆記本都沒有筆記本光驅,但我們都知道,筆記本的光驅就是放CD和CD的地方我們可以用光驅來安裝系統,看電影等。然而,筆記本光驅是電腦最...

  • counter你,countervail

    counter你,countervail 相關圖片counter strike在css2.1中,支持的函數是counter()。使用它,您可以輕松地將序列號添加到頁面標題、塊和其他連續頁面內容中。有了它,你不必限制自己只使用來達到這個效果counterargume...

  • 電腦設置開機密碼怎么設置,電腦設置開機密碼

    電腦設置開機密碼怎么設置,電腦設置開機密碼 相關圖片win7設置開機密碼密碼設置是為了用戶的信息安全,同時也是為了使您的計算機對其他人不可用。那么設置電腦開機密碼是最好的方法,但是很多用戶不知道如何設置電腦開機密碼。現在...

  • 網頁優化方法,網頁優化包括什么

    網頁優化方法,網頁優化包括什么 相關圖片網絡優化到目前為止,本系列教程共有五章,共125個實用技能。每種技能都有一個案例比較,以確保其易于理解。今天的@corporate website design sel前端網頁優化...

  • 筆記本調節風扇轉速,筆記本怎么調節風扇轉速

    筆記本調節風扇轉速,筆記本怎么調節風扇轉速 相關圖片臺式機風扇轉速調節一般來說,筆記本電腦的配置越高,在使用和操作過程中產生的熱量就需要消耗得越高。在這個時候,筆記本風扇是非常重要的然而,一些用戶的筆記本風扇轉速不...

  • 電腦聲音圖標有個紅叉,電腦音量圖標有個紅叉

    電腦聲音圖標有個紅叉,電腦音量圖標有個紅叉 相關圖片電腦聲音圖標帶個?如果電腦聲音圖標上有一個紅色叉,但沒有聲音怎么辦?很多用戶都遇到過這個問題,不知道如何解決。其實,這個問題比較簡單。現在我們來談談具體的操作方法...

  • 多列布局,多列等高布局

    多列布局,多列等高布局 相關圖片css3flex多列布局當我用CSS寫了幾天的三列布局的時候,我突然想到了這樣一種方法,我覺得這太瘋狂了。如果有什么問題,請給我一些建議當我需要寫一個三列布局時,我通常選擇使用以...

  • 電腦藍屏怎么解決,電腦開機藍屏怎么解決

    電腦藍屏怎么解決,電腦開機藍屏怎么解決 相關圖片電腦藍屏按f2解決步驟有許多計算機用戶遇到了藍屏現象事實上,這個問題通常是由異常關機引起的,比如斷電、強制關機或重啟,這些都會在重啟電腦時發生。很多關鍵用戶沒有解決這...

  • html參考手冊,html文檔

    html參考手冊,html文檔 相關圖片HTML5所有標簽HTML5現在已經成為web開發的新標準,因此瀏覽器與HTML5的兼容性被用來區分它是否可以稱為現代瀏覽器。這也告訴我們,如果你是一個web開發人員,你必須了解HTML5手冊...

  • 電腦遠程控制手機,手機如何遠程控制電腦

    電腦遠程控制手機,手機如何遠程控制電腦 相關圖片怎么遠程控制別人的電腦如果我說我可以通過手機遠程控制電腦,哦!它不是竊取別人的電腦信息,而是通過云技術讓生活更方便的技術。會不會不可思議?這是一種時尚,我需要領導...

熱評文章

  • 電腦開機藍屏怎么解決,電腦經常藍屏怎么辦

    電腦開機藍屏怎么解決,電腦經常藍屏怎么辦 相關圖片筆記本電腦藍屏怎么解決在我們的日常生活中,我們在使用電腦時經常會遇到電腦藍屏的問題,那么如何解決電腦藍屏的問題呢?其實藍屏的原因有很多,但一般都是硬件和驅動程序不...

  • iframe 跨域,iframe跨域傳值

    iframe 跨域,iframe跨域傳值 相關圖片iframe跨域別的網站postmessage允許多個窗口/幀跨域傳輸數據和信息。這是窗戶的使用方法PostMessage的工作原理以及如何在Firefox、IE8 、opera、Saiframe跨域原理...

  • 如何解決筆記本漏電,筆記本漏電怎么辦

    如何解決筆記本漏電,筆記本漏電怎么辦 相關圖片筆記本usb漏電筆記本電腦已經成為我們的重要工具之一,給我們帶來了極大的便利。不過,也有一些用戶在使用過程中遇到它,在電腦外殼上觸摸它會感到觸電很多朋友想知道解決辦法...

  • 電腦開機進不去系統,電腦開機進不了系統怎么辦

    電腦開機進不去系統,電腦開機進不了系統怎么辦 相關圖片電腦可以開機但是黑屏隨著計算機的普及,它在方便我們生活的同時,也帶來了很多麻煩如果電腦無法開機進入系統,那就是我們經常遇到的麻煩。但問題最終會解決的。下一步,小編...

  • 3D制作,3d圖怎么制作

    3D制作,3d圖怎么制作 相關圖片3D視頻制作下面的教程將教您如何使用CSS3生成3D文本。本文是從3D CSS陰影文本教程翻譯而來的這個簡單的CSS文本陰影教程將一步一步地教你如何通過疊加多層陰影來創建33D動畫設計...

  • 筆記本電腦電池不充電怎么辦,筆記本電腦電池不充電

    筆記本電腦電池不充電怎么辦,筆記本電腦電池不充電 相關圖片筆記本充電很多人都想知道如何給筆記本電池充電的問題的答案,因為這關系到筆記本電池的壽命,也是如此。很多人通常應該忽略這個小問題一旦電池沒電了,他們就會做出反應,不...

  • 帶虛線的箭頭,怎么在圖片上標出帶箭頭的虛線

    帶虛線的箭頭,怎么在圖片上標出帶箭頭的虛線 相關圖片帶箭頭的示意圖怎么做注意:1拖動箭頭時,畫布中的線條繪圖將自動重新計算該點2。Canvas沒有帶虛線的API,因為它對API不太熟悉,所以不好玩。在網上找到的三。箭頭出來后,單擊畫...

  • 三星筆記本電腦系統還原,三星筆記本怎么一鍵還原系統

    三星筆記本電腦系統還原,三星筆記本怎么一鍵還原系統 相關圖片三星系統還原在使用計算機系統的過程中,不可避免地會遇到各種系統問題當問題嚴重時,如藍屏、死機、黑屏,我們通常選擇重新安裝系統來解決但是,重新安裝系統需要很多時間。...

  • 筆記本電腦怎么連wifi熱點,筆記本連不上熱點

    筆記本電腦怎么連wifi熱點,筆記本連不上熱點 相關圖片筆記本連接手機熱點連不上WiFi是一種允許電子設備連接到無線局域網的技術現在智能手機的用戶越來越受歡迎為了解決朋友“斷線”的“恐懼”和流量不足的問題,可以用筆記本打開...

  • overflow:hidden,overflow屬性hidden

    overflow:hidden,overflow屬性hidden 相關圖片address overflow溢出:隱藏是一種常用的CSS樣式,但大多數人對這種樣式的理解僅限于隱藏溢出,并不知道浮動的含義。當談到清除浮動時,我們會想到另一種CSS樣式:clear:botoverflow...

關注微信

变脸官网查询