DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> 用html5實現的簡單幻燈片實例
用html5實現的簡單幻燈片實例
編輯:HTML5教程     

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

 

<!doctype html>
<html> 
<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></head><body><div id="slides"><div class="slide current">1</div><div class="slide future">2</div><div class="slide far-future">3</div><div class="slide far-future">4</div><div class="slide far-future">5</div><div class="slide far-future">6</div><div class="slide far-future">7</div></div><script> !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;i<l;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>
 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved