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

我为Jquery内容滑块编写了一个很好的教程：

这是我的测试页面：

但是第一张幻灯片上的左键是隐藏的，我不希望它被隐藏。我对jquery了解不多，但我尝试将左按钮的不透明度从0设置为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
  });

});

（函数（$）{
$.fn.ContentSlider=函数（选项）
{
var默认值={
leftBtn:'images/panel_previous_btn.gif'，
rightBtn:'images/panel_next_btn.gif'，
宽度：“900px”，
高度：“400px”，
速度:400,，
放松：“easeOutQuad”，
textResize:false，
IE_h2:'26px'，
IE_p:'11px'
}
var defaultWidth=defaults.width；
var o=$.extend（默认值、选项）；
var w=parseInt（o.宽度）；
var n=this.children（'.cs_wrapper'）。children（'.cs_slider'）。children（'.cs_article'）。长度；
var x=-1*w*n+w；//最小左值
var p=parseInt（o.width）/parseInt（defaultWidth）；
var thisInstance=this.attr（'id'）；
var inuse=false；//防止碰撞动画
函数移动滑块（d，b）
{
var l=parseInt（b.sillides（'.cs_包装器'）。children（'.cs_滑块'）。css（'left'））；
if（isNaN（l））{
var l=0；
}
变量m=（d=‘左’）？l-w:l+w；
如果（m=x）{
B
.sides（“.cs_包装器”）
.children（“.cs_滑块”）
.animate（{'left'：m+'px'），o.speed，o.easing，function（）{
因纽斯=假；
});
如果（b.attr（'class'）='cs\u leftBtn'）{
var thisBtn=$（'#'+thisInstance+'.cs_leftBtn'）；
var otherBtn=$（'#'+thisInstance+'.cs_rightbn'）；
}否则{
var thisBtn=$（'#'+thisInstance+'.cs_rightbn'）；
var otherBtn=$（'#'+thisInstance+'.cs_leftBtn'）；
}
如果（m==0 | | m==x）{
动画（{'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}）；
}
}
}
功能VCenterBTN（b）
{
//Safari和IE似乎不喜欢用于垂直居中的CSS
//按钮，所以我们用这个函数强制它
var mid=parseInt（o.height）/2；
B
.find（'.cs_leftBtn img'）.css（{'top'：mid+'px'，padding'：0}）.end（）
.find（'.cs_rightbn img'）.css（{'top'：mid+'px'，'padding'：0}）；
}
返回此值。每个（函数（）{
$（本）
//将div的宽度和高度设置为定义的大小
.css({
宽度：o.width，
高度：o.height
})
//添加向左和向右移动的按钮
.prepend（“”）
.append（“”）
//深入到文章div元素
.find（“.cs_文章”）
//将div的宽度和高度设置为定义的大小
.css({
宽度：o.width，
高度：o.height
})
(完)
//设置按钮入口的动画
.find（“.cs_leftBtn”）
.css（'opacity'，'0'）
.hide（）
(完)
.find（“.cs_rightbn”）
.hide（）
.animate（{'width'：'show'}）；
//调整字体大小以匹配边框
如果（o.textResize==true）{
var h2FontSize=$（this.find（'h2'）.css（'font-size'）；
var pFontSize=$（this.find（'p'）.css（'font-size'）；
$.each（jQuery.browser，函数（i）{
如果（$.browser.msie）{
h2FontSize=o.IE_h2；
pFontSize=o.IE\u 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%'）；
}
//将按钮的副本存储在要传递给moveSlider（）的变量中
var leftBtn=$（this）.children（'.cs_leftBtn'）；
leftBtn.bind（'click'，function（）{
如果（inuse==false）{
因纽斯=真；
移动滑块（“右”，左BTN）；
}
return false；//防止触发链接
});
//将按钮的副本存储在要传递给moveSlider（）的变量中
var rightbn=$（this）.children（'.cs_rightbn'）；
rightbn.bind（'单击'，函数（））{
如果（inuse==false）{
因纽斯=真；
移动滑块（“左”，右BTN）；
}
return false；//防止触发链接
});
});

}

---

})（jQuery）

尝试删除此代码：

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

您的“上一个按钮”具有CSS： 显示：块； 不透明度：0

为了让它显示您可以在CSS中覆盖！添加了重要标志。 因此，在/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()

---

我还没有测试过这个，但它应该可以工作。您的选择^^

不透明度从0变为1。alpha不透明度从0变为100。感谢您的回复，我尝试了两种方法，第一种，按钮根本不起作用第二种，我更改了js代码，在第一张幻灯片上，左按钮不起作用。我的测试页面当前有您建议的修改脚本：这确实显示按钮，但左按钮在第一个页面上不起作用slide@user1269988如果你能制作一个JSFIDLE，那么调试就更容易了。谢谢你的回复，我是JSFIDLE新手，我甚至不能让它像我的测试页面一样在JSFIDLE中工作，javascript调用在html窗口还是java窗口中进行？以下是我到目前为止的情况：