JQuery 이미지 캐러셀 효과 구현 예

아래 편집기는 JQuery를 사용하여 이미지 캐러셀 효과를 얻는 예를 제공합니다(권장). 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 에디터 따라가서 같이 구경해요

[효과는 사진에 나와있습니다]

[원리 간략 설명]

전체 과정에 대한 간략한 소개입니다 :

1, 첫 번째 사진 제외 다른 모든 사진 숨기기,

2, 첫 번째 사진의 Alt 정보를 가져와 정보 표시줄에 표시하고 클릭 이벤트 추가

3, 4에 클릭 리스너 추가 버튼을 누르고 해당 버튼을 클릭한 후 fadeOut 및 fadeIn 메소드를 사용합니다. 이미지 표시

4, setInterval 설정 및 정기적으로 전환 기능 실행

[코드 설명]

filter(":visible"): 모두 가져오기 보이는 요소

unbind(): 일치하는 요소에서 바인딩 제거 이벤트

siblings: 일치된 요소 집합에 있는 각 요소의 고유한 형제 요소를 모두 포함하는 요소 집합 가져오기

[프로그램 소스 코드]

먼저 JS 소개 파일:

<script src="bootstrap/js/jquery-1.11.2.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
  <link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"/>

HTML 부분:

<p id="banner">
   <ul>
    <li class="on"><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    <li><a href="">6</a></li>
   </ul>
   <p id="banner_list">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img src="img/a1.jpg" width="280" height="160" /></a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img src="img/a2.jpg" width="280" height="160" /></a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img src="img/a3.jpg" width="280" height="160" /></a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img src="img/a4.jpg" width="280" height="160" /></a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img src="img/a5.jpg" width="280" height="160" /></a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img src="img/a6.jpg" width="280" height="160" /></a>
   </p>
  </p>

CSS 부분:

<style type="text/css">
 #banner {position:relative; width:280px; height:160px; border:1px solid #666; overflow:hidden;}
 #banner ul { width:138px; height:18px;position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8;z-index:1002;
    margin:0; padding:0; bottom:3px; right:5px; line-height: 18px; text-align: center;}
 #banner ul li { width: 18px; height: 18px; margin:0px 2px;float:left;display:block;color:#FFF;
　　　　　　　　　　 border:#e5eaff 1px solid;background:#6C6D6E;cursor:pointer}
 #banner ul li.on { background:#900}
 #banner ul li a { color: white;}
 #banner ul li a:hover{text-decoration: none;}
 #banner_list a{position:absolute;} <!-- 让六张图片都可以重叠在一起-->
 #banner_list{position:absolute; right: 5px; bottom: 5px;}
 </style>

JS 부분:

아아아아

위 내용은 JQuery 이미지 캐러셀 효과 구현 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!