<div class="example" style="overflow: hidden; width: 266px;">   
 <ul style="width: 798px; float: left; height: 216px; margin-left: 0px;">
  <li style="width: 266px; float: left; height: 216px;"></li>
  <li style="width: 266px; float: left; height: 216px;"></li>
  <li style="width: 266px; float: left; height: 216px;"></li>
 </ul>
</div>

插件源碼：實(shí)現(xiàn)向左和向上輪播，手動(dòng)切換也是向左和向上切換（手動(dòng)切換關(guān)鍵源碼）

var all = $panel.find('>li'),
  prevAll = new Array();
prevAll[0] = all.eq(0);
//將目標(biāo)節(jié)點(diǎn)前的所有節(jié)點(diǎn)都保存到prevAll中，動(dòng)畫結(jié)束后將這些節(jié)點(diǎn)一一按順序加到容器的后面
for(var i = 1; i < len; i++){
  all.eq(i).css({display: 'none'});
  prevAll[i] = all.eq(i);
}
...

$panel.animate({ 'marginLeft': -options.width + 'px' }, options.duration, function() {
  for(var i = 0; i < prevAll.length; i++){
    $panel.append($(prevAll[i]).css({display: 'block'})); //將當(dāng)前展示節(jié)點(diǎn)前的所有節(jié)點(diǎn)都加載到最后
  }
  $panel.css({ marginLeft: 0 });

})

滑動(dòng)輪播的實(shí)現(xiàn)方式主要有兩種

1)切換父元素margin-left,將第一個(gè)子元素不斷添加到父容器結(jié)尾

簡單實(shí)現(xiàn)

var $panel = $('example');
var scrollTimer = setInterval(function() {
      scrollNews($panel);
    }, 3000);
function $scrollNews(){
 $panel.animate({ 'marginLeft': '-266px' }, 500, function() {
  $panel.css({ marginLeft: 0 }).find('>li:first').appendTo($panel);
 })
}

這種方式有一個(gè)問題就是在老IE上可能存在兼容問題。

2) 累計(jì)方式設(shè)置父元素margin-left

不過在margin-left設(shè)置到最小的時(shí)候（滑動(dòng)到最后一個(gè)元素），將第一個(gè)子元素的位置設(shè)置為最后一個(gè)子元素的后面，當(dāng)最后一個(gè)元素滾動(dòng)到第一個(gè)元素后，父元素margin-left置為0且第一個(gè)子元素的位置歸位。舉個(gè)簡單代碼例子

var $panel = $('.example'),
 index = 0;
var scrollTimer = setInterval(function() {
      scrollNews($panel);
    }, 3000);

function scrollNews(){
 if(++index >= 2){
  $panel.css({
   'paddingLeft': 266 + 'px'
  })
  $panel.find('>li:first').css({
   'position': 'absolute', 
   'left': 266*index + 'px'
  });
 }
 $panel.animate({ 'marginLeft': -266*index + 'px' }, 500, function() {
  if(++index > 3){
   $panel.css({ marginLeft: 0 });
  }
  if(index >= 3){
   index = 0;
   $panel.css({ 
    marginLeft: 0,
    'paddingLeft': 0 
   });
   $panel.find('>li:first').css({
    'position': 'static', 
     'left': 'auto'
    });
   }
 })
}

更復(fù)雜的滾動(dòng)插件需要支持水平和垂直方向的滾動(dòng)（四個(gè)方向）、可以手動(dòng)切換焦點(diǎn)、可以翻上一個(gè)下一個(gè)。附上本人寫完整的插件源碼

插件源碼jquery.nfdscroll.js：支持水平和垂直方向（四個(gè)方向）滾動(dòng)，手動(dòng)切換會(huì)隨切換方向滾動(dòng)

