<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS+js实现的代码简洁的图片幻灯切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
div,img{margin:0;padding:0;border:0;}
img{border:none;}
input{font-family:Verdana,Arial,Helvetica,sans-serif,"宋体";}
a:link,a:visited{text-decoration:none;}
a:hover,a:active{text-decoration:underline;}
#banner{width:100%;height:100%;margin-top:9px;margin-bottom:14px;position:relative;overflow:hidden;}
#PicBg{z-index:1;filter:alpha(opacity=70);opacity:0.7;width:960px;height:30px;background:gray;position:absolute;bottom:0;}
#PicText{z-index:2;font-size:14px;font-weight:bold;color:#fff;position:absolute;cursor:pointer;bottom:7px;left:10px;}
#PicNum{z-index:3;width:100px;text-align:right;position:absolute;height:25px;right:10px;bottom:0;}
#PicNum a{margin:0 2px;width:20px;height:20px;font-size:14px;line-height:20px;cursor:pointer;color:#000;background:#c40e0e;text-align:center;display:block;float:left;}
#PicShow img{width:500px;height:250px;}
</style>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。
<!--把下面代码加到<body>与</body>之间-->
<div id="banner">
<div id="PicBg"></div>
<div id="PicText"></div>
<div id="PicNum"><a>1</a><a>2</a><a>3</a></div>
<div id="PicShow"><a href="#" target="_blank"><img src="/images/1.jpg" alt="红叶传情"></a><a href="#" target="_blank"><img src="/images/2.jpg" alt="野花绽放"></a><a href="#" target="_blank"><img src="/images/3.jpg" alt="往事如茶"></a></div>
</div>
<script src="http://www.csrcode.cn/images/20110822/jquery.min.js"></script>
