使用jquery在表中进行多个幻灯片放映

时间:2015-06-18 17:28:58

标签: javascript jquery

我试图让幻灯片正确显示在表格中。我是jquery的新手。我想把它放在桌子的单元格中。我试图调整幻灯片" li"属性,但不能让它工作。请帮我实现这个目标。这是我的代码,

代码: 在头部

<script type="text/javascript" src="jquery1.2.6.min.js"></script>
<script src="jquery.slideshow.js"></script>

<style>
    .slideshow {
        position: relative;
    }

        .slideshow li {
            position: absolute;
            top: 0;
            width: 310px;
            height: 86px;
            display: table-cell;
            list-style: none;
        }

            .slideshow li:first-child {
                display: block;
            }

    .slideshow-2 {
        top: 0px;
    }
</style>

<script>
    document.documentElement.className += 'js';
</script>

<script>
    $(function () {
        $('.slideshow').slideshow({ timeout: 2000, speed: 1000 });
    });    
</script>

在正文部分

<table align="center" cellpadding="0" cellspacing="0" border="0" width="660">
    <tr>
        <td align="center" width="320">
        <ul class="slideshow">
            <li><img src="images/00accord.jpg" height="86" width="310"></li>
            <li><img src="images/00grandprix.jpg" height="86" width="310"></li>
            <li><img src="images/00mercedes.jpg" height="86" width="310"></li>
            <li><img src="images/01cadillac.jpg" height="86" width="310"></li>
            <li><img src="images/01century.jpg" height="86" width="310" /></li>
            <li><img src="images/01ptcruiser.jpg" height="86" width="310" /></li>
        </ul>
        </td>
        <td align="center" width="320">
        <ul class="slideshow slideshow-2">
            <li><img src="images/01ram.jpg" height="86" width="310"></li>
            <li><img src="images/02mazda.jpg" height="86" width="310"></li>
            <li><img src="images/03nissan.jpg" height="86" width="310"></li>
            <li><img src="images/03stratus.jpg" height="86" width="310"></li>
            <li><img src="images/03stratusrt.jpg" height="86" width="310" /></li>
            <li><img src="images/05sebring.jpg" height="86" width="310" /></li>
        </ul>
        </td>
    </tr>
</table>

0 个答案:

没有答案