Question

我一直在这个问题上摸不着头脑。我经常不习惯使用HTML格式。

我有一个使用JQuery（http://maaki.com/thomas/SmoothDivScroll/）的smoothDivScroll来滚动动态生成的图像。

我想要的是，将多个小图像紧挨着排列，每个图像下面都有一段文字。大约25个图像，每个宽度为140像素，宽度为7560像素。

我通过在div中放置一个表格以及<td>内的每个图像来实现这一点。这是有效的

我有问题，是我需要滑块从最右边的图像开始，然后自动向左滑动。这是通过（如果你看上面的链接） - startAtElementId：

实现的

但是如果我在div中使用一个表，它将TABLE作为一个元素而不是TD ...所以它不起作用。我知道这是因为如果我将每个图像更改为表格内（即25个表格），它可以工作......但显然格式化不是我想要的。

任何人都可以想到一种方法我可以使用这个滑块（对js代码的修改与否），25个图像需要彼此相邻，没有间隙。

我想这更像是一个格式化问题，而不是滑块。因为我只知道做我想要的一种方式，而那就是下面不会让我设置startAtElementId。

    <div class="scrollableArea">
        <table width="7560px" class="index-body">
        <tr> 
        <td width="140px"><center><a onclick="__doPostBack('getEarlierDate');" ><img src="../images/olderGraphs.gif" width="140" height="60"></a>Click for more</center></td>
        <td width="300px"><center><a onclick="__doPostBack('chartClicked25');" ><cewolf:img chartid="verticalbar25" renderer="cewolf" width="300" height="60"/></a><c:out value="${date25}"/></center></td>
        <td width="300px"><center><a onclick="__doPostBack('chartClicked24');" ><cewolf:img chartid="verticalbar24" renderer="cewolf" width="300" height="60"/></a><c:out value="${date24}"/></center></td>

等等

Answer 1

我会删除该表并将其替换为一系列div。在每个div中你放置图像和段落标记，如下所示：

<div><img src="images/myImage.jpg"><p>Image text goes here</p></div>
<div><img src="images/myImage.jpg"><p>Image text goes here</p></div>
<div id="startAtMe"><img src="images/myImage.jpg"><p>Image text goes here</p></div>

使用一些CSS你可以使这些div排成一行，如果你删除所有填充和边距，你可以将div与图像并排放置而没有任何间隙。

关于JQuery smoothDivScroll的布局问题

1 个答案: