jQuery를 사용하여 기본 웹 이미지 캐러셀 만들기 effect_jquery

우선 효과 살펴보기:

그렇습니다, 스크린샷은 없습니다~

캐러셀 효과 분석:
캐러셀 효과는 크게 캐러셀 이미지(그림 또는 컨테이너), 캐러셀 이미지 표시를 제어하는 ​​버튼(왼쪽 및 오른쪽 버튼), 인덱스 버튼(예: 위 효과 이미지 상단의 숫자 버튼)의 세 부분으로 나눌 수 있습니다. ) ), 캐러셀 이미지를 일정한 간격으로 차례로 표시합니다.
캐러셀 이미지 표시: 표시해야 하는 캐러셀 이미지는 표시되고, 표시할 필요가 없는 캐러셀 이미지는 숨겨집니다. 일반적으로 이러한 캐러셀 이미지는 위치 지정 방식으로 서로 겹쳐지며, 한 번에 하나의 캐러셀 이미지가 표시됩니다. 시간.
제어 버튼: 인덱스 버튼 위로 마우스를 클릭하거나 이동하면 인덱스 위치에 해당하는 캐러셀 이미지가 표시됩니다. 위쪽 및 아래쪽 버튼은 이전 및 다음 캐러셀 이미지 표시를 제어합니다.
기타: 일반적으로 색인 버튼에는 활성화 및 비활성의 두 가지 상태가 있습니다. 자동 캐러싱은 마우스가 캐러셀 이미지 위로 이동하면 중지되고 마우스가 떠나면 시작됩니다.

캐러셀 효과 구현에 대한 참고 사항:
jquery는 요소 선택을 위한 다양한 선택기와 메서드를 제공하므로 개발이 크게 단순화됩니다. 예를 들어 $(".slider-item").filter(".slider-item-selected")는 현재 활성 인덱스 버튼을 선택합니다.
두 캐러셀 이미지의 표시 전환 효과는 jquery의 fadeOut() 및 fadeIn() 메서드를 통해 달성됩니다. 구체적인 사용법은 jquery의 API
를 참조하세요. CSS 투명 배경 구현: background: rgba(0, 0, 0, 0.2); 필터: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)(아래 참조 정보를 참조할 수 있습니다) , 호환 가능 대부분의 주요 브라우저에는 IE가 포함되어 있습니다. 불투명도를 사용하지 않는 이유는 무엇입니까? 불투명도는 텍스트를 투명하게 만들기 때문입니다(하위 요소도 투명하게 됩니다).
HTML 뼈대가 중요합니다. 작성한 HTML의 결과가 좋아야 합니다.

코드 부분:

HTML:

<pre name="code" class="html"><div class="slider">

 <div class="slider-extra">
 <ul class="slider-nav">
  <li class="slider-item">1</li>
  <li class="slider-item">2</li>
  <li class="slider-item">3</li>
  <li class="slider-item">4</li>
 </ul>
 <div class="slider-page">
  <a class="slider-pre" href="javascript:;;"><</a>
  <a class="slider-next" href="javascript:;;">></a>
 </div>
 </div>
</div>

CSS:

