开发者

help with syntax calling jQuery function for autoplay

开发者 https://www.devze.com 2023-03-28 18:09 出处:网络
How do I make this slider autoplay? Here\'s the answer: <div class=\"slideshow\"><ul> <li><img src=\"lemons/1.jpg\" alt=\"lemon\" /></li>

How do I make this slider autoplay?

Here's the answer:

    <div class="slideshow"><ul> 
          <li><img src="lemons/1.jpg" alt="lemon" /></li>
          <li><img src="lemons/2.jpg" alt="lemon tea" /></li>
          <li><img src="lemons/3.jpg" alt="splashing lemon" /></li>
    </ul></div> 

    <开发者_开发技巧;script type="text/javascript">
        $(window).load(function () {
            // start the slideshow
            $('.slideshow').blinds();

        var i = 0;
        var j = 4; // this is hardcorded, one more than total images  
                   // if you have a way of making j dynamic, please share
        setInterval( function(){
            if (i == j)
                {
                    i = 1;
                    $('.slideshow').blinds_change(i);
                    i++;                        
                } else {
                    $('.slideshow').blinds_change(i);
                    i++;                        
                }
        } , 3000 );
        })
    </script>

This is the excerpt from the original script (using jQueryBlinds which work in IE 8,7,6, etc.: http://www.littlewebthings.com/projects/blinds/):

    <div class="slideshow"><ul> 
          <li><img src="lemons/1.jpg" alt="lemon" /></li>
          <li><img src="lemons/2.jpg" alt="lemon tea" /></li>
          <li><img src="lemons/3.jpg" alt="splashing lemon" /></li>
    </ul></div> 

    <!-- change image links -->
    <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0)">1</a>
    <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(1)">2</a>
    <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(2)">3</a>

    <script type="text/javascript">
        $(window).load(function () {
            // start the slideshow
            $('.slideshow').blinds();
        })
    </script>


To make j dynamic you can do: $('#sldeshow').children('ul').size();


To set timed events, you can use setTimeout()

http://www.w3schools.com/js/js_timing.asp

0

精彩评论

暂无评论...
验证码 换一张
取 消