jQuery 스크롤 효과를 구현하는 방법-JS 튜토리얼-php.cn

jQuery 스크롤 효과를 구현하는 방법

小云云

풀어 주다： 2018-01-18 11:45:12

원래의

1226명이 탐색했습니다.

이 글에서는 스크롤 효과를 얻기 위한 jQuery를 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

1. 그림 캐러셀:

원칙은 다음과 같습니다.

실제로 페이지에 3개의 그림이 있지만 시각적인 부분 세트의 크기로 인해. 주로 너비를 고려)는 한 사진의 크기보다 작거나 같습니다. 다른 사진을 보려면 가장 직접적인 아이디어는 표시해야 할 사진을 보이는 영역에 두는 것입니다. 변경될 값은 전체 그림 영역의 오프셋입니다. : 타이머를 사용하여 특정 시간 간격 후에 계속 ul의 마지막 li 요소를 ul

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <script type="text/javascript" src="jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="./style.css" rel="external nofollow" >
</head>
<body>
 <p class="carousel">
 <p class="Con">
 <!-- 轮播(carousel)项目 -->
  <p class="scroll">
  <img src="./pic/1.jpg">
  <img src="./pic/2.jpg">
  <img src="./pic/3.jpg">
  <img src="./pic/4.jpg">
  <img src="./pic/5.jpg">
  <img src="./pic/6.jpg">
  <img src="./pic/7.jpg">  
  </p>

  <!-- 轮播(carousel)指标 -->
  <p class="But">
  <span class="active"></span> <!-- 0 * img.width -->
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </p> 
 </p>

 <!-- 轮播(carousel)导航 -->
 <a href="javascript:void(0)" class="prev" data-slide="prev"> << </a>
 <a href="javascript:void(0)" class="next" data-slide="next"> >> </a>
 </p>
</body>
</html>

로그인 후 복사

의 첫 번째 li 요소에 삽입합니다. 관련 권장 사항:

jquery에서 $.fn 및 이미지 스크롤 효과를 구현하는 방법

JS에서 스크롤 사용자 정의 스크롤 효과 구현

jQuery 광고 막대 스크롤 효과 구현 예시 공유

위 내용은 jQuery 스크롤 효과를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!