jquery_jquery를 기반으로 왼쪽 및 오른쪽 버튼을 클릭하여 이미지의 가로 스크롤을 구현합니다.-JS 튜토리얼-php.cn

jquery_jquery를 기반으로 왼쪽 및 오른쪽 버튼을 클릭하여 이미지의 가로 스크롤을 구현합니다.

WBOY

풀어 주다： 2016-05-16 17:37:40

원래의

1073명이 탐색했습니다.

왼쪽 및 오른쪽 버튼을 클릭하면 jquery로 이미지를 가로로 스크롤할 수 있으며, 한 번에 4개씩 이미지 스크롤이 완료되면 자동으로 첫 번째 페이지로 돌아갑니다.
효과 그림은 다음과 같습니다:
jquery_jquery를 기반으로 왼쪽 및 오른쪽 버튼을 클릭하여 이미지의 가로 스크롤을 구현합니다.

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

 
< ;!DOCTYPE html> 
 
 이미지를 가로로 스크롤하려면<br> <meta charset=utf-8" /> <br><style type=" text/css"> <br>* { margin:0; padding:0;} <br>body { 글꼴 크기: 12px;} <br>.box {높이:왼쪽; 너비:440px; 숨김; 위치:상대적; } <br>.box li { 디스플레이:블록:왼쪽; ; 여백 오른쪽: 5px; 너비: 100px; 높이: 70px; 배경:#BBB; 글꼴 - 크기: 50px; 색상:#ccc; 줄 높이: 66px; 텍스트 장식: 없음; 텍스트 정렬: 중앙; :pointer;} <br>.box li:hover { color:#999; } <br>.box li.active { background-position:-174px 0; color:#555;cursor:default;} <br>a .prev, a.next {배경:url(http://www.shengyijie.net/image/left_02.png) no-repeat 0 0; display:block;width:23px;height:43px; :15px 0 0 0; 커서:포인터;} <br>a.next { 배경 이미지:url(http://www.shengyijie.net/images/right_02.png)} <br>.scroll_list{ 너비:10000em ; 위치:절대; } <br></style> <br><!- - jQuery 소개 --> .js" type="text/javascript"></script> <br>< ;script type="text/javascript"> <br>$(function(){ <br>var page= 1; <br>var i = 4;//페이지당 사진 4개<br>//오른쪽으로 스크롤<br>$(".next").click(function(){ //이벤트 클릭<br>var v_wrap = $ (this).parents(".scroll"); // 현재 클릭된 요소를 기준으로 획득 Parent 요소<br>var v_show = v_wrap.find(".scroll_list") //동영상이 표시되는 영역 찾기<br>var v_cont = v_wrap.find(".box"); //영상 표시 영역의 주변 영역 찾기 <br>var v_width = v_cont.width() <br>var len = v_show.find( "li").length; //내 동영상 사진 개수<br>var page_count = Math.ceil(len/i ) //정수가 아닌 이상 큰 방향으로 가장 작은 정수를 취합니다. <br>if(!v_show.is(":animated")){ <br>if(page == page_count){ <br>v_show.animate({left:'0px'},"slow"); 페이지 =1; <br>}else{ <br>v_show.animate({left:'-=' v_width},"slow") <br>페이지 <br>} <br>} <br>}) ; <br>//왼쪽으로 스크롤<br>$(".prev").click(function(){ //이벤트 클릭<br>var v_wrap = $(this).parents(".scroll"); // 현재 클릭한 요소를 기반으로 상위 요소 가져오기<br>var v_show = v_wrap.find(".scroll_list"); //비디오 표시 영역 찾기<br>var v_cont = v_wrap.find(".box") / /영상 표시 영역의 주변 영역 찾기<br>var v_width = v_cont.width(); <br>var len = v_show.find("li ").length; 🎜>var page_count = Math.ceil(len/i); //정수가 아닌 이상 큰 방향으로 가장 작은 정수를 취합니다<br>if(!v_show .is(":animated")){ <br>if(페이지 == 1){ <br>v_show.animate({left:'-=' v_width*(page_count-1)},"slow"); else{ <br>v_show.animate({left:' =' v_width},"slow"); <br>페이지-- <br>} <br>}); <br></script> <br><script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <br><!-- 예-> margin:0 auto;width:550px;"> <br><!-- "이전 페이지" 링크 --> <br><a class="prev" href="#"></ a> <BR><div class="box"> <BR><ul> <BR> <li>2</li> <BR><li>4</li> <BR></li><BR> li>6</li> <br><li>8</li> <br><li> 10</li> <br><li>11</li> <br><li>13</li> /li> <br><li>15</li> <br></li> /div> <br><!-- "다음 페이지" 링크 --> <br><a class="next" href="#"></a> <br></div> <br></ HTML> <br><br>