html图片上下左右滑动,一个支持任意尺寸的图片上下左右滑动效果

任意尺寸的图片滑动

div { margin: 0 auto; overflow: hidden;}

.main { width: 1000px;}

.divimg_div1 { width: 380px; float: left;}

.divimg .div4_title { width: 380px; height: 103px; background-color: #EDB205; color: #FFF; font-family: "微软雅黑"; font-size: 22px; font-weight: bold; line-height: 90px; text-align: center; letter-spacing: 5px;}

.divimg_img1 { width: 380px; height: 414px; margin-top: 5px; background-color: #FFF; position: relative;}

.divimg_div2 { width: 615px; float: right;}

.divimg_img2 { width: 194px; height: 256px; float: left; background-color: #FFF; position: relative;}

.divimg_img3 { width: 417px; height: 256px; float: right; background-color: #FFF; position: relative;}

.divimg_img4 { width: 366px; height: 262px; float: left; margin-top: 4px; background-color: #FFF; position: relative;}

.divimg_img5 { width: 245px; height: 262px; float: right; margin-top: 4px; background-color: #FFF; position: relative;}

.divimg .gif { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; z-index: 2;}

.divimg .img { position: absolute; z-index: 1; left: 0; top: 0; display: none;}

$(document).ready(function(e) {

$(".divimg .img").load(function(){

var w=parseInt($(this).width());

var h=parseInt($(this).height());

var hh=$(this).parent().height();

var ww=$(this).parent().width();

var blw=w/parseInt(ww);

var blh=h/parseInt(hh);

function left(){

$(this).animate({left:-(parseInt(parseInt(hh)/h*w)-(parseInt(ww)))},10000,right)

}

function right(){

$(this).animate({left:0},10000,left);

}

function top(){

$(this).animate({top:-(parseInt(parseInt(ww)/w*h)-(parseInt(hh)))},10000,bottom);

}

function bottom(){

$(this).animate({top:0},10000,top);

}

if(blw > blh)

{

$(this).height(hh).width(parseInt(parseInt(hh)/h*w));

$(this).prev().hide();

$(this).css({"z-index":"3","display":"block"});

$(this).animate({left:-(parseInt(parseInt(hh)/h*w)-(parseInt(ww)))},10000,right);

}

else if(blw < blh)

{

$(this).height(parseInt(parseInt(ww)/w*h)).width(ww);

$(this).prev().hide();

$(this).css({"z-index":"3","display":"block"});

$(this).animate({top:-(parseInt(parseInt(ww)/w*h)-(parseInt(hh)))},10000,bottom);

}

});

$(".div4 .img").each(function(index, element) {

$(this).attr("src",$(this).attr("name"));

});

});

任意尺寸的图片滑动