如何將前一個按鈕添加到此JQuery內容滑塊？

Question

我這樣做很好的教程jQuery的內容滑塊： http://brenelz.com/blog/build-a-content-slider-with-jquery/

這裏是我的測試頁： http://www.gregquinn.com/oneworld/brenez_slider_test.html

但左按鈕被隱藏在第一張幻燈片，我不希望它是。我不太瞭解jquery，但我試圖將左邊的按鈕從不透明o設置爲100或1，並且它不起作用，按鈕只出現一次，但不起作用。有誰知道如何做到這一點？下面是代碼：

(function($) { 
    $.fn.ContentSlider = function(options) 
    { 
var defaults = { 
    leftBtn : 'images/panel_previous_btn.gif', 
    rightBtn : 'images/panel_next_btn.gif', 
    width : '900px', 
    height : '400px', 
    speed : 400, 
    easing : 'easeOutQuad', 
    textResize : false, 
    IE_h2 : '26px', 
    IE_p : '11px' 
} 
var defaultWidth = defaults.width; 
var o = $.extend(defaults, options); 
var w = parseInt(o.width); 
var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length; 
var x = -1*w*n+w; // Minimum left value 
var p = parseInt(o.width)/parseInt(defaultWidth); 
var thisInstance = this.attr('id'); 
var inuse = false; // Prevents colliding animations 

function moveSlider(d, b) 
{ 
    var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left')); 
    if(isNaN(l)) { 
    var l = 0; 
    } 
    var m = (d=='left') ? l-w : l+w; 
    if(m<=0&&m>=x) { 
    b 
     .siblings('.cs_wrapper') 
     .children('.cs_slider') 
      .animate({ 'left':m+'px' }, o.speed, o.easing, function() { 
      inuse=false; 
      }); 

    if(b.attr('class')=='cs_leftBtn') { 
     var thisBtn = $('#'+thisInstance+' .cs_leftBtn'); 
     var otherBtn = $('#'+thisInstance+' .cs_rightBtn'); 
    } else { 
     var thisBtn = $('#'+thisInstance+' .cs_rightBtn'); 
     var otherBtn = $('#'+thisInstance+' .cs_leftBtn'); 
    } 
    if(m==0||m==x) { 
     thisBtn.animate({ 'opacity':'0' }, o.speed, o.easing, function() { thisBtn.hide(); }); 
    } 
    if(otherBtn.css('opacity')=='0') { 
     otherBtn.show().animate({ 'opacity':'1' }, { duration:o.speed, easing:o.easing }); 
    } 
    } 
} 

function vCenterBtns(b) 
{ 
    // Safari and IE don't seem to like the CSS used to vertically center 
    // the buttons, so we'll force it with this function 
    var mid = parseInt(o.height)/2; 
    b 
    .find('.cs_leftBtn img').css({ 'top':mid+'px', 'padding':0 }).end() 
    .find('.cs_rightBtn img').css({ 'top':mid+'px', 'padding':0 }); 
} 

return this.each(function() { 
    $(this) 
    // Set the width and height of the div to the defined size 
    .css({ 
     width:o.width, 
     height:o.height 
    }) 
    // Add the buttons to move left and right 
    .prepend('<a href="#" class="cs_leftBtn"><img src="'+o.leftBtn+'" /></a>') 
    .append('<a href="#" class="cs_rightBtn"><img src="'+o.rightBtn+'" /></a>') 
    // Dig down to the article div elements 
    .find('.cs_article') 
     // Set the width and height of the div to the defined size 
     .css({ 
     width:o.width, 
     height:o.height 
     }) 
     .end() 
    // Animate the entrance of the buttons 
    .find('.cs_leftBtn') 
     .css('opacity','0') 
     .hide() 
     .end() 
    .find('.cs_rightBtn') 
     .hide() 
     .animate({ 'width':'show' }); 

    // Resize the font to match the bounding box 
    if(o.textResize===true) { 
    var h2FontSize = $(this).find('h2').css('font-size'); 
    var pFontSize = $(this).find('p').css('font-size'); 
    $.each(jQuery.browser, function(i) { 
     if($.browser.msie) { 
     h2FontSize = o.IE_h2; 
     pFontSize = o.IE_p; 
     } 
    }); 
    $(this).find('h2').css({ 'font-size' : parseFloat(h2FontSize)*p+'px', 'margin-left' : '66%' }); 
    $(this).find('p').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' }); 
    $(this).find('.readmore').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' }); 
    } 

    // Store a copy of the button in a variable to pass to moveSlider() 
    var leftBtn = $(this).children('.cs_leftBtn'); 
    leftBtn.bind('click', function() { 
    if(inuse===false) { 
     inuse = true; 
     moveSlider('right', leftBtn); 
    } 
    return false; // Keep the link from firing 
    }); 

    // Store a copy of the button in a variable to pass to moveSlider() 
    var rightBtn = $(this).children('.cs_rightBtn'); 
    rightBtn.bind('click', function() { 
    if(inuse===false) { 
     inuse=true; 
     moveSlider('left', rightBtn); 
    } 
    return false; // Keep the link from firing 
    }); 

}); 

} }）（jQuery的）

Answer 1

嘗試刪除此代碼：

if(m==0||m==x) { 
    thisBtn.animate({ 'opacity':'0' }, o.speed, o.easing, function() { thisBtn.hide(); }); 
} 

Answer 2

你的 「後退按鈕」 有CSS： 顯示：塊; 不透明度：0;

爲了讓它顯示你可以在CSS中添加！important標誌。 所以添加在/styles/jquery.ennui.contentslider.css

.cs_leftBtn { 
    display: block !important; 
    opacity: 1 !important; 
} 

在另一方面以下某處線144還可以修改腳本：

找到代碼：

if(b.attr('class')=='cs_leftBtn') { 
    var thisBtn = $('#'+thisInstance+' .cs_leftBtn'); 
    var otherBtn = $('#'+thisInstance+' .cs_rightBtn'); 
} else { 
    var thisBtn = $('#'+thisInstance+' .cs_rightBtn'); 
    var otherBtn = $('#'+thisInstance+' .cs_leftBtn'); 
} 

並將其更改爲：

if(b.attr('class')!='cs_leftBtn') { 
    var thisBtn = $('#'+thisInstance+' .cs_rightBtn'); 
    var otherBtn = $('#'+thisInstance+' .cs_leftBtn'); 
} 

也刪除此：

.find('.cs_leftBtn') 
     .css('opacity','0') 
     .hide() 
     .end() 

未經測試，但它應該工作。您的選擇^^