javascript - 帮助自动旋转无限 jquery 轮播。无法让轮播无限循环而不是 'rewind'

Question

我正在使用 jquery 构建一个自动旋转的图像轮播，我试图让图像无限旋转，而不是当它到达最后一个图像时，它“倒回”到第一个图像并重新开始。不幸的是，我是 jquery 游戏的新手，所以我在让它工作时遇到了一些麻烦。我试过拼凑我在在线教程中找到的代码并修改它以适合我的代码，但没有成功。我想我可能必须克隆现有图像才能在它们循环后出现，但我不确定该往哪个方向走。非常感谢任何帮助。这是我正在使用的代码:

HTML:

<div class="main_view">
    <div style="width:165px; height:98px; margin:0; padding:0; border:0;">
        <img src="/content/template_images/wanalogo-blackBG-165x98.png" />
    </div>
    <div class="window">
        <ul class="image_reel">
        <li><a href="/MLB/Philadelphia-Phillies-Tickets" title="Phillies"><img src="/content/template_images/Banners/SideBanner/imgscroll1.jpg" alt="Phillies" /></a></li>
        <li><a href="/NFL/Philadelphia-Eagles-Tickets" title="Eagles"><img src="/content/template_images/Banners/SideBanner/imgscroll2.jpg" alt="Eagles" /></a></li>
        <li><a href="/NHL/Philadelphia-Flyers-Tickets" title="Flyers"><img src="/content/template_images/Banners/SideBanner/imgscroll3.jpg" alt="Flyers" /></a></li>
        <li><a href="/NBA/Philadelphia-76ers-Tickets" title="76ers"><img src="/content/template_images/Banners/SideBanner/imgscroll4.jpg" alt="76ers" /></a></li>
        <li><a href="/NCAA-Basketball" title="NCAA Basketball"><img src="/content/template_images/Banners/SideBanner/imgscroll8.jpg" alt="NCAA Basketball" /></a></li>
        <li><a href="/Concerts-Tickets" title="Concerts"><img src="/content/template_images/Banners/SideBanner/imgscroll5.jpg" alt="Concerts" /></a></li>
        <li><a href="/Theatre-Tickets" title="Theatre"><img src="/content/template_images/Banners/SideBanner/imgscroll6.jpg" alt="Theatre" /></a></li>
        <li><a href="/Other-Events-Tickets" title="Family Events"><img src="/content/template_images/Banners/SideBanner/imgscroll7.jpg" alt="Family Events" /></a></li>
        </ul>
    </div>
    <div style="width:170px; height:290px; border:0; padding:0; margin: -290px 0px 0px 0px;">
        <img src="/content/template_images/black-fade-border-170x290.png" />
    </div>
    <div class="botTextBox">
        <center>
        <div class="botText">
        <a href="/MLB/Philadelphia-Phillies-Tickets" title="Phillies">Phillies</p></a>
        <a href="/NFL/Philadelphia-Eagles-Tickets" title="Eagles"><p>Eagles</p></a>
        <a href="/NHL/Philadelphia-Flyers-Tickets" title="Flyers"><p>Flyers</p></a>
        <a href="/NBA/Philadelphia-76ers-Tickets" title="76ers"><p>76ers</p></a>
        <a href="/NCAA-Basketball" title="NCAA Basketball"><p>NCAA Basketball</p></a>
        <a href="/Concerts-Tickets" title="Concerts"><p>Concert</p></a>
        <a href="/Theatre-Tickets" title="Theatre"><p>Theatre</p></a>
        <a href="/Other-Events-Tickets" title="Family Events"><p>Family Event</p></a>
        </div>
        </center>
    </div>
        <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
        <a href="#" rel="5">5</a>
        <a href="#" rel="6">6</a>
        <a href="#" rel="7">7</a>
        <a href="#" rel="8">8</a>
        </div>
</div>

Javascript

$(document).ready(function() {
    $(".paging").show();
    $(".paging a:first").addClass("active");

    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;

    $(".image_reel").css({'width' : imageReelWidth});

    rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $(".paging a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 750 );
    $(".botText").animate({
    left: -image_reelPosition
    }, 750 );
    }; 

    //Rotation  and Timing Event
    rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every X seconds
    $active = $('.paging a.active').next(); //Move to the next paging
    if ( $active.length === 0) { //If paging reaches the end...
    $active = $('.paging a:first'); //go back to first
    }
    rotate(); //Trigger the paging and slider function
    }, 1500); //Timer speed in milliseconds (7 seconds)
    };

    rotateSwitch(); //Run function on launch

    //On Hover
    $(".image_reel a").hover(function() {
        clearInterval(play); //Stop the rotation
    }, function() {
        rotateSwitch(); //Resume rotation timer
    }); 

    //On Click
    $(".paging a").click(function() {
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation timer
        return false; //Prevent browser jump to link anchor
    });
});

