Javascript 帮助自动旋转无限jquery旋转木马。无法使旋转木马无限循环而不是'；倒带'；

我正在用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>

.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;}

编辑-CSS:

<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>

.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;}

…实际上，您可以看到右侧的flash横幅，我正试图用jquery横幅替换它

---

再一次，我真的非常感谢在这方面的任何帮助。正如我所说的，我对使用jQuery有点陌生，我一整天都在为这个问题磕磕绊绊。非常感谢。

旋转木马的问题是，图像块仍然是一个巨大的块，因此当您到达末尾时，您必须一直滑回要循环的第一个图像，这就是导致“倒带”外观的原因

我要做的是：

将每个图像加载到数组中

从库中删除除第一个图像以外的所有图像

添加下一个图像（在具有循环的数组中，下一个是

number%length

）

设置滑块动画以显示下一个图像

重置CSS并删除现在不可见的第一个图像

冲洗并重复

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

我创建了一个利用jQuery的的滑块函数。在

.animate（）

的回调中，我在引起的短暂停顿后再次调用滑块函数

下面的示例非常简单，您可以轻松地调整它，例如显示上一幅和下一幅图像的碎片以及其他内容。。。。这只是为了演示一个具有有限数量图像的无限幻灯片的简单实现

我添加了一个简单的实现，说明了如何在多媒体资料下显示不断变化的标题。标题信息取自图像HTML代码。这个标题也可以放在每张图片下面，并随图片一起滑动

$（函数（）{
var showing=0；//正在显示哪个图像
var imgs=[]；//用于保存HTML图像的数组
//将图像元素放入数组中
imgs=$（“#画廊img”）.toArray（）；
var numberOf=imgs.长度；
//从DOM中删除除第一个图像以外的所有图像
$（“#滑块”）.html（“”）；
$（“#滑块”）.html（imgs[0]）；
//添加标题文本div
$（“#图库”）。在（'之后



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










Peter Ajtai对一种方法有一个很好的总结，但我有另一种方法，它只需要在脚本中添加几行即可

基本上，它克隆第一个图像、文本和寻呼机链接并将其添加到末尾。当动画在最后一个图像（现在实际上是第一个）上结束时，窗口的左侧位置将重置为零，动画将继续。我尝试使用
[新建]添加注释
这样您就可以更容易地找到更改。而且，我希望它会变得清晰

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

 var imageWidth = $(".window").width();
 // [NEW] add one, since we are adding the first image to the end
 var imageSum = $(".image_reel img").size() + 1; 
 var imageReelWidth = imageWidth * imageSum;

 // [NEW] included modifying width of botTextBox 
 $(".image_reel, .botTextBox").css({'width' : imageReelWidth });

 // [NEW] clone first image & text and add it to the end, include dummy paging
 $(".image_reel li:first").clone().appendTo( $(".image_reel") );
 $(".botText a:first").clone().appendTo( $(".botText") );
 $(".paging").append('<a href="#" rel="' + imageSum + '"></a>'); // don't include the number in the link

 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)

  // [NEW] Slider Animation
  $(".image_reel, .botText").animate({
   left: -image_reelPosition
  }, 750, function(){
   // [NEW] callback function (called when animation is done)
   if (triggerID == imageSum - 1) {
    // if we're back to the first image, reset the window position
    $(".image_reel, .botText").css('left',0);
   }
  });
 };

 //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...
    // [NEW] go back to second image (the first is now the last)        
    $active = $('.paging a:eq(1)');
   }
   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
 });

});

$（文档）.ready（函数（）{
$（“.paging”）.show（）；
$（“.paging a:first”）.addClass（“active”）；
var imageWidth=$（“.window”）.width（）；
//[新]添加一个，因为我们正在将第一个图像添加到末尾
var imageSum=$（“.image\u卷筒img”）.size（）+1；
var imageReelWidth=imageWidth*imageSum；
//[新增]包括修改botTextBox的宽度
$（“.image\u reel.botTextBox”）.css（{'width'：imageReelWidth}）；
//[新建]克隆第一个图像和文本并将其添加到末尾，包括虚拟分页
$（.image\u-revel li:first”）.clone（）.appendTo（$（.image\u-revel”）；
$（“.botText a:first”）.clone（）.appendTo（$（“.botText”）；
$（“.paging”）.append（“”）；//不要在链接中包含数字
旋转=函数（）{
var triggerID=$active.attr（“rel”）-1；//获取要滑动的次数
var image\u reelPosition=triggerID*imageWidth；//确定图像卷轴需要滑动的距离
$（“.paging a”）.removeClass（'active'）；//删除所有活动类
$active.addClass（'active'）；//添加active类（在rotateSwitch函数中声明$active）
//[新]滑块动画
$（“.image\u revel，.botText”）。制作动画({
左：-图像位置
}，750，函数（）{
//[NEW]回调函数（动画完成时调用）
如果（triggerID==imageSum-1）{
//如果我们回到第一个图像，重置窗口位置
$（.image\u-reel.botText”）.css（'left'，0）；
}
});
};
//旋转和计时事件
旋转开关=函数（）{
play=setInterval（函数（）{//Set timer-每X秒重复一次
$active=$（'.paging a.active'）.next（）；//移动到下一页
如果（$active.length==0）{//如果分页到达末尾。。。
//[新建]返回第二个图像（第一个现在是最后一个）
$active=$（'.分页a:eq（1）'）；
}
rotate（）；//触发分页和滑块函数
}，1500）；//计时器速度（毫秒（7秒）
};
rotateSwitch（）；//启动时运行函数
//悬停
$（“.image_卷盘a”）.hover（函数（）{
clearInterval（播放）；//停止旋转
}，函数（）{
旋转开关（）；//恢复旋转计时器
}); 
//点击
$（“.a”）。单击（函数（）{
$active=$（this）；//激活单击的分页
//重置计时器
clearInterval（播放）；//停止旋转
旋转（）；//Tri
$(document).ready(function() {
 $(".paging").show();
 $(".paging a:first").addClass("active");

 var imageWidth = $(".window").width();
 // [NEW] add one, since we are adding the first image to the end
 var imageSum = $(".image_reel img").size() + 1; 
 var imageReelWidth = imageWidth * imageSum;

 // [NEW] included modifying width of botTextBox 
 $(".image_reel, .botTextBox").css({'width' : imageReelWidth });

 // [NEW] clone first image & text and add it to the end, include dummy paging
 $(".image_reel li:first").clone().appendTo( $(".image_reel") );
 $(".botText a:first").clone().appendTo( $(".botText") );
 $(".paging").append('<a href="#" rel="' + imageSum + '"></a>'); // don't include the number in the link

 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)

  // [NEW] Slider Animation
  $(".image_reel, .botText").animate({
   left: -image_reelPosition
  }, 750, function(){
   // [NEW] callback function (called when animation is done)
   if (triggerID == imageSum - 1) {
    // if we're back to the first image, reset the window position
    $(".image_reel, .botText").css('left',0);
   }
  });
 };

 //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...
    // [NEW] go back to second image (the first is now the last)        
    $active = $('.paging a:eq(1)');
   }
   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
 });

});