使用DIV+CSS如何实现幻灯片的效果？(页 1) - CSS常见问题和精华 - CSS论坛

wolftears 发表于 2011-7-28 16:39

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

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=1;i<imageArray.length;i++)currentOpacity[i]=0;
mHTML="";
for(i=0;i<imageArray.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";

jimmy905 发表于 2011-7-29 18:53

这个问题不是很了解啊

yang3wei 发表于 2011-8-5 09:39

回复 1# wolftears 的帖子

不错啊
http://www.divcss5.com/css-texiao/texiao269.shtml

http://www.divcss5.com/css-texiao/texiao268.shtml 这两个地方都是幻灯片特效介绍

daheshop 发表于 2011-10-10 14:55

不是很了解！

wuqilong34 发表于 2011-11-16 11:48

js不是很会

js能怎么学？好学吗

幼儿园 发表于 2012-3-5 13:36

:lol ！！！

北京手绘墙 发表于 2012-5-23 08:54

都是JS不晓得不明白哦。。。

张辽发表于 2012-5-23 15:46

学习css中

GniyUS 发表于 2012-6-8 22:31

说到底还是用JS实现，纯CSS也能实现的

rachelxiu 发表于 2012-7-10 21:22

回复 3# yang3wei 的帖子

嗯，就是这个，常用的，解决问题了。:handshake

wzlgm 发表于 2012-7-17 19:11

css技巧原来就是这么简单！

学习了一段时间div+css感觉非常有趣，想实现个性化的朋友多看看

net1833 发表于 2012-8-31 17:21

前来学习围观

services 发表于 2013-5-14 12:53

回复 9# GniyUS 的帖子

怎么用纯CSS实现幻灯片效果,求解惑,谢谢

litoya 发表于 2013-8-17 13:41

我想问下纯css不用js怎么实行幻灯片换图的功能

divcss5 发表于 2013-8-17 15:44

回复 14# litoya 的帖子

不用JS是无法实现幻灯片效果

litoya 发表于 2013-8-17 20:03

那请问如果鼠标经过一张图片时另外一张图片换图这个要怎么实现

页: [1]

CSS论坛's Archiver