CSS论坛 - Powered by Discuz! Board

标题: 使用DIV+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=0;
mHTML="";
for(i=0;i<imageArray.length;i++)mHTML+="<div id=\"photo\" name=\"photo\" class=\"mPhoto\"><img src=\"" + imageArray  +"\"></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

！！！
作者: 北京手绘墙 时间: 2012-5-23 08:54

都是JS不晓得不明白哦。。。
作者: 张辽 时间: 2012-5-23 15:46 标题: 学习css中

学习css中
作者: GniyUS 时间: 2012-6-8 22:31

说到底还是用JS实现，纯CSS也能实现的
作者: rachelxiu 时间: 2012-7-10 21:22 标题: 回复 3# yang3wei 的帖子

嗯，就是这个，常用的，解决问题了。
作者: 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怎么实行幻灯片换图的功能

我想问下纯css不用js怎么实行幻灯片换图的功能
作者: divcss5 时间: 2013-8-17 15:44 标题: 回复 14# litoya 的帖子

不用JS是无法实现幻灯片效果
作者: litoya 时间: 2013-8-17 20:03

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

欢迎光临 CSS论坛 (http://www.divcss5.com/bbs/) Powered by Discuz! 6.1.0