我在我的网站上使用了一个图像滑块(Lean Slider),它在 IE9+、FF、Chrome 中运行良好,但由于某种原因在 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);