我在我的网站上使用了一个图像滑块(精益滑块),它在IE9 +,FF,Chrome中效果很好,但由于某种原因在IE8中无效。
我一直在努力解决这个问题,我真的被卡住了!非常感谢任何帮助!
任何人都可以解决这个问题吗?为什么它不能在IE8中运行?
HTML CODE:
<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 CODE
/*
* 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);
答案 0 :(得分:6)
详见its website:
<强>要求强>
适用于所有主流浏览器,包括IE9 +。需要jQuery v1.8。
答案 1 :(得分:2)
Lean Slider根据他们的网站仅支持Internet 9及更高版本:
要求:
适用于所有主流浏览器,包括 IE9 + 。需要jQuery v1.8。
答案 2 :(得分:0)
我在使用Internet Explorer 8中的Lean Slider时遇到了问题。我通过在文件“sample-styles.css”中添加注释来修复此问题,请参阅“display:block;”行。现在,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;
}