/**
 * @author '陳樺'
 * @date '2016-5-10'
 * @description 滑動(dòng)輪播插件，支持水平和垂直方向滑動(dòng)輪播
 *
 * @example 
  html:
  <div class="nfdnews_topnews example">
    <!-- 滾動(dòng)內(nèi)容ul -->
    <ul>
      <li><a href="xxx" target="_blank" title="xxx"></a></li>
      <li><a href="xxx" target="_blank" title="xxx"></a></li>
      <li><a href="xxx" target="_blank" title="xxx"></a></li>
      <li><a href="xxx" target="_blank" title="xxx"></a></li>
    </ul>   
    <!-- 焦點(diǎn)列表，可選 -->       
    <ol>
      <li class=""></li>
      <li class=""></li>
      <li class=""></li>
      <li class=""></li>
    </ol>
    <!-- 上一個(gè)和下一個(gè)，可選 -->
    <div>
      <a class="nfdscroll-prev" href="javascript:void(0);"></a>
      <a class="nfdscroll-next" href="javascript:void(0);"></a>
    </div>
  </div>

  js:
  $('.example').nfdscroll({
    startIndex:0,
    width:'266',
    height:'216',
    interval:2000,
    selected:'circle',
    prevText:'',
    nextText:'',
    deriction:'left',
    callback: function(index,$currentNode){
      console.log(index)
    }
  });
 * @param startIndex {Number} 默認(rèn)從第幾個(gè)滾動(dòng)體開始滾動(dòng),可選（0-n,0表示第一個(gè)，默認(rèn)為0）
 * @param width {Number} 滾動(dòng)體寬度,可選（當(dāng)寬度為0時(shí)表示不設(shè)置寬度）
 * @param height {Number} 滾動(dòng)體高度,可選（當(dāng)高度為0時(shí)表示不設(shè)置高度）
 * @param interval {Number} 間隔時(shí)間，單位毫秒, 當(dāng)值為負(fù)時(shí)表示不進(jìn)行自動(dòng)滾動(dòng)
 * @param duration {Number} 動(dòng)畫持續(xù)時(shí)間
 * @param selected {String} 滾動(dòng)切換小圖標(biāo)（焦點(diǎn)列表）當(dāng)前class
 * @param deriction {String} 滾動(dòng)方向，支持left/right和top/bottom
 * @param callback {Function} 滑動(dòng)動(dòng)畫結(jié)束時(shí)觸發(fā)的回調(diào)，參數(shù)(index,$currentNode),index:輪播結(jié)束后展示的節(jié)點(diǎn)的索引；currentNode：輪播結(jié)束后當(dāng)前展示的節(jié)點(diǎn)的jquery對象
 * @param prevText {String} 上一個(gè)按鈕的文本，默認(rèn)是"上一個(gè)"
 * @param nextText {String} 下一個(gè)按鈕的文本，默認(rèn)是"下一個(gè)"
 */
 jQuery.fn.extend({nfdscroll: function(options) {
  var defaultOpt = {
    startIndex: 0,
    width: 0,//滾動(dòng)體寬度,可選（當(dāng)寬度為0時(shí)表示不設(shè)置寬度）
    height: 0,//滾動(dòng)體高度,可選（當(dāng)高度為0時(shí)表示不設(shè)置高度度）
    interval: 1000,//間隔時(shí)間毫秒
    duration: 400,//動(dòng)畫持續(xù)時(shí)間
    selected:'selected',//滾動(dòng)切換小圖標(biāo)當(dāng)前class
    prevText:'上一個(gè)',
    nextText:'下一個(gè)',
    deriction:'left',//滾動(dòng)方向
    callback: function(index,$currentNode){//每次滾動(dòng)到新節(jié)點(diǎn)后馬上觸發(fā)，currentNode是當(dāng)前展示的節(jié)點(diǎn)的jquery對象
    }
  },
  $this = this,
  $panel = $this.find('>ul'),//滾動(dòng)容器
  $panelList = $panel.find('>li'),
  $selectList = $this.find('>ol>li'),//選擇容器
  options = jQuery.extend(defaultOpt,options),
  animateFn,//滾動(dòng)動(dòng)畫
  max = $panel.find(">li").length,//要滾動(dòng)的節(jié)點(diǎn)的數(shù)量
  focusIndex = 0,//當(dāng)前展示的節(jié)點(diǎn)的索引
  nfdscrollTimer = 0,//計(jì)時(shí)器
  inAnimation = false,//動(dòng)畫過程中不再響應(yīng)其他動(dòng)畫
  isWaitting = false,//是否有未執(zhí)行的等待動(dòng)畫
  waittingIndex;//未執(zhí)行的等待動(dòng)畫的目標(biāo)index

  $('.nfdscroll-prev').text(options.prevText);
  $('.nfdscroll-next').text(options.nextText);

  //只有一個(gè)展示，不需要輪播
  if($panelList.length <= 1){
    return;
  }
  //當(dāng)前動(dòng)畫沒有做完但是焦點(diǎn)已經(jīng)切換到下一個(gè)地方，這個(gè)函數(shù)就是用來執(zhí)行保障當(dāng)前顯示的頁面和鼠標(biāo)指定的目標(biāo)一致的處理
  function doWaitting(){
    if(isWaitting){
      startScroll(waittingIndex);
    }
  }
  //開始輪播
  function startScroll(toIndex){
    stopScroll();
    if(inAnimation) {
      isWaitting = true;
      waittingIndex = toIndex;
      return;//動(dòng)畫過程中不再響應(yīng)其他動(dòng)畫
    }else{
      isWaitting = false;
    }

    if(toIndex == undefined){
      if(options.interval > 0){        
        nfdscrollTimer = setInterval(function(){
          animateFn(toIndex);
        },options.interval);
      }        
    //跳到指定index后再計(jì)時(shí)
    }else{
      animateFn(toIndex);
      if(options.interval > 0){
        nfdscrollTimer = setInterval(function(){
          animateFn();
        },options.interval);
      }
    }
  }
  //停止輪播
  function stopScroll(){
    clearInterval(nfdscrollTimer);
  }
  //向左向右滾動(dòng)動(dòng)畫
  //參數(shù)toIndex: number,滾動(dòng)到指定index
  function leftRightAnimate(toIndex){
    //默認(rèn)滾動(dòng)方式
    if(toIndex == undefined){
      if(options.deriction == 'left'){
        toIndex = focusIndex + 1;
      }else{
        toIndex = focusIndex - 1;
      }      
      
    }
    if(toIndex != focusIndex){
      inAnimation = true;

      //當(dāng)前為最后一個(gè)輪播體時(shí)的處理
      var tInd = 0;
      if(toIndex >= max){//最后一張圖片繼續(xù)滾動(dòng)時(shí)
        $panel.css({
          'paddingLeft': options.width + 'px'
        })
        $panelList.eq(0).css({
          'position': 'absolute', 
          'left': options.width*toIndex + 'px'
        });
        tInd = 0;
      }else if(toIndex < 0){//僅僅在當(dāng)前圖片是第一個(gè)圖片，然后點(diǎn)擊上一個(gè)圖片的時(shí)候出現(xiàn)
        //當(dāng)前為最后一個(gè)輪播體時(shí)的處理
        $panelList.eq(max - 1).css({
          'position': 'absolute', 
          'left': -options.width + 'px'
        });
        tInd = max - 1;
      }else{
        tInd = toIndex;
      }
      
      //先將焦點(diǎn)切換過去
      $selectList.filter('.' + options.selected).removeClass(options.selected)
        .end().eq(tInd).addClass(options.selected); 

      $panel.animate({ 'marginLeft': -options.width*toIndex + 'px' }, options.duration, function() {
        focusIndex = tInd;

        if(toIndex >= max){//最后一張圖片繼續(xù)滾動(dòng)時(shí)
          $panel.css({ 
            'marginLeft': 0,
            'paddingLeft': 0 
          });
          $panelList.eq(0).css({
            'position': 'static', 
            'left': 'auto'
          });
        }else if(toIndex < 0){//僅僅在當(dāng)前圖片是第一個(gè)圖片，然后點(diǎn)擊上一個(gè)圖片的時(shí)候出現(xiàn)
          $panel.css({ 
            'marginLeft': -options.width*focusIndex + 'px',
            'paddingLeft': 0 
          });
          $panelList.eq(max - 1).css({
            'position': 'static', 
            'left': 'auto'
          });
        }
        
        options.callback(focusIndex,$panelList.eq(focusIndex));
        inAnimation = false;

        doWaitting();
      })
    }
  }

  //向上向下滾動(dòng)動(dòng)畫
  function topBottomAnimate(toIndex){
    //默認(rèn)滾動(dòng)方式
    if(toIndex == undefined){
      if(options.deriction == 'top'){
        toIndex = focusIndex + 1;
      }else{
        toIndex = focusIndex - 1;
      }       
    }
    if(toIndex != focusIndex){
      inAnimation = true;

      //當(dāng)前為最后一個(gè)輪播體時(shí)的處理
      var tInd = 0;
      if(toIndex >= max){
        $panel.css({
          'paddingTop': options.height + 'px'
        })
        $panelList.eq(0).css({
          'position': 'absolute', 
          'top': options.height*toIndex + 'px'
        });
        tInd = 0;
      }else if(toIndex < 0){//僅僅在當(dāng)前圖片是第一個(gè)圖片，然后點(diǎn)擊上一個(gè)圖片的時(shí)候出現(xiàn)
        //當(dāng)前為最后一個(gè)輪播體時(shí)的處理
        $panelList.eq(max - 1).css({
          'position': 'absolute', 
          'top': -options.height + 'px'
        });
        tInd = max - 1;
      }else{
        tInd = toIndex;
      }

      //先將焦點(diǎn)切換過去
      $selectList.filter('.' + options.selected).removeClass(options.selected)
        .end().eq(tInd).addClass(options.selected);

      $panel.animate({ 'marginTop': -options.height*toIndex + 'px' }, options.duration, function() {
        focusIndex = tInd;

        if(toIndex >= max){
          $panel.css({ 
            marginTop: 0,
            'paddingTop': 0 
          });
          $panelList.eq(0).css({
            'position': 'static', 
            'top': 'auto'
          });
        }else if(toIndex < 0){//僅僅在當(dāng)前圖片是第一個(gè)圖片，然后點(diǎn)擊上一個(gè)圖片的時(shí)候出現(xiàn)
          $panel.css({ 
            'marginTop': -options.height*focusIndex + 'px',
            'paddingTop': 0 
          });
          $panelList.eq(max - 1).css({
            'position': 'static', 
            'top': 'auto'
          });
        }

        options.callback(focusIndex,$panelList.eq(focusIndex));
        inAnimation = false;

        doWaitting();
      })
    }
  }
  function bindEvent(){
    //綁定事件
    $this.on('mouseover',function(){
      stopScroll();
           
    }).on('mouseout',function(){
      startScroll();
    }).on('click', '.nfdscroll-prev', function(){
      stopScroll();
      startScroll(focusIndex - 1);
    }).on('click', '.nfdscroll-next', function(){
      stopScroll();
      startScroll(focusIndex + 1);
    })
    $selectList.on('mouseover',function(){
      stopScroll();
      if(!$(this).is('.' + options.selected)){
        startScroll($(this).index());
      } 
    });
  }
  function init(){
    $this.css({
      position: 'relative',
      overflow: 'hidden'
    });
    $panel.css({
      position: 'relative'
    })
    focusIndex = options.startIndex;//默認(rèn)從startIndex開始滾動(dòng)
    $selectList.eq(focusIndex).addClass(options.selected);//先將焦點(diǎn)切換過去
    if(options.deriction == 'left' || options.deriction == 'right'){
      //初始化樣式,實(shí)際上不應(yīng)該插件里面來做樣式，應(yīng)該使用者自己就保證樣式?jīng)]有問題
      var cssO = {
        width: options.width,
        'float': 'left'
      }
      $this.css({
        width: options.width
      });//只需要管寬度即可
      if(options.height){
        cssO.height = options.height;
      }
      var leng = $panel.find('>li').css(cssO).length;
      $panel.css({
        width: options.width * leng + 'px',
        'marginLeft': -options.width*focusIndex + 'px'
      });
      
      animateFn = leftRightAnimate;
    }else if(options.deriction == 'top' || options.deriction == 'bottom'){
      var cssO = {
        height: options.height
      }
      $this.css({
        height: options.height
      });//只需要管高度度即可
      if(options.width){
        cssO.width = options.width;
      }
      var leng = $panel.find('>li').css(cssO).length;
      $panel.css({
        height: options.height * leng + 'px',
        'marginTop': -options.height*focusIndex + 'px'
      });

      animateFn = topBottomAnimate;
    }else{
      alert('插件只支持left/right/top/bottom四種方向上的滾動(dòng)');
      return;
    }
    
    startScroll();
  }
  
  bindEvent();
  init();

  return {
    'stopScroll': stopScroll,
    'startScroll': startScroll
  }
}
});

