Question

我正在尝试创建一个jquery函数，使用windows.interval每隔3秒递增或递减一次值。

这是目前的目标：

第一名：1,2,3 3秒后第二名：3,1,2 3秒后第3名：2,3,1 3秒后第4名：1,2,3

无论如何都要在jquery中实现这个目标吗？

window.setInterval(function() {
    /// call your function here

    $('.item-3').css({
        'top': '-100px'
    });
    $('.item-1').animate({
        top: "100px",
    }, 1000, function() {
        // Animation complete.
    });
    $('.item-2').animate({
        top: "200px",
    }, 1000, function() {
        // Animation complete.
    });
    $('.item-3').animate({
        top: "0px",
    }, 1000, function() {
        // Animation complete.
    });

}, 5000);

我不能使用append或prepend，因为里面的项目包含一个我无法承受松动状态的flash对象，好像我使用append或prepend，我将不得不重新点击div.item中的flash对象-x而这不是我想要的。

谢谢

Answer 1

根据您的要求，我在这里提到了一些代码。请试试这个：

<强> HTML

<div id="slideshow">
                <ul>
                    <li><img src="photo1.jpg" alt="photo1" /></li>
                    <li><img src="photo2.jpg" alt="photo2" /></li>
                    <li><img src="photo3.jpg" alt="photo3" /></li>
                    <li><img src="photo4.jpg" alt="photo4" /></li>
                </ul>
            </div>

<强> CSS

#slideshow{
                    margin:0 auto;
                    height:155px;
                    overflow: hidden;
                    position: relative;
                    width: 465px;
                }

                #slideshow ul{
                    list-style: none;
                    margin:0;
                    padding:0;
                    position: absolute;
                }

                #slideshow li{
                    float:left;
                    padding:2.5px;
                }

<强> JS

//an image width in pixels 
            var imageWidth = 155;

            //DOM and all content is loaded 
            $(document).ready(function() {

                var currentImage = 0;

            //set image count 
            var allImages = $('#slideshow li').length;

            //setup slideshow frame width
            $('#slideshow ul').width(allImages*imageWidth);

            setInterval(executeSlideShow,3000);

            function executeSlideShow()
            {
                //increase image counter
                currentImage++;
                //if we are at the end let set it to 0
                if(currentImage>=allImages) currentImage = 0;
                //calcualte and set position
                setFramePosition(currentImage);
            }

        });


        //calculate the slideshow frame position and animate it to the new position
        function setFramePosition(pos){

            //calculate position
            var px = imageWidth*pos*-1;
            //set ul left position
            $('#slideshow ul').animate({
                left: px
            }, 300);
        }

此代码不符合您的确切要求，但是，它可以帮助您实现这一目标，它也可以与您的Flash对象一起使用。在HTML中，您可以使用图像替换Flash对象。

希望这会对你有所帮助。

jquery循环3items并通过减少它来重复它

1 个答案: