DataList里拿到几十张图片,需要每三张每三张的淡出淡入循环,需要个js脚本或jQuery
<div><%--用户控件里的DIV,后台以写好,图片和数据都能拿到--%>
<div style="padding-left:60px; padding-top:20px;"> <asp:DataList ID="dlFilter" CellPadding=0 CellSpacing=0 RepeatColumns=1 runat=server>
<ItemTemplate>
<tr>
<td style="display:none" >
<cc:HKILabel ID="lblID" Text='<%# Eval("ID") %>' runat="server" /><%--此处为产品图片对应的产品ID--%>
</td>
<td height=110px id="rehot" runat="server"><%--让此TD里的图片淡出淡入切换--%>
<div>
<a href="../Web/pHotProducts.aspx">
<cc:HKIImage ID="imgFilter" runat="server" Width=112px Height=80px/><%--此处是自定义控件,获取图片,后台pagesize参数控制显示几张--%>
</a>
</div>
<div>
<cc:HKILabel ID="lblPart" runat="server" Text='<%# Eval("PartNo") %>'/><%--此处为于图片对应的产品型号--%>
</div>
</td>
</tr>
</ItemTemplate>
</asp:DataList>
</div>
</div>
<div><%--用户控件里的DIV,后台以写好,图片和数据都能拿到--%>
<div style="padding-left:60px; padding-top:20px;"> <asp:DataList ID="dlFilter" CellPadding=0 CellSpacing=0 RepeatColumns=1 runat=server>
<ItemTemplate>
<tr>
<td style="display:none" >
<cc:HKILabel ID="lblID" Text='<%# Eval("ID") %>' runat="server" /><%--此处为产品图片对应的产品ID--%>
</td>
<td height=110px id="rehot" runat="server"><%--让此TD里的图片淡出淡入切换--%>
<div>
<a href="../Web/pHotProducts.aspx">
<cc:HKIImage ID="imgFilter" runat="server" Width=112px Height=80px/><%--此处是自定义控件,获取图片,后台pagesize参数控制显示几张--%>
</a>
</div>
<div>
<cc:HKILabel ID="lblPart" runat="server" Text='<%# Eval("PartNo") %>'/><%--此处为于图片对应的产品型号--%>
</div>
</td>
</tr>
</ItemTemplate>
</asp:DataList>
</div>
</div>
<script type="text/javascript">
var div_flag = false;
$(document).ready(function(){
$("#v6_menu").bind("mouseover", function(){
if(!div_flag)
{
$("#v6_city_menu").fadeIn(1000, function(){
setTimeout(function(){
div_flag = true;
}, 500);
});
}
});
$("#v6_ul_menu").bind("mouseout", function(evt){
if(div_flag)
{
var sourceNode = evt.target || window.event.srcElement;
if(sourceNode.tagName.toLowerCase() == "ul"){
$("#v6_city_menu").fadeOut(1000, function(){
div_flag = false;
});
}
}
});
})
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js淡入淡出——Fade效果 - www.codefans.net </title>
<style>
* { font-size:12px;}
html { margin:0px; padding:0px; overflow:auto; }
body { margin:0px; padding:15px; background-color:buttonface; }
#w { position:absolute; width:480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; filter:alpha(opacity=100); }
#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
</style>
</head>
<body>
<div id="w">
<div id="t">演示Windows的淡入淡出窗口</div>
<div id="winBody">源码爱好者</div>
</div>
</body>
<script>
(function(o,i,s){
i=1;s=0.01;
setInterval(function(){
i+=s; s=i<0?0.01:(i>1?-0.01:s);
if(o.filters)o.filters[0].opacity=i*100;
else o.style.opacity=i;
},1);
})(document.getElementById("w"));
</script>
</html>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<script type="text/javascript">
$("img").fadeIn(3000).fadeOut(3000);
</script>
就可以实现,这个是淡入时间3秒,淡出时间3秒的,但是没太看明白你的意思,你的那个显示图片的td里是用
<img>来放置图片的吗?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
var imgNum = 0;
var rate = 0;//淡化效果函数
var opacity = function() {
if (isIE) {
return function(target, rate) {
target.style.filter = "alpha(opacity=" + (rate * 100) + ")";
};
} else {
return function(target, rate) {
target.style.opacity = rate;
};
}
}();function fadeIn() {
if (rate >= 1) {
clearInterval(imgNum);
}
var img = document.getElementById('test');
opacity(img, rate);
rate += 0.05;
}window.onload = function() {
imgNum = setInterval(fadeIn, 100);
}
</script>
</head>
<body style="text-align:center">
<img id="test" src="D:/noavatar_2.gif"></img>
</body>
</html>
<html>
<head>
<title>fadeOutIn.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
/*$("#rehot img").mouseover(function () {
$(this).fadeOut("300").fadeIn("300");
});*/
//$("#rehot img").fadeOut("600").fadeIn("800");
$("#rehot img").fadeTo("slow", 0.01).fadeTo("slow", 1);
});
</script> </head>
<body>
<table>
<tr>
<td id="rehot"><img src="image/bg.jpg"/></td>
</tr>
</table>
</body>
</html>