使用DIV+CSS如何實(shí)現(xiàn)幻燈片的效果？

CSS＋DIV是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用的術(shù)語之一，通常為了說明與HTML網(wǎng)頁設(shè)計語言中的表格（table）定位方式的區(qū)別，因?yàn)閄HTML網(wǎng)站設(shè)計標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用css+div的方式實(shí)現(xiàn)各種定位。

創(chuàng)新互聯(lián)建站堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的牟平網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

CSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現(xiàn) HTML 或 XML 等文件式樣的計算機(jī)語言。

DIV元素是用來為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進(jìn)行控制。

div id="mContainer"/div

input class="btn" id="pauseBtn" onclick="doPause();" type="button" value="pause" /

建立一個層，設(shè)置id為mContainer，作為圖片的容器層。

設(shè)置一個按鈕來控制圖片切換的暫停與繼續(xù)。

我們看下面的CSS代碼：

#mContainer {

width:225px;

position:relative;

height:168px;;

}

.mPhoto {

filter:Alpha(opacity=0);

left:0px;

position:absolute;

top:0px;

moz-opacity:0.0;

}

.btn {

border-right:#000 1px solid;

border-top:#000 1px solid;

margin-top:5px;

font-size:9px;

border-left:#000 1px solid;

width:40px;

border-bottom:#000 1px solid;

font-family:verdana;

}

這些代碼我們都能看明白，需要指出的是類mPhoto的樣式定義。

主要是應(yīng)用了濾鏡將圖片的透明度設(shè)置為零，完全透明。

我們看下面的javascript腳本：

var currentPhoto = 0;

var secondPhoto = 1;

var currentOpacity = new Array();

var imageArray = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg");

var FADE_STEP = 2;

var FADE_INTERVAL = 10;

var pause = false;

function init() {

currentOpacity[0]=99;

for(i=1;iimageArray.length;i++)currentOpacity[i]=0;

mHTML="";

for(i=0;iimageArray.length;i++)mHTML+="div id=\"photo\" name=\"photo\" class=\"mPhoto\"img src=\"" + imageArray[i] +"\"/div";

document.getElementById("mContainer").innerHTML = mHTML;

if(document.all) {

document.getElementsByName("photo")[currentPhoto].style.filter="alpha(opacity=100)";

} else {

document.getElementsByName("photo")[currentPhoto].style.MozOpacity = .99;

}

mInterval = setInterval("crossFade()",FADE_INTERVAL);

}

function crossFade() {

if(pause)return;

currentOpacity[currentPhoto]-=FADE_STEP;

currentOpacity[secondPhoto] += FADE_STEP;

if(document.all) {

document.getElementsByName("photo")[currentPhoto].style.filter = "alpha(opacity=" + currentOpacity[currentPhoto] + ")";

document.getElementsByName("photo")[secondPhoto].style.filter = "alpha(opacity=" + currentOpacity[secondPhoto] + ")";

} else {

document.getElementsByName("photo")[currentPhoto].style.MozOpacity = currentOpacity[currentPhoto]/100;

document.getElementsByName("photo")[secondPhoto].style.MozOpacity =currentOpacity[secondPhoto]/100;

}

if(currentOpacity[secondPhoto]/100=.98) {

currentPhoto = secondPhoto;

secondPhoto++;

if(secondPhoto == imageArray.length)secondPhoto=0;

pause = true;

xInterval = setTimeout("pause=false",2000);

}

}

function doPause() {

if(pause) {

pause = false;

document.getElementById("pauseBtn").value = "pause";

能用純css加div做出幻燈片或滑動門效果么？

完全可以哦，滑動式的利用css的hover，也就是純css菜單的原理，

點(diǎn)擊式的利用的是錨點(diǎn)的原理。

實(shí)例如下：

!doctype?html

html

head

meta?charset="utf-8"

title純CSS實(shí)現(xiàn)的Tab/title

style

*{?margin:0;?padding:0;}

#main{width:500px;?margin:100px?auto;}

#titlea{?float:left;?border:1px?solid?#000;?padding:2px?4px;?display:block;?text-decoration:none;?color:#000;}

#content{?width:500px;?height:300px;?border:1px?solid?#000;?overflow:hidden;}

#contentdiv{float:left;?padding:2px?4px;?width:500px;?height:300px;}

#a1:hover?#a2#tab2{?display:block;}

/style

/head

body

div?id="main"

div?id="title"

a?href="#tab1"tab1title/a

a?href="#tab2"tab2title/a

a?href="#tab3"tab3title/a

a?href="#tab4"tab4title/a

div?style="clear:both;"/div

/div

div?id="content"

div?id="tab1"?tab1?content?/div

div?id="tab2"?tab2?content?/div

div?id="tab3"?tab3?content?/div

div?id="tab4"?tab4?content?/div

div?style="clear:both;"/div

/div

/div

/body

/html

css+js做圖文幻燈片思路

循環(huán)圖片和按鈕 都加上索引

然后給每個按鈕加上事件

也就是說當(dāng)點(diǎn)擊第幾個按鈕就顯示第幾張圖片。

CSS 幻燈片圖片自適應(yīng)屏幕大小

那設(shè)置width:100%就行了。

還有，你的圖片是IMG，還是背景，背景的話用CSS3新屬性：background-size:100%

純CSS寫的圖片幻燈片有沒有可能？自動切換的。

必須使用偽類與鼠標(biāo)、鍵盤的行為互動。

如果這種也叫自動切換的話，那就有可能。

CSS3的話可以用動畫間接做到。

css怎樣制作幻燈片

圖片添加個target鼠標(biāo)觸發(fā)事件，然后利用 transition過度屬性就好

或者直接用過animation

調(diào)用@keyfroms動畫就是了

新聞名稱：css幻燈樣式,如下所示的這段css樣式代碼定義的樣式效果是什么
轉(zhuǎn)載來于：http://chinadenli.net/article45/dsiieei.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、建站公司、標(biāo)簽優(yōu)化、用戶體驗(yàn)、ChatGPT、網(wǎng)站設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)