图片从右侧滑入 html,javascript – 如何使用jquery从左到右或从右到左滑动图像？...

Click here to view example I knocked up. You can easily change the code to work on a timed interval:

JS

$(document).ready(function(){

$('#rotator > a.arrow.left').click(function(e){

e.preventDefault;

var rotator = $('#rotator .images');

rotator.children('.imageHolder').first().animate({marginLeft:"-=310px"}, function(){

$(this).appendTo(rotator).removeAttr("style");

});

});

$('#rotator > a.arrow.right').click(function(e){

e.preventDefault;

var rotator = $('#rotator .images');

rotator.children('.imageHolder').last().prependTo(rotator).removeAttr("style").css("margin-left", "-310px").animate({marginLeft:"0"});

});

});

CSS

#rotator{width:310px; height:220px; position:relative; overflow:hidden; position:relative;}

#rotator .images{width:1000%; position:relative; z-index:1;}

#rotator a.arrow{width:18px; height:41px; display:block; z-index:2; text-indent:-50000em; position:absolute; top:89px; background:#FFF;}

#rotator a.arrow.left{left:0;}

#rotator a.arrow.right{right:0;}

#rotator .images .imageHolder{width:310px; float:left; height:220px; position:relative;}

#rotator .images .imageHolder span {width:290px; margin: 10px; color:#FFF; font-size:18px; position:absolute; top:0; left:0; z-index:4;}

#rotator .images .imageHolder img{width:310px; height:220px; position:absolute; display:block; top:0; left:0; z-index:3;}

HTML

Image Number 1

Image Number 2

Image Number 3

Image Number 4