왼쪽 및 오른쪽 버튼을 클릭하면 jquery로 이미지를 가로로 스크롤할 수 있으며, 한 번에 4개씩 이미지 스크롤이 완료되면 자동으로 첫 번째 페이지로 돌아갑니다.
효과 그림은 다음과 같습니다:
< ;!DOCTYPE html>
이미지를 가로로 스크롤하려면
.js" type="text/javascript">
< ;script type="text/javascript">
$(function(){
var page= 1;
var i = 4;//페이지당 사진 4개
//오른쪽으로 스크롤
$(".next").click(function(){ //이벤트 클릭
var v_wrap = $ (this).parents(".scroll"); // 현재 클릭된 요소를 기준으로 획득 Parent 요소
var v_show = v_wrap.find(".scroll_list") //동영상이 표시되는 영역 찾기
var v_cont = v_wrap.find(".box"); //영상 표시 영역의 주변 영역 찾기
var v_width = v_cont.width()
var len = v_show.find( "li").length; //내 동영상 사진 개수
var page_count = Math.ceil(len/i ) //정수가 아닌 이상 큰 방향으로 가장 작은 정수를 취합니다.
if(!v_show.is(":animated")){
if(page == page_count){
v_show.animate({left:'0px'},"slow"); 페이지 =1;
}else{
v_show.animate({left:'-=' v_width},"slow")
페이지
}
}
}) ;
//왼쪽으로 스크롤
$(".prev").click(function(){ //이벤트 클릭
var v_wrap = $(this).parents(".scroll"); // 현재 클릭한 요소를 기반으로 상위 요소 가져오기
var v_show = v_wrap.find(".scroll_list"); //비디오 표시 영역 찾기
var v_cont = v_wrap.find(".box") / /영상 표시 영역의 주변 영역 찾기
var v_width = v_cont.width();
var len = v_show.find("li ").length; 🎜>var page_count = Math.ceil(len/i); //정수가 아닌 이상 큰 방향으로 가장 작은 정수를 취합니다
if(!v_show .is(":animated")){
if(페이지 == 1){
v_show.animate({left:'-=' v_width*(page_count-1)},"slow"); else{
v_show.animate({left:' =' v_width},"slow");
페이지--
}
});
a>
- 2
- 4
li>6
- 8
- 10
- 11
- 13
/li>
- 15
/div>
HTML>