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的第144行添加以下内容

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

另一方面，您也可以修改脚本：

找到代码：

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

没有对此进行测试，但它应该可行。你的选择^^

如何在此Jquery内容滑块上添加上一个按钮？

2 个答案: