html图片轮播放大,jquery+CSS3实现轮播图、js实现轮播图片自适应等比显示、图片旋转、图片拖拽、鼠标滚动放大缩小...

// 实现图片旋转自适应外边框

//算法：1、当图片宽和高同时大于外边框时以宽为标准100%(相对外边框)进行自适应，原图不变垂直水平居中显示

2、当图片宽大于外边框宽，高小于外边框高时，以宽为标准100%(相对外边框)进行自适应，原图不变垂直水平居中显示

3、当图片宽小于外边框宽，高大于外边框高时，以高为标准100%(相对外边框)进行自适应，原图不变垂直水平居中显示

4、当图片宽小于外边框宽，高小于外边框高时，原图不变垂直水平居中显示

var yuanWh,yuanht,

boxwh,boxht,

imgwh,yuanht;

var imgzoom = function (){

yuanWh = $('.swiper-slide-active

.Rotation').attr('width');

yuanht = $('.swiper-slide-active

.Rotation').attr('height');

var boxwh = $('#mask').width(),//边框的宽度

boxht =

$('#mask').height();

if(yuanWh > boxwh && yuanht > boxht){

if(yuanWh > yuanht){

$('.swiper-slide-active

.Rotation').css({'width':'100%','height':'auto','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});

}else if(yuanWh < yuanht){

$('.swiper-slide-active

.Rotation').css({'width':'auto','height':'100%','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});

}

}else if(yuanWh > boxwh && yuanht <

boxht){

$('.swiper-slide-active

.Rotation').css({'width':'100%','height':'auto','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});

}else if(yuanWh < boxwh && yuanht >

boxht){

$('.swiper-slide-active

.Rotation').css({'width':'auto','height':'100%','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});

}else if(yuanWh < boxwh && yuanht <

boxht){

$('.swiper-slide-active

.Rotation').css({'height':yuanht+'px','width':yuanWh+'px','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});

}else if(yuanWh == boxwh && yuanht == boxht){

$('.swiper-slide-active

.Rotation').css({'width':yuanWh+'px','height':yuanht+'px','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});

}

}