jquery圖像滑塊不工作在ie8

我在我的網站上使用了圖像滑塊（精益滑塊），它在IE9 +，FF，Chrome，但由於某種原因在IE8中不起作用。jquery圖像滑塊不工作在ie8

我一直在試圖解決這個問題，我真的陷入了困境！將非常感謝任何幫助！

任何人都可以解決這個問題，爲什麼它不能在IE8中工作？

HTML代碼：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
    <script src="http://www.berkshire.co.za/js/lean-slider.js"></script> 
    <link rel="stylesheet" href="http://www.berkshire.co.za/css/lean-slider.css" type="text/css" /> 
    <link rel="stylesheet" href="http://www.berkshire.co.za/sample-styles.css" type="text/css" /> 
<title>Bershire & Black | Finest custom suits and shirts |</title> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 

</head> 

<body "> 

    <div class="slider-wrapper"> 
     <div id="slider"> 
      <div class="slide1"> 
       <img src="http://www.berkshire.co.za/images/slider/slider1.jpg" alt="" /> 
      </div> 
      <div class="slide2"> 
       <img src="http://www.berkshire.co.za/images/slider/slider2.jpg" alt="" /> 
      </div> 
      <div class="slide3"> 
       <img src="http://www.berkshire.co.za/images/slider/slider3.jpg" alt="" /> 
      </div> 
      <div class="slide4"> 
       <img src="http://www.berkshire.co.za/images/slider/slider4.jpg" alt=""/> 
      </div> 
      <div class="slide5"> 
       <img src="http://www.berkshire.co.za/images/slider/slider5.jpg" alt=""/> 
      </div>    
     </div> 
     <div id="slider-direction-nav"></div> 
     <div id="slider-control-nav"></div> 
    </div> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
     var slider = $('#slider').leanSlider({ 
      directionNav: '#slider-direction-nav', 
      controlNav: '#slider-control-nav' 
     }); 
    }); 
    </script> 


    </div> 
    </div> 

</body> 
</html>

CSS代碼：

/* 
* Lean Slider v1.0 
* http://dev7studios.com/lean-slider 
* 
* Copyright 2012, Dev7studios 
* Free to use and abuse under the MIT license. 
* http://www.opensource.org/licenses/mit-license.php 
*/ 

.lean-slider { 
    position: relative; 
    *zoom: 1; 
} 
.lean-slider:before, 
.lean-slider:after { 
    content: " "; 
    display: table; 
} 
.lean-slider:after { 
    clear: both; 
} 

.lean-slider-slide { 
    float: left; 
    width: 100%; 
    margin-right: -100%; 
    display: none; 
} 
.lean-slider-slide.current { display: block; } 

/* 
* Lean Slider Sample Styles 
* http://dev7studios.com/lean-slider 
*/ 

.slider-wrapper { 
    position: relative; 
    background: #fff url(images/loading.gif) no-repeat 50% 50%; 
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.4); 
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.4); 
    box-shadow: 0 0 0px rgba(0,0,0,0.4); 
} 
.lean-slider { overflow: hidden; } 
.lean-slider-slide { 
    display: block; 
    position: relative; 
    opacity: 0; 
    -webkit-transition: opacity 0.6s linear; 
    -moz-transition: opacity 0.6s linear; 
    -ms-transition: opacity 0.6s linear; 
    -o-transition: opacity 0.6s linear; 
    transition: opacity 0.6s linear; 
} 
.lean-slider-slide.current { opacity: 1; } 
.lean-slider-slide img { 
    display: block; 
    width: 100%; 
} 

#slider-direction-nav { 
    position: absolute; 
    left: 0; 
    top: 47%; 
    width: 100%; 
    -webkit-transition: opacity 0.2s linear; 
    -moz-transition: opacity 0.2s linear; 
    -ms-transition: opacity 0.2s linear; 
    -o-transition: opacity 0.2s linear; 
    transition: opacity 0.2s linear; 
    opacity: 0.2; 
} 
.slider-wrapper:hover #slider-direction-nav { opacity: 1; } 
#slider-direction-nav a { 
    float: left; 
    display: block; 
    width: 26px; 
    height: 37px; 
    background: url(images/arrows.png) no-repeat 0 0; 
    text-indent: -9999px; 
} 
#slider-direction-nav .lean-slider-next { 
    float: right; 
    background-position: 100% ; 
} 

