堆栈内存溢出
  简体   繁体   English

jQuery的图像滑块无法在IE8

[英]jquery image slider not working in ie8

 原文  2013-09-26 11:17:45  2   3    javascript/ jquery/ css/ internet-explorer-8/ slider

问题描述

I have used an image slider (Lean Slider) on my website and it works great in IE9+, FF, Chrome, but for some reason doesn't work in IE8. 我在网站上使用了图像滑块（精益滑块），它在IE9 +，FF，Chrome中运行良好，但由于某些原因在IE8中不起作用。

I've been trying to solve this for days and am really stuck! 我已经尝试解决这一问题了好几天，而且真的很卡！ Would be extremely grateful for any help! 非常感谢您的帮助！

Can anyone work this out and why its not working in IE8? 谁能解决这个问题，为什么它在IE8中不起作用？

HTML CODE : 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 CODE : 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 CODE 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);

3 个解决方案

解决方案1
 6  2013-09-26 11:20:26

As detailed in its website : 如其网站中所述 ：

Requirements 要求

Works in all major browsers including IE9+. 在包括IE9 +在内的所有主要浏览器中均可使用。 Requires jQuery v1.8. 需要jQuery v1.8。

解决方案2
 2  

Lean Slider only supports Internet 9 and higher according to their website: 精益滑块根据其网站仅支持Internet 9和更高版本：

Requirements: 要求：

Works in all major browsers including IE9+ . 在包括IE9 +在内的所有主要浏览器中均可使用。 Requires jQuery v1.8. 需要jQuery v1.8。

解决方案3
 0  2013-10-27 22:09:01

I was having problems too to work with Lean Slider in Internet Explorer 8. I fixed this by adding a comment in file "sample-styles.css", see the line "display: block;" 我在使用Internet Explorer 8中的精益滑块时也遇到了问题。我通过在文件“ sample-styles.css”中添加注释来解决此问题，请参见“ display：block;”行。 and now the controlNav works and navBar too, links works and slide fine in all others browsers. 现在，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;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 滑块不能在IE8中运行，而只能在IE8中运行？ - Slider not working in IE8 and only IE8? Nivo Slider在IE8中不起作用 - Nivo Slider not working in IE8 JQuery在IE8中不起作用 - JQuery Not Working in IE8 jQuery滑块PNG黑色边框IE8 - Jquery Slider PNG black borders IE8 jQuery Slider无法在IE中运行 - jQuery Slider not working in IE jQuery滑块在IE中不起作用 - jquery slider is not working in ie 不引人注目的JQuery在IE8中不起作用？ - Unobtrusive JQuery not working in IE8? jQuery Dropdown在IE8中不起作用 - Jquery Dropdown not working in IE8 JQuery 是：焦点在 IE8 中不起作用 - JQuery is:focus not working in IE8 jQuery fadeTo在IE8中不起作用 - jQuery fadeTo not working in IE8
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM