<script src="js/jquery.js" type="text/javascript"></script><style type="text/css">
.photo
{
width:55px;
height:35px;
padding-left:2px;
margin-left:3px;
margin-top:2px;
text-align:center;
cursor:hand;
}
.none
{
display:none;
}
.block
{
display:block;
}
.bigPhoto
{
text-align:center;
width:365px;
height:230px;
}
</style><script type="text/javascript">
$(function(){
$(".photo").click(function(){
var src = $(this).attr("src");
$(".bigPhoto").stop(true, true).hide().attr('src', src).fadeIn(1000);
});
});
</script><div>
<div style="width:638px; height:330px; background-image:url(photo/adBackground.png); background-repeat:no-repeat;">
<table style="width:100%; height:100%"><tr>
<td style="vertical-align:top; width:200px;">
<br />
<img class="photo" src="photo/1.jpg"/>
<img class="photo" src="photo/2.jpg"/>
<img class="photo" src="photo/3.jpg"/><br />
<img class="photo" src="photo/4.jpg"/>
</td>
<td style=" vertical-align:top;">
<div style="margin:25px 40px 10px 20px">
<img class="bigPhoto" src="photo/1.jpg"/>
</div>
</td>
</tr></table>
</div>
</div>首先感谢vivi和ashes to ashes
还有其他一些网友!
问题:当运行页面的时候还可以自动播放,这个代码应该怎么写???
var src = $(this).attr("src");
$(".bigPhoto").stop(true, true).hide().attr('src', src).fadeIn(1000);
});
客气了。。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="_601_Default3" %><!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 runat="server">
<title>无标题页</title> <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
.photo
{
width:55px;
height:35px;
padding-left:2px;
margin-left:3px;
margin-top:2px;
text-align:center;
cursor:hand;
}
.none
{
display:none;
}
.block
{
display:block;
}
.bigPhoto
{
text-align:center;
width:365px;
height:230px;
}
</style><script type="text/javascript">
$(function(){
$(".photo").click(function(){
var src = $(this).attr("src");
$(".bigPhoto").stop(true, true).hide().attr('src', src).fadeIn(1000);
});
var arrSize = $(".photo").size();
var i = 0;
setInterval(function(){
if(i == arrSize)
{
i = 0;
}
var src = $(".photo").eq(i).attr("src");
$(".bigPhoto").stop(true, true).hide().attr('src', src).fadeIn(1000);
i++;
},1000);
});
</script></head>
<body>
<form id="form1" runat="server">
<div>
<div style="width:638px; height:330px; background-image:url(photo/adBackground.png); background-repeat:no-repeat;">
<table style="width:100%; height:100%"><tr>
<td style="vertical-align:top; width:200px;">
<br />
<img class="photo" src="1.jpg"/>
<img class="photo" src="2.jpg"/>
<img class="photo" src="3.jpg"/><br />
<img class="photo" src="4.jpg"/>
</td>
<td style=" vertical-align:top;">
<div style="margin:25px 40px 10px 20px">
<img class="bigPhoto" src="1.jpg"/>
</div>
</td>
</tr></table>
</div>
</div>
</form>
</body>
</html>