#slider-control-nav { 
    position: absolute; 
    left: 0; 
    bottom: 10px; 
    width: 100%; 
    text-align: center; 
    -webkit-transition: opacity 0.2s linear; 
    -moz-transition: opacity 0.2s linear; 
    -ms-transition: opacity 0.2s linear; 
    -o-transition: opacity 0.2s linear; 
    transition: opacity 0.2s linear; 
    opacity: 0.2; 
} 
.slider-wrapper:hover #slider-control-nav { opacity: 1; } 
#slider-control-nav a { 
    display: inline-block; 
    width: 14px; 
    height: 14px; 
    background: url(images/bullets.png) no-repeat 0 0; 
    text-indent: -9999px; 
    margin: 0 3px; 
    -webkit-transition: none; 
    -moz-transition: none; 
    -ms-transition: none; 
    -o-transition: none; 
    transition: none; 
} 
#slider-control-nav a.active { background-position: 100% 0; } 

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-width : 480px) { 

    #slider-direction-nav, 
    #slider-control-nav { opacity: 1; } 

} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 

    #slider-direction-nav, 
    #slider-control-nav { opacity: 1; } 

}

JS代碼

/* 
* Lean Slider v1.0 
* http://dev7studios.com/lean-slider 
* 
* Copyright 2012, Dev7studios 
* Free to use and abuse under the MIT license. 
* http://www.opensource.org/licenses/mit-license.php 
*/ 

;(function($) { 

    $.fn.leanSlider = function(options) { 

     // Defaults 
     var defaults = { 
      pauseTime: 4000, 
      pauseOnHover: true, 
      startSlide: 0, 
      directionNav: '', 
      directionNavPrevBuilder: '', 
      directionNavNextBuilder: '', 
      controlNav: '', 
      controlNavBuilder: '', 
      prevText: 'Prev', 
      nextText: 'Next', 
      beforeChange: function(){}, 
      afterChange: function(){}, 
      afterLoad: function(){} 
     }; 

     // Set up plugin vars 
     var plugin = this, 
      settings = {}, 
      slider = $(this), 
      slides = slider.children(), 
      currentSlide = 0, 
      timer = 0; 

     var init = function() { 
      // Set up settings 
      settings = $.extend({}, defaults, options); 

      // Add inital classes 
      slider.addClass('lean-slider'); 
      slides.addClass('lean-slider-slide'); 

      currentSlide = settings.startSlide; 
      if(settings.startSlide < 0 || settings.startSlide >= slides.length) currentSlide = 0; 
      $(slides[currentSlide]).addClass('current'); 

      // Set up directionNav 
      if(settings.directionNav && $(settings.directionNav).length){ 
       var prevNav = $('<a href="#" class="lean-slider-prev">'+ settings.prevText +'</a>'), 
        nextNav = $('<a href="#" class="lean-slider-next">'+ settings.nextText +'</a>'); 
       if(settings.directionNavPrevBuilder) prevNav = $(settings.directionNavPrevBuilder.call(this, settings.prevText)); 
       if(settings.directionNavNextBuilder) nextNav = $(settings.directionNavNextBuilder.call(this, settings.nextText)); 

       prevNav.on('click', function(e){ 
        e.preventDefault(); 
        plugin.prev(); 
       }); 
       nextNav.on('click', function(e){ 
        e.preventDefault(); 
        plugin.next(); 
       }); 

       $(settings.directionNav).append(prevNav); 
       $(settings.directionNav).append(nextNav); 
      } 

      // Set up controlNav 
      if(settings.controlNav && $(settings.controlNav).length){ 
       slides.each(function(i){ 
        var controlNav = $('<a href="#" class="lean-slider-control-nav">'+ (i + 1) +'</a>'); 
        if(settings.controlNavBuilder) controlNav = $(settings.controlNavBuilder.call(this, i, $(slides[i]))); 

        controlNav.on('click', function(e){ 
         e.preventDefault(); 
         plugin.show(i); 
        }); 

        $(settings.controlNav).append(controlNav); 
       }); 
      } 

      // Set up pauseOnHover 
      if(settings.pauseOnHover && settings.pauseTime && settings.pauseTime > 0){ 
       slider.hover(
        function() { 
         clearTimeout(timer); 
        }, 
        function() { 
         doTimer(); 
        } 
       ); 
      } 

      // Initial processing 
      updateControlNav(); 
      doTimer(); 

      // Trigger the afterLoad callback 
      settings.afterLoad.call(this); 

      return plugin; 
     }; 

     // Process timer 
     var doTimer = function(){ 
      if(settings.pauseTime && settings.pauseTime > 0){ 
       clearTimeout(timer); 
       timer = setTimeout(function(){ plugin.next(); }, settings.pauseTime); 
      } 
     }; 

     // Update controlNav 
     var updateControlNav = function(){ 
      if(settings.controlNav){ 
       $('.lean-slider-control-nav', settings.controlNav).removeClass('active'); 
       $($('.lean-slider-control-nav', settings.controlNav).get(currentSlide)).addClass('active'); 
      } 
     }; 

     // Prev 
     plugin.prev = function(){ 
      // Trigger the beforeChange callback 
      settings.beforeChange.call(this, currentSlide); 

      currentSlide--; 
      if(currentSlide < 0) currentSlide = slides.length - 1; 
      slides.removeClass('current'); 
      $(slides[currentSlide]).addClass('current'); 
      updateControlNav(); 
      doTimer(); 

      // Trigger the afterChange callback 
      settings.afterChange.call(this, currentSlide); 
     }; 

     // Next 
     plugin.next = function(){ 
      // Trigger the beforeChange callback 
      settings.beforeChange.call(this, currentSlide); 

      currentSlide++; 
      if(currentSlide >= slides.length) currentSlide = 0; 
      slides.removeClass('current'); 
      $(slides[currentSlide]).addClass('current'); 
      updateControlNav(); 
      doTimer(); 

      // Trigger the afterChange callback 
      settings.afterChange.call(this, currentSlide); 
     }; 

     // Show 
     plugin.show = function(index){ 
      // Trigger the beforeChange callback 
      settings.beforeChange.call(this, currentSlide); 

      currentSlide = index; 
      if(currentSlide < 0) currentSlide = slides.length - 1; 
      if(currentSlide >= slides.length) currentSlide = 0; 
      slides.removeClass('current'); 
      $(slides[currentSlide]).addClass('current'); 
      updateControlNav(); 
      doTimer(); 

      // Trigger the afterChange callback 
      settings.afterChange.call(this, currentSlide); 
     }; 

     // Call constructor 
     return init(); 
    }; 

})(jQuery);

