样式布局：
.d1
{
390px;
height: auto;
overflow: hidden;
border: #666666 2px solid;
background-color: #000000;
position: relative;
}
.loading
{
390px;
border: #666666 2px solid;
background-color: #000000;
color: #FFCC00;
font-size: 12px;
height: 230px;
text-align: center;
padding-top: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.d2
{
100%;
height: 230px;
overflow: hidden;
}
.num_list
{
position: absolute;
100%;
left: 0px;
bottom: -1px;
background-color: #000000;
color: #FFFFFF;
font-size: 12px;
padding: 4px 0px;
height: 20px;
overflow: hidden;
}
.num_list span
{
display: inline-block;
height: 16px;
padding-left: 6px;
}
img
{
border: 0px;
}
#tupian1 ul
{ c
display: none;
}
.button
{
position: absolute;
z-index: 1000;
right: 0px;
bottom: 2px;
font-size: 13px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.b1, .b2
{
background-color: #666666;
display: block;
float: left;
padding: 2px 6px;
margin-right: 3px;
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
}
.b2
{
color: #FFCC33;
background-color: #FF6633;
}
JS引用：
//主函数
var s = function ()
{
var interv = 2000; //切换时间
var interv2 = 10; //切换速速
var opac1 = 80; //文字背景的透明度
var source = "fade_focus"; //图片容器的id名称
//获取对象
function getTag(tag, obj) { if (obj == null) { return document.getElementsByTagName(tag) } else { return obj.getElementsByTagName(tag) } }
function getid(id) { return document.getElementById(id) };
var opac = 0, j = 0, t = 63, num, scton = 0, timer, timer2, timer3; var id = getid(source); id.removeChild(getTag("div", id)[0]); var li = getTag("li", id); var div = document.createElement("div"); var title = document.createElement("div"); var span = document.createElement("span"); var button = document.createElement("div"); button.className = "button"; for (var i = 0; i < li.length; i++) { var a = document.createElement("a"); a.innerHTML = i + 1; a.onclick = function () { clearTimeout(timer); clearTimeout(timer2); clearTimeout(timer3); j = parseInt(this.innerHTML) - 1; scton = 0; t = 63; opac = 0; fadeon(); }; a.className = "b1"; a.onmouseover = function () { this.className = "b2" }; a.onmouseout = function () { this.className = "b1"; sc(j) }; button.appendChild(a); }
//控制图层透明度
function alpha(obj, n) { if (document.all) { obj.style.filter = "alpha(opacity=" + n + ")"; } else { obj.style.opacity = (n / 100); } }
//控制焦点按钮
function sc(n) { for (var i = 0; i < li.length; i++) { button.childNodes[i].className = "b1" }; button.childNodes[n].className = "b2"; }
title.className = "num_list"; title.appendChild(span); alpha(title, opac1); id.className = "d1"; div.className = "d2"; id.appendChild(div); id.appendChild(title); id.appendChild(button);
//渐显
var fadeon = function () { opac += 5; div.innerHTML = li[j].innerHTML; span.innerHTML = getTag("img", li[j])[0].alt; alpha(div, opac); if (scton == 0) { sc(j); num = -2; scrolltxt(); scton = 1 }; if (opac < 100) { timer = setTimeout(fadeon, interv2) } else { timer2 = setTimeout(fadeout, interv); }; }
//渐隐
var fadeout = function () { opac -= 5; div.innerHTML = li[j].innerHTML; alpha(div, opac); if (scton == 0) { num = 2; scrolltxt(); scton = 1 }; if (opac > 0) { timer = setTimeout(fadeout, interv2) } else { if (j < li.length - 1) { j++ } else { j = 0 }; fadeon() }; }
//滚动文字
var scrolltxt = function () { t += num; span.style.marginTop = t + "px"; if (num < 0 && t > 3) { timer3 = setTimeout(scrolltxt, interv2) } else if (num > 0 && t < 62) { timer3 = setTimeout(scrolltxt, interv2) } else { scton = 0 } };
fadeon();
}
//初始化
window.onload=s;
界面显示：
<table width="390" height="230" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="tupian1" id="tupian1">
<div id="fade_focus">
<div class="loading">
<%--Loading...<br />--%>
<img src="images/logings.gif" width="100" height="100" /></div>
<ul>
<li>
<%=mImgUrl%></li>
<li>
<%=mImgUrl1%></li>
<li>
<%=mImgUrl2%></li>
</ul>
<script src="js/yao.js" type="text/javascript"></script>
</div>
</div>
</td>
</tr>
</table>
.cs文件：
protected string mImgUrl = "";
protected string mImgUrl1 = "";
protected string mImgUrl2 = "";
protected string mTitleUrl = "";
protected string mTitleUrl1 = "";
protected string mTitleUrl2 = "";
protected void Page_Load(object sender, EventArgs e)
{
bindToRepeaterNews();
DataSet ds = Cms.GetList("100", 3);
DataTable tb = ds.Tables[0];
if (tb.Rows.Count >= 1)
{
if (tb.Rows[0]["fRedirect"].ToString().Equals("1"))
{
mImgUrl = String.Format("<a href=\"{0}\"><img src=\"{1}\" width=\"390\" height=\"230\" alt=\"{2}\" /></a>", tb.Rows[0]["fRedirectUrl"].ToString(), tb.Rows[0]["fThumbImgUrl"].ToString(), tb.Rows[0]["fTitle"].ToString());
//mTitleUrl = String.Format("{0}", tb.Rows[0]["fTitle"].ToString());
}
else
{
mImgUrl = String.Format("<a href=\"xwzx.aspx?action=details&id={0}\"><img src=\"{1}\" width=\"390\" height=\"230\" alt=\"{2}\" /></a>", tb.Rows[0]["fid"].ToString(), tb.Rows[0]["fThumbImgUrl"].ToString(), tb.Rows[0]["fTitle"].ToString());
//mTitleUrl = String.Format("{0}", tb.Rows[0]["fTitle"].ToString());
}
//mImgUrl = "<a>" + + "</a>";.
}
if (tb.Rows.Count >= 2)
{
if (tb.Rows[0]["fRedirect"].ToString().Equals("1"))
{
mImgUrl1 = String.Format("<a href=\"{0}\"><img src=\"{1}\" width=\"390\" height=\"230\" alt=\"{2}\" /></a>", tb.Rows[1]["fRedirectUrl"].ToString(), tb.Rows[1]["fThumbImgUrl"].ToString(), tb.Rows[1]["fTitle"].ToString());
//mTitleUrl1 = String.Format("{0}", tb.Rows[1]["fTitle"].ToString());
}
else
{
mImgUrl1 = String.Format("<a href=\"xwzx.aspx?action=details&id={0}\"><img src=\"{1}\" width=\"390\" height=\"230\" alt=\"{2}\" /></a>", tb.Rows[1]["fid"].ToString(), tb.Rows[1]["fThumbImgUrl"].ToString(), tb.Rows[1]["fTitle"].ToString());
//mTitleUrl1 = String.Format("{0}", tb.Rows[1]["fTitle"].ToString());
}
//mImgUrl1 = String.Format("<a href=\"xwzx.aspx?action=details&id={0}\"><img src=\"{1}\" /></a>", tb.Rows[1]["fid"].ToString(), tb.Rows[1]["fThumbImgUrl"].ToString());
}
if (tb.Rows.Count >= 3)
{
if (tb.Rows[0]["fRedirect"].ToString().Equals("1"))
{
mImgUrl2 = String.Format("<a href=\"{0}\"><img src=\"{1}\" width=\"390\" height=\"230\" alt=\"{2}\"/></a>", tb.Rows[2]["fRedirectUrl"].ToString(), tb.Rows[2]["fThumbImgUrl"].ToString(), tb.Rows[2]["fTitle"].ToString());
//mTitleUrl2 = String.Format("{0}", tb.Rows[2]["fTitle"].ToString());
}
else
{
mImgUrl2 = String.Format("<a href=\"xwzx.aspx?action=details&id={0}\"><img src=\"{1}\" width=\"390\" height=\"230\" alt=\"{2}\" /></a>", tb.Rows[2]["fid"].ToString(), tb.Rows[2]["fThumbImgUrl"].ToString(), tb.Rows[2]["fTitle"].ToString());
//mTitleUrl2 = String.Format("{0}", tb.Rows[2]["fTitle"].ToString());
}
//mImgUrl2 = String.Format("<a href=\"xwzx.aspx?action=details&id={0}\"><img src=\"{1}\" /></a>", tb.Rows[2]["fid"].ToString(), tb.Rows[2]["fThumbImgUrl"].ToString());
}
显示效果：