一個(gè)完整的例子

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>輪播測試?yán)?lt;/title>
 <style type="text/css">
  body,ul,ol{margin: 0; padding: 0;}
  ul,ol{list-style: none;}
  .li1{background-color: #000;}
  .li2{background-color: #333;}
  .li3{background-color: #666;}
  .li4{background-color: #999;}
  .example{margin-left: 300px;}
  .example ol {
   position: absolute;
   padding-left: 80px;
   width: 186px;
   height: 20px;
   top: 186px;
   left: 0px;
   background: #fff;
   cursor: pointer;
  }
  ol li{
   float: left;
   width: 10px;
   height: 10px;
   margin: 5px;
   background: #ff0;
   border-radius: 10px;
  }
  ol li.circle{
   background: #f00;
  }
 </style>
</head>

<body>
 <div class="example">
  <!-- 滾動(dòng)內(nèi)容ul -->
  <ul>
    <li class="li1"><a href="xxx" target="_blank" title="xxx"></a></li>
    <li class="li2"><a href="xxx" target="_blank" title="xxx"></a></li>
    <li class="li3"><a href="xxx" target="_blank" title="xxx"></a></li>
    <li class="li4"><a href="xxx" target="_blank" title="xxx"></a></li>
  </ul>   
  <!-- 焦點(diǎn)列表，可選 -->       
  <ol>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
  </ol>
  <!-- 上一個(gè)和下一個(gè)，可選 -->
  <div>
    <a class="nfdscroll-prev" href="javascript:void(0);"></a>
    <a class="nfdscroll-next" href="javascript:void(0);"></a>
  </div>
</div>
 <script type="text/javascript" src="common/jquery.js"></script>
 <script type="text/javascript" src="common/jquery.nfdscroll.js"></script>
 <script type="text/javascript">
 $('.example').nfdscroll({
   startIndex:0,
   width:'266',
   height:'216',
   interval:-1,//2000,
   selected:'circle',
   prevText:'上一個(gè)',
   nextText:'下一個(gè)',
   deriction:'left',
   callback: function(index,$currentNode){
     console.log(index)
   }
 });
 </script>
</body>
</html>

實(shí)現(xiàn)的效果