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

html-css028

使用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"

你看看百度知道的导航,一眼明了,看着眼也不累

你的用色稍微过于鲜艳,这两种色在一起并不协调

很多网站用绿色,蓝色,浅灰色,银色,除了简洁明了、美观之外,而且对眼睛疲劳影响稍微少点。

由于导航是网站的组成部分,所以必须要清晰、突出

另外字体大小、颜色也是一点

一、定义一个盒子(“menu”),用来装这个导航的。

二、用无序列表(ul)中的列(li)放导航的内容。

三、把li的浮动(float)设置为向左浮动(float:left;),这样,就实现了水平导航条了。

四、在做其他的一些修饰。(下面我给我弄的一个简单的导航条给你理解)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#menu{

width:500px

margin:0 auto/*令盒子居中*/

font-size:20px /*定义字体的大小*/

}

ul{

margin:0padding:0/*把浏览器默认的间隔去掉*/

list-style:none /*把前面的序列号去掉*/

}

li{

float:left /*向左浮动,这个是实现水平的重要步骤!!*/

padding:0 15px /*li里面的字体和边框的距离*/

}

a{

text-decoration:none /*去掉超链接的下划线*/

color:#333 /*超链接的字体颜色*/

}

a:hover{

color:#696

}

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a href="#">菜单1</a></li>

<li><a href="#">菜单1</a></li>

<li><a href="#">菜单1</a></li>

<li><a href="#">菜单1</a></li>

</ul>

</div>

</body>

</html>