编辑- CSS:

.main_view {
    float: left;
    overflow:hidden;
    position: relative;
    width:170px; 
    height:475px; 
    background-color:black; 
    border:0; 
    margin:2px; 
    padding:2px 0px 2px 0px; 
    text-align:center;
}
.window {
    height:290px;   width:170px;
    overflow: hidden;
    position: relative;
    background-color:black; 
    border:0; 
    padding:0px; 
    margin:0px;
}
.image_reel {
    position: absolute;
    top: 0; left: 0;
    margin-left:-40px;
}
.image_reel img {float: left;}

.botTextBox {
    height:87px; width:1360px;
    overflow:hidden;
    position:relative;
    background:url(/content/template_images/black-side-bottom-170x87.png) no-repeat; 
    margin:0px; 
    padding:0px;
}
.botText {
    position:relative;
    top:0; left:0;
    margin:32px 0px 0px 0px; 
    padding:0; 
    text-align:center;
}
.botText p {width:170px; float: left;}

.paging {
    position: absolute;
    bottom: 40px; right: -7000px;
    width: 178px; height:47px;
    z-index: 100; 
    text-align: center;
    line-height: 40px;
    display: none; 
}
.paging a {
    padding: 5px;
    text-decoration: none;
    color: #fff;
}
.paging a.active {
    font-weight: bold;
    background: #920000;
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

...实际上您可以在右侧看到我正在尝试用 jquery 替换的 flash 横幅...

再一次，我真的很感谢任何帮助。就像我说的，我在使用 jQuery 方面有点新，而且我一整天都在纠结这个问题。非常感谢。

Answer 1

你的轮播的问题是图像 block 仍然是一个巨大的 block ，所以当你走到尽头时，你必须一直滑回到第一个图像循环，这就是导致“倒带”的原因看。

我会做的是:

1. 将每个图像加载到一个数组中
2. 从图库中删除除第一张图片以外的所有图片。
3. 添加下一张图片(在数组中 next 循环是 number % length)
4. 动画 slider 显示下一张图片
5. 重置 CSS 并删除现在不可见的第一张图片
6. 冲洗并重复。

下面是一个带有递归函数的示例实现。

我创建了一个使用 jQuery 的 .animate() 的 slider 函数 。在 .animate() 的回调中，我在 setTimeout() 引起的短暂暂停后再次调用 slider 函数。 .

下面的例子很简单，你可以很容易地调整它，例如显示上一张和下一张图片的条子等等......这只是为了说明一个有限数量的无限幻灯片的简单实现图像。

我在一个简单的实现中添加了如何在图库下显示不断变化的标题。标题信息取自图像 HTML 代码。此标题也可以放在每张图片下方并与图片一起滑动。

jsFiddle example

$(function() {          
    var showing = 0;    // which image is showing
    var imgs = [];      // array to hold images HTML
      // Put image elements into an array
    imgs = $("#gallery img").toArray();
    var numberOf = imgs.length;    
      // Remove all but first image from DOM
    $("#slider").html("");
    $("#slider").html(imgs[0]);    
      // Add title text div
    $("#gallery").after('<a id="title"/>');
      // The recursive slider function
    var nextImage = function() {
          // Add next image (only use increment once!)
        $("#slider").append(imgs[++showing % numberOf]);
          // Show image title
        $("#title").html($(imgs[showing % numberOf]).attr("title"));
          // Link to original
        $("#title").attr("href", $(imgs[showing % numberOf]).attr("src"));
          // Animate the slider
        $("#slider").animate({
            left: '-=200'
        }, 2000, function() {            
              // Remove image to the left
            $("#slider img:first").remove();            
              // Reset CSS
            $("#slider").css("left", "0px");            
              // Call animationg function again
            setTimeout(function() {nextImage(); }, 1000);
        });  
    }        
    nextImage();  // Call next image for the first time         
});

静态 HTML 包括:

<div id="gallery">
    <div id="slider">
        ... the images here ...
    </div>
</div>

PS:看传送带工作效果 look at this .

使用的 jQuery 和 JS 方法和属性:

• .animate()
• .append()
• .css()
• :first selector
• .html()
• .length
• .remove()
• setTimeout()
• .toArray()