이 글에서는 스크롤 효과를 얻기 위한 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>
jquery에서 $.fn 및 이미지 스크롤 효과를 구현하는 방법
JS에서 스크롤 사용자 정의 스크롤 효과 구현
jQuery 광고 막대 스크롤 효과 구현 예시 공유
위 내용은 jQuery 스크롤 효과를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
