jCarousel Lite - 多宽度图像?

时间:2011-04-03 14:55:21

标签: javascript html

我正在使用jCarousel Lite

有人知道如何使用此方法获得多个宽度图像吗?我把div放在我的列表中,这样我就可以在一些幻灯片上找到除了图像以外的内容(甚至不确定这些是否合适?

          <div class="jCarouselLite">
            <ul>

                <li>  
                <div class="slideshow-content" style="visibility: visible; position:
                relative; z-index: 100; left: 0px; width: 870px;">
                        <table width="870" height="420" cellpadding="0" cellspacing="0">
                        <tr>
                        <td width="270" height="420" valign="top">
                        <span class="headlines">Title 1</span><br>
                        <span class="bodycopy"><p>xxxxxxxxxxxxx</p></span>
                        </td>
                        <td width="600" height="420" margin="200px">
                        <img src="images/image0.jpg" width="600"/> <!--500px with 100px image spacer-->
                        </td>
                        </tr>
                        </table>
                    </div>
                </li>

               <li>
                <div class="slideshow-content" style="visibility: visible; position:
                relative; z-index: 100; left: 0px; width: 870px;">
                    <table width="870" height="420" cellpadding="0" cellspacing="0">
                    <tr>
                    <td width="870" height="420" valign="top">
                    <img src="images/image1.jpg" width="870px"/> <!--500px with 100px image spacer-->
                    </td>
                    </tr>
                    </table>
                    </div>
                </li>

                <li>
                <div class="slideshow-content" style="visibility: visible; position:
                relative; z-index: 100; left: 0px; width: 870px;">
                        <table width="870" height="420" cellpadding="0" cellspacing="0">
                        <tr>
                        <td width="270" height="420" valign="top">
                        <span class="headlines">Title 2</span><br>
                        <span class="bodycopy"><p>xxxxxxxxxx</p></span>
                        </td>
                        <td width="600" height="420">
                        <img src="images/image2.jpg" width="600"/>  <!--500px with 100px image spacer-->
                        </td>
                        </tr>
                        </table>
                        </div>
                </li>

                <li>
                <div class="slideshow-content" style="visibility: visible; position:
                relative; z-index: 100; left: 0px; width: 600px;">
                    <table width="600" height="420" cellpadding="0" cellspacing="0">
                    <tr>
                    <td width="600" height="420" valign="top">
                        <img src="images/image3.jpg" width="600px"/> <!--500px with 100px image spacer-->
                    </td>
                    </tr>
                    </table>
                    </div>
                </li>

                <li>

                <div class="slideshow-content" style="visibility: visible; position:
                relative; z-index: 100; left: 0px; width: 1200px;">
                    <table width="1200" height="420" cellpadding="0" cellspacing="0">
                    <tr>
                    <td width="1200" height="420" valign="top">
                        <img src="images/image4.jpg" width="1200px"/> <!--1100px with 100px image spacer-->
                    </td>
                    </tr>
                    </table>
                    </div>
                </li>

                <li>
                <div class="slideshow-content" style="visibility: visible; position:
                relative; z-index: 100; left: 0px; width: 700px;">
                    <table width="700" height="420" cellpadding="0" cellspacing="0">
                    <tr>
                    <td width="700" height="420" valign="top">
                        <img src="images/image5.jpg" width="700px"/> <!--600px with 100px image spacer-->
                    </td>
                    </tr>
                    </table>
                    </div>
                </li>               

                <li>
                <div class="slideshow-content" style="visibility: visible; position:
                relative; z-index: 100; left: 0px; width: 700px;">
                    <table width="700" height="420" cellpadding="0" cellspacing="0">
                    <tr>
                    <td width="700" height="420" valign="top">
                        <img src="images/image6.jpg" width="700px"/> <!--600px with 100px image spacer-->
                    </td>
                    </tr>
                    </table>
                    </div>
                </li>               

                <li>
                <div class="slideshow-content" style="visibility: visible; position:
                relative; z-index: 100; left: 0px; width: 835px;">
                    <table width="835" height="420" cellpadding="0" cellspacing="0">
                    <tr>
                    <td width="835" height="420" valign="top">
                        <img src="images/image7.jpg" width="835px"/> <!--465px with 100px image spacer - 270px end-->
                    </td>
                    </tr>
                    </table>
                    </div>
                </li>               



            </ul>
        </div>

1 个答案:

答案 0 :(得分:1)

谢谢大家,最后使用了这个: http://www.switchonthecode.com/tutorials/jquery-creating-a-slideshow

我发现唯一允许多个宽度图像的旋转木马!

再次感谢