1

我正在使用 bxSlider (http://bxslider.com/) 以轮播方式显示内容。现在，我的艺术总监希望我确保访问者明白，如果点击寻呼机图标，将会获得更多内容。为了表明这一点，他希望在内容加载完成后，第一张幻灯片从右侧滑入。

我尝试使用 jquery 来实现这一点： show("slide", { direction: "right" }, 1000); 在包含 ul。但是没有达到滑动效果。相反，它只是简单地出现在视野中。

任何知道为什么会以这种方式运行或知道实现此目的的另一种方式的人吗？

代码：

<script type="text/javascript>
$(document).ready(function () {

        var slides = $("#eventslider>li");

        if (slides.length < 4) {
            $('#next-button').hide();
        }

        var slider = $('#eventslider').bxSlider({
            controls: false,
            mode: 'horizontal',
            displaySlideQty: 3,
            moveSlideQty: 3,
            infiniteLoop: false,
            hideControlOnEnd: true
        });

        setTimeout("showSlider()", 1000);


    });

    function showSlider() {
        $("#eventslider").show('slide', { direction: 'right' }, 1000);
    }
</script> 

<ul id="eventslider" style="display:none">

    <li>
        <p class="date">
            2011-12-31</p>

        <h3><a href="http://domain/en-gb/events_training/Pages/Event-wo-Image.aspx">
            Event wo Image</a></h3>
        <p class="rollUp">Lorem ipsum dolor, sit amet</p>

        <p>
            <a href="http://domain/en-gb/events_training/Pages/Event-wo-Image.aspx">
                Read more
            </a>
        </p>
    </li>

    <li>
        <p class="date">
            2011-12-16</p>
        <div class="imagecontainer"><a href="http://domain/se/events_training/Pages/Lokal-händelse-sverigeen-GB.aspx"><img src="/SiteCollectionImages/industries/top/yellowcoats.jpg" alt="" /></a></div>            
        <h3><a href="http://domain/se/events_training/Pages/Lokal-händelse-sverigeen-GB.aspx">
            Local event sweden</a></h3>
        <p class="rollUp">Vad som helst</p>

        <p>
            <a href="http://domain/se/events_training/Pages/Lokal-händelse-sverigeen-GB.aspx">
                Read more
            </a>
        </p>
    </li>

    <li>
        <p class="date">
            2011-12-14</p>

        <h3><a href="http://domain/en-gb/events_training/Pages/Older-event.aspx">
            Older event</a></h3>
        <p class="rollUp">asfasdf</p>

        <p>
            <a href="http://domain/en-gb/events_training/Pages/Older-event.aspx">
                Read more
            </a>
        </p>
    </li>

    <li>
        <p class="date">
            2011-10-19</p>
        <div class="imagecontainer"><a href="http://domain/en-gb/events_training/Pages/Test.aspx"><img src="/SiteCollectionImages/126084-matte-white-square-icon-transport-travel-transportation-airplane1.png" alt="" /></a></div>            
        <h3><a href="http://domain/en-gb/events_training/Pages/Test.aspx">
            Test</a></h3>
        <p class="rollUp">Test again</p>

        <p>
            <a href="http://domain/en-gb/events_training/Pages/Test.aspx">
                Read more
            </a>
        </p>
    </li>

    </ul>

问候， 里卡德

4

0 回答 0