我可以在IE8 / 9中使这个基于javascript的滑块工作吗?

时间:2014-08-06 19:12:41

标签: javascript jquery css internet-explorer-8 slider

这是一个简单的基于javascript的滑块。

到目前为止,我已经在Safari(Mac),Chrome(Win),Firefox(Win)和IE11的更新版本中使用它。

它在IE8中不起作用,我也相信9。

这是一种解决方法,所以它适用于IE8和IE9吗?

代码:here

HTML:

<div id="slider-wrapper">
<div id="slider">
    <div class="sp"><img src="http://i.imgur.com/1Lc66Hp.png"></div>
    <div class="sp"><img src="http://i.imgur.com/ILasdy4.png"></div>
    <div class="sp"><img src="http://i.imgur.com/4CZ6tJH.png"></div>
    <div class="sp"><img src="http://i.imgur.com/qgyowEN.png"></div>
</div>
</div>

<div id="nav">
    <div id="button-previous">prev</div>
    <div id="button-next">next</div>
</div>

CSS:

#slider-wrapper {width:960px; height:480px;}
#slider {width:100%; height:100%; position:relative; overflow:hidden;}
.sp {width:100%; height:100%; position:absolute;left: 100%;}
.sp.first-in {left:0;}
.sp img {width: 100%;}
#nav {margin-top:20px; width:100%;}
#button-previous {float:left;}
#button-next {float:right;}

JS:

$(document).ready(function(){

$('.sp').first().addClass('current').css({left: 0});

$('#button-next').click(function(){

    var old = $('.current').removeClass('current');  

    if ( old.is(':last-child')) {
        old.animate({left: "-100%"});
        $('.sp').first().css({left: "100%"}).addClass('current').animate({left: 0});
    }else{
       old.animate({left: "-100%"});
       old.next().css({left: "100%"}).addClass('current').animate({left: 0});
    }        

});

$('#button-previous').click(function(){

    var old = $('.current').removeClass('current');   

    if ( old.is(':first-child')) {
        old.animate({left: "100%"});
        $('.sp').last().css({left: "-100%"}).addClass('current').animate({left: 0});
    }else{
        old.animate({left: "100%"});
        old.prev().css({left: "-100%"}).addClass('current').animate({left: 0});
    }
});
});

感谢。

0 个答案:

没有答案