html5實現的超簡單幻燈片

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

doctype html
>
<
html
>
<
head
>
<
title
>
title
>
<
style
>
#slides
.slide
.current
.future
.post
.far-future
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 current_slide = document.getelementsbyclassname("current")[0]; // getelementsbyclassname只有火狐，谷歌等瀏覽器的較新版本支援
if((event.wheeldelta 
<0/*
ie,谷歌等瀏覽器
*/||
event.detail 
>0/*
firefox
*/) 
&&nextel(current_slide))                
current_slide.classname="
slide post";
nextel(current_slide).classname="
slide current";
if(nextel(nextel(current_slide)))            
}else
if((event.wheeldelta 
>0||
event.detail 
<0) 
&&prevel(current_slide))
current_slide.classname="
slide future";
prevel(current_slide).classname="
slide current";
if(prevel(prevel(current_slide)))            }}
document.onmousewheel 
=fslide; 
//ie,谷歌等瀏覽器
if(document.addeventlistener)        
}();
function
prevel(el)
function
nextel(el)    
script
>
body
>
html
>

用CSS寫乙個簡單的幻燈片效果頁面

這裡是修真院前端小課堂，本篇分析的主題是 用css寫乙個簡單的幻燈片效果頁面 每篇分享文從 八個方面深度解析前端知識 技能，本篇分享的是 用css寫乙個簡單的幻燈片效果頁面 css3屬性中有關於製作動畫的三個屬性 transform,transition,animation。transform屬性向...

如何用css寫乙個簡單的幻燈片效果頁面？

css3屬性中有關於製作動畫的三個屬性 transform,transition,animation。transform屬性向元素應用2d或3d轉換。該屬性允許我們對元素進行旋轉 縮放 移動或傾斜。transition是令乙個或多個可以用數值表示的css屬性值發生變化時產生過渡效果。animatio...

HTML5實現簡單圓周運動示例

一 使用js實現圓周運動 根據指定圓心 半徑，在定時器中移動固定的弧度，重繪圓圈的位置 源 doctype html html lang en head meta charset utf 8 title document title style circle rectangle style head...