jquery_jquery를 기반으로 캐러셀 포커스 맵 플러그인 구현

코드를 직접 업로드하는 것은 좋지 않을 수 있습니다.

 /**
 * Created by Steven on 2015/07/10/0010.
 * @email zhuttymore@126.com
 */
 
 (function ($) {
 
  $.fn.slider = function (opt) {
   opt = $.extend({
    speed:'fast',
    auto: false,
    interval: 1000
   }, opt);
 
   var _this = this;
   var index = 0;
   _this.find('.window li').width(_this.width());
 
   var animate = function(index){
    var win = _this.find('.window');
    var offset = win.parent().width();
    win.animate({'marginLeft': -offset * index}, opt.speed);
    _this.find('.tab li').removeClass('select');
    _this.find('.tab li').eq(index).addClass('select');
   };
 
   _this.find('.tab li').mouseover(function () {
    index = parseInt($(this).index());
    animate(index);
 
   });
 
   _this.find('.btn li:first-child').click(function(){
    --index;
    if(index < 0){
     index = _this.find('.window li').length - 1;
    }
    animate(index);
   });
 
   _this.find('.btn li:last-child').click(function(){
    ++index;
    if(index >= _this.find('.window li').length){
     index = 0;
    }
    animate(index);
   });
 
   if(opt.auto){
    var time = setInterval(function(){
     ++index;
     if(index >= _this.find('.window li').length){
      index = 0;
     }
     animate(index);
    },opt.interval);
   }
 
   return $.each(this,function(index,ele){});
  };
 })(jQuery);

HTML

 <div class="slider">
   <ul class="btn">
    <li><i class=" icon-caret-left"></i></li>
    <li><i class=" icon-caret-right"></i></li>
   </ul>
   <ul class="window">
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg" alt=""/></li>
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg" alt=""/></li>
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg" alt=""/></li>
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_590990_446978.jpg" alt=""/></li>
   </ul>
   <ul class="tab">
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg" alt=""/></li>
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg" alt=""/></li>
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg" alt=""/></li>
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_590990_446978.jpg" alt=""/></li>
   </ul>
  </div>

CSS

 .slider {
  height: 440px;
  overflow: hidden;
  position: relative;
 }
 .slider .btn li{
  position: absolute;
  width: 30px;
  height: 50px;
  cursor: pointer;
  color: #fff;
  text-align: center;
  font-size: 40px;
  top:45%;
 }
 .slider .btn li:first-child {
 
  left:0;
 
 }
 
 .slider .btn li:last-child {
 
  right:0;
 
 }
 
 .slider img {
  width: 100%;
  height: 100%;
 }
 
 .slider .window {
  width: 40000px;
  height: 400px;
  overflow: hidden;
 }
 
 .slider .window li {
  float: left;
  overflow: hidden;
  width: 1200px;
 }
 
 .slider .tab {
  position: absolute;
  z-index: 5;
  width: 880px;
  margin: -40px auto;
  left: 13%;
 }
 
 .slider .tab li {
  float: left;
  width: 200px;
  height: 80px;
  margin-left: 18px;
  cursor: pointer;
 }

필요에 따라 CSS 파일을 DIY할 수 있지만 html .slider의 구조는 동일해야 합니다.

실행:
$('.slider').slider({자동: true, 간격: 2000});

JS 구조 개선:

/**
 * Created by Steven on 2015/07/10/0010.
 * @email zhuttymore@126.com
 */

(function ($) {

 $.fn.extend({
  slider:function (opt) {
   opt = $.extend({
    
   }, opt);
   //Do something here
   
   return $.each(this,function(index,ele){});
  }
 });

})(jQuery);

위 내용은 이 글의 전체 내용입니다. jqueryt 프로그래밍을 배우는 모든 분들께 도움이 되기를 바랍니다.