집 >웹 프론트엔드 >JS 튜토리얼 >JQuery를 사용하여 이미지 캐러셀 효과 달성

JQuery를 사용하여 이미지 캐러셀 효과 달성

小云云원래의: 2018-01-04 09:27:551912검색

이 기사에서는 주로 JQuery를 사용하여 이미지 캐러셀 효과를 구현하는 예를 제공합니다(권장). 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

【효과는 사진과 같습니다】

【원리 간략 설명】

전체 과정에 대한 간략한 설명은 다음과 같습니다.

1. 모든 사진 숨기기. 첫 번째 사진을 제외하고

2. 첫 번째 사진의 alt 정보를 가져와서 정보 표시줄에 표시하고 클릭 이벤트를 추가합니다.

3. 4개 버튼에 대한 클릭 리스너를 추가하고 해당 버튼을 클릭한 후 fadeOut 및 fadeIn 메소드로 그림 표시

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

[코드 설명]

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

unbind(): 경계 제거 events from match elements

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 부분:

<script type="text/javascript">
 var t = n =0, count;
 $(document).ready(function(){ 
  count=$("#banner_list a").length;
  $("#banner_list a:not(:first-child)").hide();
  $("#banner_info").html($("#banner_list a:first-child").find("img").attr(&#39;alt&#39;));
  $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr(&#39;href&#39;), "_blank")});
  $("#banner li").click(function() {
   var i = $(this).text() -1;//获取Li元素内的值，即1，2，3，4
   n = i;
   if (i >= count) return;
   $("#banner_info").html($("#banner_list a").eq(i).find("img").attr(&#39;alt&#39;));
   $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr(&#39;href&#39;), "_blank")})
   $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
   document.getElementById("banner").style.background="";
   $(this).toggleClass("on");
   $(this).siblings().removeAttr("class");
  });
  t = setInterval("showAuto()", 4000);
  $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
 })
 
 function showAuto()
 {
  n = n >=(count -1) ?0 : ++n;
  $("#banner li").eq(n).trigger(&#39;click&#39;);
 }
 </script>

아직 배우지 않으셨나요? 서둘러서 한번 시도해 보세요.

JQuery를 사용하여 이미지 캐러셀 효과 달성

관련 기사