쇼핑몰에서 일반적으로 사용되는 스크롤 포커스 이미지 효과 코드는 간단하고 실용적입니다_jquery

이런 쇼핑몰의 효과는 인터넷에 많이 나와 있는데 대부분이 플러그인이거나, JS가 너무 복잡해서 공부하는 아이들에게는 어려울 것 같습니다. . 필요하신 분은 댓글과 코드 게시도 환영합니다. (편의상 아무것도 추가하지 않고 코드만 복사해서 사용하셔도 됩니다.) :

코드 복사 코드는 다음과 같습니다.

;head>

< ;script type="text/javascript">
$(function(){
var len = $(".num > li").length;
var index = 0;
var adTimer;
$(".num li").mouseover(function(){
index = $(".num li").index(this);
showImg(index);
}).eq(0).mouseover();
//애니메이션을 중지하려면 안으로 밀고, 애니메이션을 시작하려면 밖으로 밀어냅니다.
$('.ad').hover(function(){
clearInterval( adTimer);
},function(){
adTimer = setInterval(function(){
showImg(index )
index ; if(index==len){index=0; }
}, 3000)
}).trigger("mouseleave")
// 상단을 제어하여 다른 슬라이드 표시
function showImg(index) {
var adHeight = $(".content .ad").height();
$(".slider").stop (true,false).animate({top : -adHeight*index}, 1000)
$(".num li").removeClass("on")
.eq(index).addClass(" on");
}