这是一个简单的基于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});
}
});
});
感谢。