* {
 padding: 0px;
 margin: 0px;
}
a {
 text-decoration: none;
}
ul {
 list-style: outside none none;
}
.slider, .slider-panel img, .slider-extra {
 width: 650px;
 height: 413px;
}
.slider {
 text-align: center;
 margin: 30px auto;
 position: relative;
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
 position: absolute;
 z-index: 8;
}
.slider-panel {
 position: absolute;
}
.slider-panel img {
 border: none;
}
.slider-extra {
 position: relative;
}
.slider-nav {
 margin-left: -51px;
 position: absolute;
 left: 50%;
 bottom: 4px;
}
.slider-nav li {
 background: #3e3e3e;
 border-radius: 50%;
 color: #fff;
 cursor: pointer;
 margin: 0 2px;
 overflow: hidden;
 text-align: center;
 display: inline-block;
 height: 18px;
 line-height: 18px;
 width: 18px;
}
.slider-nav .slider-item-selected {
 background: blue;
}
.slider-page a{
 background: rgba(0, 0, 0, 0.2);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
 color: #fff;
 text-align: center;
 display: block;
 font-family: "simsun";
 font-size: 22px;
 width: 28px;
 height: 62px;
 line-height: 62px;
 margin-top: -31px;
 position: absolute;
 top: 50%;
}
.slider-page a:HOVER {
 background: rgba(0, 0, 0, 0.4);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next {
 left: 100%;
 margin-left: -28px;
}

자바스크립트:

$(document).ready(function() {
 var length,
 currentIndex = 0,
 interval,
 hasStarted = false, //是否已经开始轮播
 t = 3000; //轮播时间间隔
 length = $('.slider-panel').length;
 
 //将除了第一张图片隐藏
 $('.slider-panel:not(:first)').hide();
 //将第一个slider-item设为激活状态
 $('.slider-item:first').addClass('slider-item-selected');
 //隐藏向前、向后翻按钮
 $('.slider-page').hide();
 
 //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
 $('.slider-panel, .slider-pre, .slider-next').hover(function() {
 stop();
 $('.slider-page').show();
 }, function() {
 $('.slider-page').hide();
 start();
 });
 
 $('.slider-item').hover(function(e) {
 stop();
 var preIndex = $(".slider-item").filter(".slider-item-selected").index();
 currentIndex = $(this).index();
 play(preIndex, currentIndex);
 }, function() {
 start();
 });
 
 $('.slider-pre').unbind('click');
 $('.slider-pre').bind('click', function() {
 pre();
 });
 $('.slider-next').unbind('click');
 $('.slider-next').bind('click', function() {
 next();
 });
 
 /**
 * 向前翻页
 */
 function pre() {
 var preIndex = currentIndex;
 currentIndex = (--currentIndex + length) % length;
 play(preIndex, currentIndex);
 }
 /**
 * 向后翻页
 */
 function next() {
 var preIndex = currentIndex;
 currentIndex = ++currentIndex % length;
 play(preIndex, currentIndex);
 }
 /**
 * 从preIndex页翻到currentIndex页
 * preIndex 整数，翻页的起始页
 * currentIndex 整数，翻到的那页
 */
 function play(preIndex, currentIndex) {
 $('.slider-panel').eq(preIndex).fadeOut(500)
  .parent().children().eq(currentIndex).fadeIn(1000);
 $('.slider-item').removeClass('slider-item-selected');
 $('.slider-item').eq(currentIndex).addClass('slider-item-selected');
 }
 
 /**
 * 开始轮播
 */
 function start() {
 if(!hasStarted) {
  hasStarted = true;
  interval = setInterval(next, t);
 }
 }
 /**
 * 停止轮播
 */
 function stop() {
 clearInterval(interval);
 hasStarted = false;
 }
 
 //开始轮播
 start();
});

첫 번째는 초기화 부분입니다. 첫 번째 캐러셀 사진을 제외한 모든 사진을 숨기고, 앞으로 및 뒤로 버튼을 숨기고, 첫 번째 인덱스 버튼을 활성화합니다.
이벤트 부분: jquery의 hover()를 사용하여 마우스가 가리키고 떠날 때 이벤트 처리를 바인딩하고 jquery의 바인딩() 메서드를 사용하여 마우스 클릭 이벤트를 바인딩하여 앞으로, 뒤로 및
을 처리합니다. 캐러셀 제어: pre(), next(), play(), start()는 자동 캐러싱을 시작하고, stop()은 자동 캐러싱을 중지합니다.
위의 js는 상대적으로 느슨하게 작성되었으며, 구조가 열악하고, 읽기 힘들고, 사용하기 쉽지 않으며, 결합도가 높습니다. 다음 기사에서는 다양한 효과, 편리한 구성 및 확장성을 사용자 정의할 수 있는 순수 jquery 캐러셀 플러그인을 제공할 것입니다.

전체 코드는 다음과 같습니다.
index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery轮播效果图 - by RiccioZhang</title>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<style type="text/css">
 * {
 padding: 0px;
 margin: 0px;
 }
 a {
 text-decoration: none;
 }
 ul {
 list-style: outside none none;
 }
 .slider, .slider-panel img, .slider-extra {
 width: 650px;
 height: 413px;
 }
 .slider {
 text-align: center;
 margin: 30px auto;
 position: relative;
 }
 .slider-panel, .slider-nav, .slider-pre, .slider-next {
 position: absolute;
 z-index: 8;
 }
 .slider-panel {
 position: absolute;
 }
 .slider-panel img {
 border: none;
 }
 .slider-extra {
 position: relative;
 }
 .slider-nav {
 margin-left: -51px;
 position: absolute;
 left: 50%;
 bottom: 4px;
 }
 .slider-nav li {
 background: #3e3e3e;
 border-radius: 50%;
 color: #fff;
 cursor: pointer;
 margin: 0 2px;
 overflow: hidden;
 text-align: center;
 display: inline-block;
 height: 18px;
 line-height: 18px;
 width: 18px;
 }
 .slider-nav .slider-item-selected {
 background: blue;
 }
 .slider-page a{
 background: rgba(0, 0, 0, 0.2);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
 color: #fff;
 text-align: center;
 display: block;
 font-family: "simsun";
 font-size: 22px;
 width: 28px;
 height: 62px;
 line-height: 62px;
 margin-top: -31px;
 position: absolute;
 top: 50%;
 }
 .slider-page a:HOVER {
 background: rgba(0, 0, 0, 0.4);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
 }
 .slider-next {
 left: 100%;
 margin-left: -28px;
 }
</style>
<script type="text/javascript">
 $(document).ready(function() {
 var length,
  currentIndex = 0,
  interval,
  hasStarted = false, //是否已经开始轮播
  t = 3000; //轮播时间间隔
 length = $('.slider-panel').length;
 
 //将除了第一张图片隐藏
 $('.slider-panel:not(:first)').hide();
 //将第一个slider-item设为激活状态
 $('.slider-item:first').addClass('slider-item-selected');
 //隐藏向前、向后翻按钮
 $('.slider-page').hide();
 
 //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
 $('.slider-panel, .slider-pre, .slider-next').hover(function() {
  stop();
  $('.slider-page').show();
 }, function() {
  $('.slider-page').hide();
  start();
 });
 
 $('.slider-item').hover(function(e) {
  stop();
  var preIndex = $(".slider-item").filter(".slider-item-selected").index();
  currentIndex = $(this).index();
  play(preIndex, currentIndex);
 }, function() {
  start();
 });
 
 $('.slider-pre').unbind('click');
 $('.slider-pre').bind('click', function() {
  pre();
 });
 $('.slider-next').unbind('click');
 $('.slider-next').bind('click', function() {
  next();
 });
 
 /**
  * 向前翻页
  */
 function pre() {
  var preIndex = currentIndex;
  currentIndex = (--currentIndex + length) % length;
  play(preIndex, currentIndex);
 }
 /**
  * 向后翻页
  */
 function next() {
  var preIndex = currentIndex;
  currentIndex = ++currentIndex % length;
  play(preIndex, currentIndex);
 }
 /**
  * 从preIndex页翻到currentIndex页
  * preIndex 整数，翻页的起始页
  * currentIndex 整数，翻到的那页
  */
 function play(preIndex, currentIndex) {
  $('.slider-panel').eq(preIndex).fadeOut(500)
  .parent().children().eq(currentIndex).fadeIn(1000);
  $('.slider-item').removeClass('slider-item-selected');
  $('.slider-item').eq(currentIndex).addClass('slider-item-selected');
 }
 
 /**
  * 开始轮播
  */
 function start() {
  if(!hasStarted) {
  hasStarted = true;
  interval = setInterval(next, t);
  }
 }
 /**
  * 停止轮播
  */
 function stop() {
  clearInterval(interval);
  hasStarted = false;
 }
 
 //开始轮播
 start();
 });
</script>
</head>
<body>
 <div class="slider">
 <div class="slider-extra">
  <ul class="slider-nav">
  <li class="slider-item">1</li>
  <li class="slider-item">2</li>
  <li class="slider-item">3</li>
  <li class="slider-item">4</li>
  </ul>
  <div class="slider-page">
  <a class="slider-pre" href="javascript:;;"><</a>
  <a class="slider-next" href="javascript:;;">></a>
  </div>
 </div>
 </div>
</body>
</html>

이쯤 되면 간단한 jquery 캐러셀 효과가 완성되었습니다. 물론 아직 개선할 부분이 많습니다.

플러그인 사용
위의 효과는 만족스러워 보입니다. 캐러셀 효과가 필요할 때마다 일부 부분을 수정해야 하는 경우(예: 캐러셀 중 애니메이션 효과, 이전글에서는 jquery의 페이드인 및 페이드아웃 효과를 사용하고 있습니다. 슬라이딩 효과로 변경하면 js 코드 수정이 불가피합니다. 그러면 jquery 캐러셀 효과를 위한 js 코드를 수정해야 합니다. 제가 작성한 프로그램은 익숙하지 않습니다. 프로그래머에게는 이러한 js를 수정하는 것이 실제로 어렵습니다. 캐러셀 플러그인의 목표 중 하나는 플러그인을 유연하게 구성할 수 있다는 것입니다(이 기사의 플러그인뿐만 아니라). 프로그래머는 풍부한 기능을 구현하기 위해 소량의 코드만 작성하면 됩니다. 물론 좋은 일이죠. 이 기사에 나오는 캐러셀 플러그인의 html 및 css 부분은 프로그래머가 직접 작성해야 하는 반면, js는 약간의 작성만으로 효과를 얻을 수 있습니다.
여기서 사용하는 zslider 플러그인은 GitHub의 오픈 소스입니다:
github:https://github.com/ricciozhang/zslider_v1
자, 코드를 살펴보겠습니다:

(function($, window, document) { 
  //---- Statics 
  var DEFAULT_ANIMATE_TYPE = 'fade',  
    ARRAY_SLICE = [].slice, 
    ARRAY_CONCAT = [].concat 
    ; 
   
  //---- Methods 
  function concatArray() { 
    var deep = false, 
      result = []; 
    if(arguments.length > 0 &&  
        arguments[arguments.length - 1] === true) { 
      deep = true; 
    } 
    for(var i = 0; i < arguments.length; i++) { 
      if(!!arguments[i].length) { 
        if(deep) { 
          for(var j = 0; j < arguments[i].length; j++) { 
            //recursive call 
            result = ARRAY_CONCAT.call(result,  
                concatArray(arguments[i][j], true)); 
          } 
        } else { 
          result = ARRAY_CONCAT.call(result, arguments[i]); 
        } 
      } else if(i != arguments.length - 1 ||  
          (arguments[arguments.length - 1] !== true && 
              arguments[arguments.length - 1] !== false)) { 
        result.push(arguments[i]); 
      } 
    } 
    return result; 
  } 
 
  //----- Core 
  $.fn.extend({ 
    zslider: function(zsliderSetting, autoStart) { 
      var itemLenght = 0, 
        currItemIndex = 0, 
        started = false, 
        oInterval = {}, 
        setting = { 
          intervalTime: 3000, 
          step: 1, 
          imagePanels: $(), 
          animateConfig: { 
            atype: 'fade', 
            fadeInSpeed: 500, 
            fadeOutSpeed: 1000 
          }, 
          panelHoverStop: true, 
          ctrlItems: $(), 
          ctrlItemActivateType: 'hover' || 'click', 
          ctrlItemHoverCls: '', 
          flipBtn: {}, 
          panelHoverShowFlipBtn: true, 
          callbacks: { 
            animate: null 
          } 
        }, 
        that = this 
        ; 
       
      //core methods 
      var slider = { 
          pre: function() { 
            var toIndex = itemLenght +  
              (currItemIndex - setting.step) % itemLenght; 
            slider.to(toIndex); 
          }, 
          next: function() { 
            var toIndex = (currItemIndex + setting.step) % itemLenght; 
            slider.to(toIndex); 
          }, 
          to: function(toIndex) { 
            //handle the index value 
            if(typeof toIndex === 'function') { 
              toIndex = toIndex.call(that, concatArray(setting.imagePanels, true),  
                    concatArray(setting.ctrlItems, true), 
                      currItemIndex, step); 
            } 
            if(window.isNaN(toIndex)) { 
              toIndex = 0; 
            } 
            toIndex = Math.round(+toIndex) % itemLenght; 
            if(toIndex < 0) { 
              toIndex = itemLenght + toIndex; 
            } 
             
            var currentPanel = setting.imagePanels.eq(currItemIndex), 
            toPanel = setting.imagePanels.eq(toIndex), 
            currrntCtrlItem = setting.ctrlItems.eq(currItemIndex) 
            toCtrlItem = setting.ctrlItems.eq(toIndex) 
            ; 
            if(!setting.callbacks.animate ||  
                setting.callbacks.animate.call(that,  
                    concatArray(setting.imagePanels, true),  
                      concatArray(setting.ctrlItems, true), 
                        currItemIndex, toIndex) === true) { 
              currrntCtrlItem.removeClass(setting.ctrlItemHoverCls); 
              toCtrlItem.addClass(setting.ctrlItemHoverCls); 
               
              toPanel.fadeIn(setting.animateConfig.fadeInSpeed); 
              currentPanel.fadeOut(setting.animateConfig.fadeOutSpeed); 
            } 
             
            //set the current item index 
            currItemIndex = toIndex; 
          }, 
          start: function() { 
            if(!started) { 
              started = true; 
              oInterval =  
                window.setInterval(slider.next, setting.intervalTime); 
            } 
          }, 
          stop: function() { 
            if(started) { 
              started = false; 
              window.clearInterval(oInterval); 
            } 
          }, 
          isStarted: function() { 
            return started; 
          } 
      }; 
      function initData() { 
        if(zsliderSetting) { 
          var temp_callbacks = zsliderSetting.callbacks; 
           
          $.extend(setting, zsliderSetting); 
          $.extend(setting.callbacks, temp_callbacks); 
           
          itemLenght = setting.imagePanels.length; 
        } 
        //convert to the jquery object 
        setting.imagePanels = $(setting.imagePanels); 
        setting.ctrlItems = $(setting.ctrlItems); 
        setting.flipBtn.container = $(setting.flipBtn.container); 
        setting.flipBtn.preBtn = $(setting.flipBtn.preBtn); 
        setting.flipBtn.nextBtn = $(setting.flipBtn.nextBtn); 
      } 
      function initLook() { 
        //show the first image panel and hide other 
        setting.imagePanels.hide(); 
        setting.imagePanels.filter(':first').show(); 
        //activate the first control item and deactivate other 
        setting.ctrlItems.removeClass(setting.ctrlItemHoverCls); 
        setting.ctrlItems.filter(':first').addClass(setting.ctrlItemHoverCls); 
        $(that).css('overflow', 'hidden'); 
        if(setting.panelHoverShowFlipBtn) { 
          showFlipBtn(false); 
        } 
      } 
      function initEvent() { 
        $(concatArray(setting.imagePanels,  
            setting.flipBtn.preBtn, setting.flipBtn.nextBtn, true)).hover(function() { 
          if(setting.panelHoverStop) { 
            slider.stop(); 
          } 
          if(setting.panelHoverShowFlipBtn) { 
            showFlipBtn(true); 
          } 
        }, function() { 
          slider.start(); 
          if(setting.panelHoverShowFlipBtn) { 
            showFlipBtn(false); 
          } 
        }); 
        if(setting.ctrlItemActivateType === 'click') { 
          setting.ctrlItems.unbind('click'); 
          setting.ctrlItems.bind('click', function() { 
            slider.to($(this).index()); 
          }); 
        } else { 
          setting.ctrlItems.hover(function() { 
            slider.stop(); 
            slider.to($(this).index()); 
          }, function() { 
            slider.start(); 
          }); 
        } 
        setting.flipBtn.preBtn.unbind('click'); 
        setting.flipBtn.preBtn.bind('click', function() { 
          slider.pre(); 
        }); 
        setting.flipBtn.nextBtn.unbind('click'); 
        setting.flipBtn.nextBtn.bind('click', function() { 
          slider.next(); 
        }); 
      } 
      function init() { 
        initData(); 
         
        initLook(); 
         
        initEvent(); 
      } 
       
      function showFlipBtn(show) { 
        var hasContainer = setting.flipBtn.container.length > 0, 
          eles; 
        eles = hasContainer &#63; setting.flipBtn.container : 
          //to the dom array: 
          /*ARRAY_CONCAT.call(ARRAY_SLICE.apply(setting.flipBtn.preBtn), 
              ARRAY_SLICE.apply(setting.flipBtn.nextBtn));*/ 
          concatArray(setting.flipBtn.preBtn,  
                  setting.flipBtn.nextBtn, true); 
        if(show) { 
          $(eles).show(); 
        } else { 
          $(eles).hide(); 
        } 
      } 
       
      init(); 
      if(arguments.length < 2 || !!autoStart){ 
        slider.start(); 
      } 
      return slider; 
    } 
  }); 
})(jQuery, window, document);