來源

2013-09-26 user2818677

jsfiddle會讓它更容易調試 – MichaC

IE8不支持CSS3並且滑塊似乎可以使用它。 – Alvaro

「我一直在試圖解決這個問題，而且真的陷入了困境！」在這些日子裏，你沒有檢查DOC和支持？ –

正如its website詳細說明：

要求

適用於所有主流瀏覽器，包括IE9 +。需要jQuery v1.8。

來源

2013-09-26 11:20:26 Alvaro

我是如此接近擊敗你... – 2013-09-26 11:21:53

精益滑塊只支持因特網9，並根據他們的網站更高：

要求：

工程在所有主要瀏覽器，包括IE9 +。需要jQuery v1.8。

來源

2013-09-26 11:21:33

不需要downvoted ... –

我在@alvaro幾秒鐘後直接發佈，這不是故意複製。沒有必要downvote – 2013-09-26 11:23:48

謝謝你們。任何人都可以推薦一個更適合瀏覽器的替代圖片滑塊嗎？包括IE8？ – user2818677

我有問題太與精益滑塊在Internet瀏覽器8工作，我固定這通過在文件「樣品styles.css的」，參見線路添加註釋「顯示：塊;」現在controlNav工作和navBar，鏈接工程和所有其他瀏覽器罰款。

.lean-slider-slide { 
    /*display: block;*/ 
    position: relative; 
    opacity: 0; 
    -webkit-transition: opacity 0.6s linear; 
    -moz-transition: opacity 0.6s linear; 
    -ms-transition: opacity 0.6s linear; 
    -o-transition: opacity 0.6s linear; 
    transition: opacity 0.6s linear; 
}

來源

2013-10-27 22:09:01

jquery圖像滑塊不工作在ie8

回答

相關問題