Jquery_jquery를 기반으로 한 이미지 스크롤 스위치

먼저 jquery 프레임워크를 참조해야 합니다.

그런 다음 HTML 코드를 시작합니다.

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

< ;div id="New_zlMimgMv">

href="#" title="">

• 


• 

< div class="imgMvNum">
전문 질문 및 답변 플랫폼
아, 잘 발달된 수녀원인데 분리되어 있어요
같은 도시에 있는 아사드 산업< /a>
코드


코드는 다음과 같습니다:

ul,img,li,a{

border:0 ; 여백:0; 패딩:0 ; 목록 스타일: 없음; #New_zlMimgMv { 테두리: 1px 높이: ;

여백-하단: 12px;

너비: 446px;
}
#New_zlMimgMv .imgMvBox img {
높이: 160px; > 오버플로:
}
#New_zlMimgMv .imgMvNum a {
배경: #E6E6E6;
디스플레이:
높이: 32px; 라인 - 높이: 32px;
텍스트 정렬:
텍스트 장식:
너비: 120px;
#New_zlMimgMv .imgMvNum a .changeThis {
배경: #A29F9F
color:
}


마지막으로 JQ 코드:




코드 복사


코드는 다음과 같습니다.


　var imgLength=$("#imgMvCon li").length;//총 개수 가져오기 스크롤할 요소
var imgHeight=$("#imgMvCon li").height();//스크롤해야 할 요소의 높이를 가져옵니다
var totalHeight=imgLength*imgHeight;//가져오기 스크롤해야 하는 요소의 전체 높이
var mvul=$(" #imgMvCon");
var positiontop=0;//초기 오프셋 위치 정의 0var linknum=0;//초기 값 정의 버튼 전환 인덱스 제어
var mvTimer;//타이밍 컨테이너 설정
mvul.parent().css({"position":"relative"})//컨테이너의 CSS 설정

mvul.css({"position":"absolute"});//위와 동일
$(".imgMvNum a").eq(linknum).addClass("changeThis");//스타일 추가 첫 번째 버튼
function imgMv(){

if(imgLength>1)/ /사진이 아니면 다음을 실행 { positiontop=positiontop imgHeight;//저렴한 실행은 하지 마세요 위치 + 높이 if(positiontop==totalHeight)//오프셋 값이 다음과 같은 경우 총 높이는 오프셋 값을 다시 0으로 설정합니다. { positiontop=0 }

linknum ;//한 번 실행하면 버튼 전환을 제어하는 ​​데 사용되는 인덱스가 1만큼 증가합니다.

if(linknum> =imgLength)//인덱스가 스크롤 요소의 전체 길이보다 크거나 같으면 0으로 다시 인덱스
{
linknum=0;
}
mvul.animate({top:-(linknum*imgHeight )},400);//animate 속성을 사용하여 스크롤 구현, ' linknum*imgHeight'는 버튼
$(".imgMvNum a").removeClass("changeThis");//스타일 제거
$(".imgMvNum a").eq(linknum).addClass( "changeThis");//스타일 추가
}
}
function startMv(){
mvTimer=setInterval(imgMv, 4000);//타이머 함수
}
startMv( );//타이머 실행
$(".imgMvNum a").each(function(){//횡단 버튼
$ (this).mouseover(function(){//마우스 오버 버튼
clearInterval (mvTimer);//타이머 지우기
linknum=$(this).index();//마우스오버 버튼은 linknum을 설정합니다. 현재 버튼 인덱스에 대해
$(".imgMvNum a").removeClass("changeThis" );
$(this).addClass("changeThis");
mvul.animate({top:-( linknum*imgHeight)},300);//스크롤을 구현하려면 animate 속성을 사용하세요. *imgHeight'는 버튼으로 동기화를 용이하게 합니다
}).mouseout(function(){
startMv();//마우스가 다시 밖으로 움직입니다. 실행 타이머
})


각 문장마다 명확하게 설명되어 있습니다. 여기서는 단순히 상향효과만 작성하면 코드가 최적화되지 않을 수 있습니다. 주로 참조 및 아이디어용입니다.
이러한 효과를 플러그인으로 캡슐화하고 다른 방향이나 효과를 작성할 수 있습니다.
효과를 살펴보세요(이 기사의 스타일은 완전히 포함될 수 없습니다. 자신의 컴퓨터에 복사할 수 있습니다)