使用DIV+CSS如何实现幻灯片的效果?

html-css022

使用DIV+CSS如何实现幻灯片的效果?,第1张

CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。

CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。

DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

<div id="mContainer"></div>

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

建立一个层,设置id为mContainer,作为图片的容器层。

设置一个按钮来控制图片切换的暂停与继续。

我们看下面的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的样式定义。

主要是应用了滤镜将图片的透明度设置为零,完全透明。

我们看下面的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=1i<imageArray.lengthi++)currentOpacity[i]=0

mHTML=""

for(i=0i<imageArray.lengthi++)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"

理论上,BC默认的display:none当鼠标hoverA的时候,$("B,C").css("display","normal'),当鼠标离开的时候在把display设置为none,或者当你不考虑兼容性时,可以考虑用透明度做

完全可以哦,滑动式的利用css的hover,也就是纯css菜单的原理,

点击式的利用的是锚点的原理。

实例如下:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>纯CSS实现的Tab</title>

<style>

*{ margin:0 padding:0}

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

#title>a{ 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}

#content>div{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>