在一些网站中,经常可以看到大图片像幻灯片一样的自动播放效果,
以下简单介绍了如何用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代码实现简单的幻灯片样式.