yourself_jquery로 슬라이딩 그림 테스트를 구현하는 jquery의 예

//html 코드

//css code
* {margin:0px;padding:0px; list-style-type:none;}
body{text-align:center;}
.content{width:590px;margin:0 auto;text-align:left ;}
.list{너비 :565px;margin:0px 9px;border:1px solid #eee;padding:5px;display:inline-block;overflow:hidden;}
.liimg{padding:4px;border :1px solid #aaa;border-radius :2px;display:inline-block;*display:inline;*margin:0px 3px; background:#FFF;width:auto;}
.imgli{margin:2px 0px; 너비:125px;높이:300px;디스플레이 :inline-block;}
.img1{배경:url(images/img1.jpg) 반복 없음 50% 50%;}
.img2{배경:url( 이미지/img2.jpg) 반복 없음 50% 50%;}
.img3{배경:url(images/img3.jpg) 반복 없음 50% 50%;}
.img4{배경:url( Images/img4.jpg) 반복 없음 50% 50%;}

//js 코드
//그림 슬라이딩 효과를 구현하는 jquery
var zyljq = $.noContribute()
zyljq.fn .extend({
slideW:function(wid, speed){
//wid로 설정할 너비는 최소 너비 또는 최대 너비로 설정할 수 있습니다.
//설정하지 않으면 기본값 설정은 바운드 요소 너비를 기준으로 계산됩니다.
//speed 설정할 애니메이션 실행 속도는 보통, 느림, 빠름 또는 밀리초일 수 있습니다.
//설정되지 않은 경우 기본 속도는 보통입니다.
that = this; //이벤트의 모든 요소 바인딩
var eleNum = zyljq(this).size() //이미지 가져오기 Quantity
var curwidth = zyljq(this).width();//이미지의 원래 너비를 가져옵니다
if(!wid){
wid = Math.round(curwidth*4/5)
//애니메이션 종료 조건이 설정되지 않은 경우 기본 상황으로 계산됩니다
}
if(zyljq.trim(speed) == ""){
//속도가 설정되지 않은 경우 기본 속도
speed = "normal";
}
if(!isNaN(speed)){
//음수 값이 설정된 경우
speed =를 변경합니다. speed < 0? -speed:speed;
}
//사진의 최대 및 최소 너비 계산
if(wid > curwidth){
widMin = Math.floor((eleNum *curwidth - wid)/( eleNum-1)) "px";
widMax = ((curwidth*eleNum) - widMin*(eleNum-1)) "px"
}else{
widMax = Math.floor((eleNum *curwidth - wid*(eleNum-1))) "px";
widMin = wid "px";
}
//console.log("widMax=" widMax ";widMin=" widMin );
//호버 이벤트 바인딩
zyljq(this).hover(function(){
zyljq(that).stop();
zyljq(this) .animate({width: widMax},speed);
zyljq(that).not(this).animate({width:widMin},speed);
},function(){
zyljq( that).stop() ;
zyljq({width:curwidth},speed)
})


보기는 다음과 같습니다.
원래 효과: