纯csss或js代码实现简单的图片幻灯片样式

在一些网站中，经常可以看到大图片像幻灯片一样的自动播放效果，

以下简单介绍了如何用css代码或js代码实现图片播放翻页.

1、纯css与html代码实现

代码如下：

<style type="text/css">

.banner dl {

 position:absolute;

 width:500px;

 height:200px;

 border:10px solid #ccc;

 }

.banner dd {

 margin:0;

 width:500px;

 height:200px;

 overflow:hidden;

 }

.banner img {

 border:1px solid black

 }

.banner dt {

 right:3px;

 top:50px;
position:absolute;

 }

.banner a {

 width:20px;

 height:20px;
margin:1px;
display:block;

 text-align:center;

 color:#fff;
background:#666;

 text-decoration:none;

 border:1px solid #ffffff;

 filter:alpha(opacity=38);

 opacity:.4;

 }

.banner a:hover {

 background:#000000

 }

</style>

<div class="banner">

<dl>

<dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt>

<dd>

<img src="图片地址1" id="a" />

<img src="图片地址2" id="b" />

<img src="图片地址3" id="c" />

</dd>

</dl>

 </div>                                                                                                                                                                              

2、js与html代码实现

代码如下：

将01.jpg、02.jpg放在根目录中引用

<div class="pic"><img src="01.jpg" id="bannimg"/></div>

<script type="text/javascript">

var i =0;

function bofang(){

i++;

document.getElementById('bannimg').src="0"+i+".jpg";//切换图片

 

if(i>3){   //图片数量

 

i=0;

}

setTimeout('add()',2000);  //播放时间

}

bofang();

</script>

以上就是使用js或css代码实现简单的幻灯片样式.