搜 索

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

编辑:QTOOL.NET日期:2019-08-11333

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

TAG标签:jscss
此文章由QTOOL.NET编辑
最新文章

热门标签