同时进行文本和图像旋转

Question

我已经使用下面的代码通过链接进行简单易用的图像旋转。

试图找到一种简单的方法来同时添加附加描述或文本链接...同时窥探并且无法找到简单的解决方案。

因此，寻找可以同时显示在图像旁边的描述。

<a id="imageurl"><img id="Rotating1" border="0" height=250 width=375></a>

<script language="JavaScript">

function RotateImages(Start)
{
    var a = new Array("images/signs.png","images/sister.png");
    var c = new Array("index.cfm", "index.cfm");
    var b = document.getElementById('Rotating1');
    var d = document.getElementById('imageurl');
    if(Start>=a.length)
        Start=0;
    b.src = a[Start];
    d.href = c[Start];
    window.setTimeout("RotateImages(" + (Start+1) + ")",5700);
}

RotateImages(0);
</script>

我找到一个使用谷歌ajax ...工作正常... 现在要将CSS全部整理出来以使其显示正确... 有什么建议？我只是试图在左侧使用链接和文本，在右侧使用图像... 显示和旋转很好 - 稍微偏离......我对所有位置都不是最好的：相对等等css的东西...

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

      <script>
    $(function() {

        $("#slideshow > div:gt(0)").hide();

        setInterval(function() { 
          $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
        },  2000);

    });
</script>




      <cfset slw = #set.mw# - 100>

      <cfoutput>

      <STYLE type="text/css">

    ##slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: #slw#px; 
    height: 200px; 
    padding: 10px;
background-color: #set.botcol#;
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 

      }


      ##slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 

      } 

      </style>

      </cfoutput>


      <div id="slideshow">

   <cfoutput query=slide>
   <div>
   <table border=1 width=#slw# cellspacing=5 cellpadding=5>
   <tr>
   <td width=50% align=right valign=top>
   <br><a href="#slideurl#">#slidetext#</a></td>
   <td width=50%><img src="images/#slideimg#" height=200></td>
   </tr>
   </table>
   </div>
   </cfoutput>

     </div>