滑塊無法在Firefox和Chrome上工作

我爲一個項目構建了一個簡單的滑塊。我在Chrome和Firefox中測試了它，但它無法正常工作，但IE10發佈預覽工作正常。這裏是滑塊http://jsfiddle.net/VhtWh/2/滑塊無法在Firefox和Chrome上工作

這裏的小提琴是滑塊碼

$(document).ready(function() { 

    // Let's make the first slide visible and hide the rest 
    $('#homepage-slides li').css('top','0').hide(); 
    $('#homepage-slides li:first').addClass('slideActive').show().find('.slide-content').animate({left: '0', opacity: 1.0}, 800); 

    // Find all of the slides 
    var slides = $('#homepage-slides li'); 
    var current = 0; 

    // Set up the slideshow 
     $('#homepage-slider .arrow').click(function(){ 
      var li   = slides.eq(current); 
      var nextIndex = 0; 

      // Depending on whether this is the next or previous 
      // arrow, calculate the index of the next slide accordingly. 

      if($(this).hasClass('slide-right')){ 
       nextIndex = current >= slides.length-1 ? 0 : current+1; 
      } else { 
       nextIndex = current <= 0 ? slides.length-1 : current-1; 
      } 

      var next = slides.eq(nextIndex); 

      current = nextIndex; 

      // Show next slide and slide/fade in the content 
      next.addClass('slideActive').fadeIn('slow').find('.slide-content').animate({left: '0', opacity: 1.0}, 800); 

      // Hide all other slides and slide/fade out the content 
      li.removeClass('slideActive').fadeOut('slow').find('.slide-content').animate({left: '-2400', opacity: 0}, 800); 

      // Hide next arrow after last slide 
      if (nextIndex >= slides.length-1) { 
       $('#homepage-slider .arrow').addClass('hide'); 
      } 
     }); 
});

PS：導航鏈接不會在Chrome和Firefox的CSS突出顯示的設置，但在IE10

完美的作品

來源

2012-10-28 MrFoh

z-index存在問題。箭頭不在你的滑塊上面。

避免爲您的z索引使用999。他們沒有幫助。使用像1，2，3這樣的值，它會更有意義。

我更新了的jsfiddle：http://jsfiddle.net/VhtWh/3/

現在，箭頭有z-index: 3和滑塊有z-index: 2。

這是代碼：

#homepage-slider { 
    background: #050402; 
    min-width: 940px; 
    position: relative; 
    min-height: 450px; 
    z-index: 1; 
} 
#homepage-slider .slide-right, 
#homepage-slider .slide-left { 
    color: white; 
    font-size: 14px; 
    height: 23px; 
    margin-top: -26px; 
    opacity: 0.7; 
    padding: 63px 10px 5px; 
    position: absolute; 
    text-align: center; 
    text-transform: uppercase; 
    top: 50%; 
    width: 52px; 
    z-index: 3; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
} 
#homepage-slider .slide-right { 
    right: 30px; 
    background: url(../../img/left.png) no-repeat scroll 10px 10px rgba(0, 0, 0, 0.4); 
} 
#homepage-slider .slide-right:hover { 
    cursor: pointer; 
    opacity: 1.0; 
} 
#homepage-slider .slide-left { 
    left: 20px; 
    display: none; 
} 
#homepage-slider #homepage-slides { 
    height: 450px; 
    list-style: none; 
    margin: 0; 
    min-width: 940px; 
    position: relative; 
    z-index: 2; 
} 
#homepage-slider #homepage-slides li { 
    margin: 0; 
    min-width: 940px; 
    width: 100%; 
    height: 336px; 
    z-index: 2; 
    position: absolute; 
    padding: 118px 0 0; 
} 
#homepage-slider #homepage-slides li .span7 { 
    position: relative; 
    height: 336px; 
} 
#homepage-slider #homepage-slides li .slide-content { 
    position: absolute; 
} 
#homepage-slider #homepage-slides li .slide-content h1 { 
    font-size: 48px; 
    color: white; 
    margin: 21px; 
} 
#homepage-slider #homepage-slides li .slide-content p { 
    color: #999999; 
    font-size: 30px; 
    letter-spacing: -0.015em; 
    letter-spacing: -1px; 
    line-height: 36px; 
    margin-bottom: 26px; 
}

來源

2012-10-28 14:08:17

滑塊無法在Firefox和Chrome上工作

回答

相關問題