<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
还有其他一些网友!
问题:当运行页面的时候还可以自动播放,这个代码应该怎么写???

解决方案 »

  1.   

    的使用js的timer来调用 $(".photo").click(function(){
                   var src = $(this).attr("src");
                   $(".bigPhoto").stop(true, true).hide().attr('src', src).fadeIn(1000);
                });
      

  2.   


    客气了。。
    <%@ 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>