如何將下一個/上一個按鈕添加到幻燈片

超大型noob問題，我一直在絞盡腦汁，如何添加下一個/上一個按鈕到一個簡單的滑塊，我發現了由蘇田中，想要問你在這個問題上的幫助。到目前爲止，我已經得到了滑塊工作提示，並從XML（根據我的要求）加載圖像，但我很新的jQuery和無法獲得下一個/上一個按鈕的工作:(..這裏是我得到了什麼至今：如何將下一個/上一個按鈕添加到幻燈片

CSS

body { 
    margin: 0; padding: 0; 
    font: normal 10px Verdana, Arial, Helvetica, sans-serif; 
} 
*{outline: none;} 
img {border: 0;} 
.container { 
    width: 322px; 
    padding: 0; 
    margin:30px 10px 0 10px; 
} 

/*--Main Container--*/ 
.main_view { 
    position: relative; 
} 
/*--Window/Masking Styles--*/ 
.window { 
    height:270px; width: 320px; 
    overflow: hidden; /*--Hides anything outside of the set width/height--*/ 
    position: relative; 
} 
.image_reel { 
    position: absolute; 
    top: 0; left: 0; 
    z-index:1; 
} 

/*--Paging Styles--*/ 
.paging { 
    position: relative; 
    width: 320px; height:35px; 
    text-align: center; 
    line-height: 35px; 
    display: none; /*--Hidden by default, will be later shown with jQuery--*/ 
} 
.paging a { 
    padding: 0 2px; 
    text-decoration: none; 
    color: #000; 
} 
.paging a.active { 
    color: #fff; 
    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;} 

.box { 
margin:0; 
padding:0; 
display: block; 
width:318px; 
height:268px; 
float: left; 
border:1px solid #ddd; 
-moz-border-radius: 5px; 
-khtml-border-radius: 5px; 
-webkit-border-radius: 5px; 
} 

.box h3 { 
font-size: 16px; 
text-align:center; 
white-space:wrap; 
} 

.box img { 
margin-left:40px; 
margin-bottom:-5px; 
} 

.box .slider-title { 
color: red; 
margin-bottom:4px; 
margin-top:6px; 
} 

.box .slider-subtitle { 
width:320px; 
float:left; 
margin-bottom:4px; 
} 

.box .input_Default { 
width:320px; 
display:block; 
float:left; 
text-align:center; 
} 

.loading { 
background: url(loading.gif) no-repeat 0 0; 
position: absolute; 
top: 30px; 
left: 30px; 
z-index: 9999; 
} 

.subt { 
color: #fff; 
background:#1d1d1d; 
padding:10px; 
position:absolute;  
z-index:1000; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
} 

.moreinfo .subt { display:none; }

$(document).ready(function() { 

     $.ajax({ 
     type: "GET", 
     cache: false, 
     url: "ads.xml", 
     data: 'xml', 
     success: function (d) { 
    $(d).find('promo').each(function(){ 
     var $promo = $(this); 
     var title = $promo.find('title').text(); 
     var subtitle = $promo.find('subtitle').text(); 
     var image = $promo.attr('image'); 
     var link = $promo.attr('link'); 
     var index = $promo.attr('index'); 

     var ads = '<div class="box"><h3 class="slider-title">' + title + '</h3>'; 
     ads += '<dt> <a class="moreinfo" href="' + link + '" target="_blank"><img alt="' + subtitle + '" src="' + image + '" /><span class="subt">test sub</span></a></dt>'; 
     //ads += '<dd> <span class="loading" alt="Loading" />'; 
     ads += '<h3 class="slider-subtitle">' + subtitle + '</h3>' ; 
     ads += '<div class="input_Default"><a href="' + link + '">Learn More</a></div>'; 
     ads += '</dd></div>'; 

     var pager = '<a href="#" rel="' + index + '">' + index + '</a>'; 

     $('.image_reel').append($(ads)); 
     $('.paging').append($(pager)); 

     //$('.loading').fadeOut(1400); 
    }); 
} 
}); 

$('.image_reel').ajaxStop(function() { 

    $(".paging").show(); 
    $(".paging a:first").addClass("active"); 

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

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

    rotate = function(){ 
     var triggerID = $active.attr("rel") - 1; 
     var image_reelPosition = triggerID * imageWidth; 

     $(".paging a").removeClass('active'); 
     $active.addClass('active'); 

     $(".image_reel").animate({ 
      left: -image_reelPosition 
     }, 800); 
    }; 

    rotateSwitch = function(){ 
     play = setInterval(function(){ 
      $active = $('.paging a.active').next(); 
      if ($active.length === 0) { 
       $active = $('.paging a:first'); 
      } 
      rotate(); 
     }, 7000); 
    }; 

    rotateSwitch(); 

    $(".image_reel a").hover(function() { 
     clearInterval(play); 
    }, function() { 
     rotateSwitch(); 
    }); 

    $(".paging a").click(function() { 
     $active = $(this); 

     clearInterval(play); 
     rotate(); 
     rotateSwitch(); 
     return false; 
    }); 

    $(".next a").click(function() { 
     $active = $('.paging a.active').parent().next().find('a'); 
     if ($active.length === 0) { //If paging reaches the end… 
     $active = $('.paging a:first'); //go back to first 
    } 

     clearInterval(play); //Stop the rotation 
     rotate(); //Trigger rotation immediately 
     rotateSwitch(); // Resume rotation 
     return false; //Prevent browser jump to link anchor 
    }); 

    $(".prev a").click(function() { 
     $active = $('.paging a.active').prev(); 
     if ($active.length === 0) { //If paging reaches the end… 
     $active = $('.paging a:first'); //go back to first 
    } 
     clearInterval(play); //Stop the rotation 
     rotate(); //Trigger rotation immediately 
     rotateSwitch(); // Resume rotation 
     return false; //Prevent browser jump to link anchor 
    }); 

    $('.moreinfo').each(function() { 
     var subt = $(this).find('.subt'); 
     $(this).hover(
      function() { subt.appendTo('body'); }, 
      function() { subt.appendTo(this); } 
     ).mousemove(function(e) { 
      var x = e.pageX + 20, 
       y = e.pageY + 20, 
       w = subt.width(), 
       h = subt.height(), 
       dx = $(window).width() - (x + w), 
       dy = $(window).height() - (y + h); 

      if (dx < 20) x = e.pageX - w - 20; 
      if (dy < 20) y = e.pageY - h - 20; 

      subt.css({ left: x, top: y }); 
     });   
    }); 

}); 

});

HTML

<div class="container"> 
      <div class="window">  
       <div class="image_reel"> 
       </div> 
      </div> 
      <div class="paging"> 
<a rel="nofollow" href="#" class="next" >next</a> 
<a href="#" class="next" >next</a> 
<a href="#" class="prev" rel="nofollow" >previous</a> 
      </div> 
<a rel="nofollow" href="#" class="next" >next</a> 
<a rel="nofollow" href="#" class="next" >next</a> 
</div>

所有的圖像和按鈕都是從XML中拉出來的，工作得很好，但下一個/ prev按鈕是我的主要問題:(。

這裏是的jsfiddle原始的，非XML版本我拿出來測試，編輯，原始版本http://jsfiddle.net/scPqJ/1/

能的忍者你在那裏一個告訴我正確的方向？

編輯

任何下一代尋找一個解決方案，在sohtanaka.com用戶評論幫助我得到它的工作，這裏是的jsfiddle，http://jsfiddle.net/scPqJ/3/

這是對的js的按鈕（你將它設置在原來的JS的結束，年底前括號：

$(".previous a").click(function() {  
    $active = $('.paging a.active').next(); 
    if ($active.length === 0) { //If paging reaches the end... 
     $active = $('.paging a:first'); //go back to first 
    } 

    clearInterval(play); //Stop the rotation 
    rotate(); //Trigger rotation immediately 
    rotateSwitch(); // Resume rotation 
    return false; //Prevent browser jump to link anchor 
});  


$(".next a").click(function() {  
    $active = $('.paging a.active').prev(); 
    if ($active.length === 0) { //If paging reaches the end... 
     $active = $('.paging a:last'); //go back to first 
    } 

    clearInterval(play); //Stop the rotation 
    rotate(); //Trigger rotation immediately 
    rotateSwitch(); // Resume rotation 
    return false; //Prevent browser jump to link anchor 
});

之後你設置了，所有你需要做的就是確定下一/上的div在HTML中，像這樣：

HTML

<div class="next"> 
<a href="#" >next</a> 
</div> 

<div class="previous"> 
<a href="#" >previous</a> 
</div>

，瞧！

來源

2011-03-28 Andres Ilich

這個應該工作（儘管它遠非完美，見下面的註釋）：

$('#next').click(function(){ 
    var $pagingLinks = $('.paging a'); 
    var $nowActive = $('.paging a.active'); 

    var nextIndex = $nowActive.index()+1; 
    if(nextIndex == $pagingLinks.length) nextIndex = 0; 
    $active = $pagingLinks.eq(nextIndex);  

    //Reset Timer 
    clearInterval(play); //Stop the rotation 
    rotate(); //Trigger rotation immediately 
    rotateSwitch(); // Resume rotation 
    return false; //Prevent browser jump to link anchor  
});

我假設你在這裏得到了與ID的鏈接「下一步」這裏繼續前進。你會注意到這段代碼的第二部分（以'Reset Timer'開始）取自你的代碼（用於點擊分頁鏈接的事件處理程序）。

評論：

在你的「分頁」鏈接的代碼
（我複製的部分），你所面對的是變量「$活躍」。這個變量是全局定義的（作爲全局對象的一個屬性），通常應該避免這個變量。你在這裏使用jquery，所以它肯定是有意義的，將自己的'滑塊'代碼封裝在一個插件上（請參閱jquery文檔以獲得幫助）
而不是設置'$ active'變量，你可能會使用。數據（）只是將此信息添加到您的插件的一些主要元素

來源

2011-03-28 14:59:28 schellmax

我用你的方法試過，但由於某種原因，它會向後一路幻燈片的開始，走出視口:(感謝您的意見，我會一旦我更好地掌握了jQuery如何與文檔一起工作，我會仔細考慮它們。 – 2011-03-28 15:27:55

剛剛複製了我的代碼，似乎工作？http://jsfiddle.net/scPqJ/4/ – schellmax 2011-03-30 08:52:54

經過測試你的代碼在我的原始作品上，它確實工作得很好，嘗試使用它與我的xml版本，而不是我在JsFiddle上的原始版本....非常感謝您的回覆，您的版本實際上對我更好。 – 2011-03-30 15:29:20

如何將下一個/上一個按鈕添加到幻燈片

回答

相關問題