jQuery 轮播

注意事项：所有滚屏要固定最外层div的宽度，固定里层ul 宽度，且div宽度为li宽度的倍数（确定一次展示多少li）

纵向滚屏

    <div class="">
            <div id="top-scroll">
                <ul>
                    <li>图片7</li>
                    <li>图片6</li>
                    <li>图片5</li>
                    <li>图片4</li>
                    <li>图片3</li>
                    <li>图片2</li>
                </ul>
            </div>
    </div>

<script type="text/javascript">
$(function(){
    $('#top-scroll').TopToDownScroll({time: 2000,num: 1});
});
(function($){
    $.fn.TopToDownScroll = function(options){
        var d = {time: 2000,s: 'fontColor',num: 1}
        var o = $.extend(d,options);
        this.children('ul').addClass('winner-line');
        var _con = $('.winner-line').eq(0);
        var _conH = _con.height();
        var _conChildH = _con.children().eq(0).height();
        var _temp = _conChildH;
        var _time = d.time;
        var _s = d.s;
        _con.clone().insertAfter(_con);
        var num = d.num;
        var _p = this.find('li');
        var allNum = _p.length;
        _p.eq(num).addClass(_s);
        var timeID = setInterval(Up,_time);
        this.hover(function(){clearInterval(timeID)},function(){timeID = setInterval(Up,_time);});//鼠标悬停不滚屏
        function Up(){
            _con.animate({marginTop: '-'+_conChildH});
            _p.removeClass(_s);
            num += 1;
            _p.eq(num).addClass(_s);
            if(_conH <= _conChildH){
                _con.animate({marginTop: '-'+_conChildH},"normal",over);
            } else {
                _conChildH += _temp;
            }
        }
        function over(){
            _con.attr("style",'margin-top:0');
            _conChildH = _temp;
            num = 1;
            _p.removeClass(_s);
            _p.eq(num).addClass(_s);
        }
    }
})(jQuery);
</script>

横向滚屏 展示一组，可翻页

<div class="pdt20">
  <div class="con">
        <div id="left-scroll">
            <ul>
                <li>图片1</li>
                <li>图片2</li>
                <li>图片3</li>
                <li>图片4</li>
                <li>图片5</li>
            </ul>
        </div>
        <div style="clear:both;"></div>
        <div>
          <div class="previous">← Previous</div>
          <div class="next">Next →</div>
        </div>
    </div>
</div>
 <script type="text/javascript">

  var winnerCount = 290*(<{$winnerCount}> + 1);
  $('#left-scroll').width(winnerCount);

$(function(){
    $('#left-scroll').leftToRightScroll({time: 2000,num: 1});
});

(function($){
    $.fn.leftToRightScroll = function(options){
        var d = {time: 2000,num: 1,animate_time:500}
        var o = $.extend(d,options);
        this.children('ul').addClass('winner-line');
        var _con = $('.winner-line').eq(0);
        var _conH = winnerCount;
        var _conChildH = 0;
        var _temp = _con.children().eq(0).width()+10;
        var _time = d.time;
        var _animate_time = d.animate_time;
        _con.children("li:first-child").clone().insertAfter(_con.children('li:last'));
        var num = d.num;
        var _p = this.find('li');
        var allNum = _p.length;
        var timeID = setInterval(right,_time);
        $('.con').hover(function(){clearInterval(timeID)},function(){timeID = setInterval(right,_time);});

        $('.previous').click(function(){
            if(_conChildH>0){
                    _conChildH=_conChildH-_temp;
                _con.animate({marginLeft:'-'+_conChildH},_animate_time);
            }else{
              _conChildH =_conH - _temp;
              _con.css({marginLeft:-_conChildH});
              _conChildH =_conChildH - _temp;
            }
            _con.stop(true,false).animate({marginLeft:'-'+_conChildH},_animate_time);
        });
        $('.next').click(function(){
            if(_conChildH + _temp<=_conH - _temp){
                    _conChildH += _temp;
                    _con.animate({marginLeft:'-'+_conChildH},_animate_time);
            }else{
                _conChildH = _temp;
                _con.css({marginLeft:0});
            }
             _con.stop(true,false).animate({marginLeft:'-'+_conChildH},_animate_time);
        });
        function right(){
          if(_conChildH + _temp<=_conH - _temp){
            _conChildH += _temp;
          }else{
            _conChildH = _temp;
            _con.css({marginLeft:0});
          }
          _con.stop(true,false).animate({marginLeft:'-'+_conChildH},_animate_time);
        }
    }
})(jQuery);
 </script>

横向滚三组

<div class="wraper">
  <div id="scroll_pic_view" class="scroll_pic_view" style="overflow: hidden; ">
    <div id="scroll_pic_view_div" style="transition: transform 200ms cubic-bezier(0.33, 0.66, 0.66, 1); transform-origin: 0px 0px 0px; transform: translate(0px, 0px) scale(1) translateZ(0px);">
      <ul id="scroll_pic_view_ul">
          <li>图片1</li>
          <li>图片2</li>
          <li>图片3</li>
          <li>图片4</li>
          <li>图片5</li>
      </ul>
    </div>
  </div>
</div>
  <script>
      var width = 250;
      var scrollWidth = (<{$winnerCount}>+3) * 250;
      $('scroll_pic_view_div').width(scrollWidth);
      $('.scroll_pic_view>div').width(scrollWidth);

      (function($){
          $.fn.leftToRightScroll = function(options){
              var d = {time: 2000,num: 1}
              var o = $.extend(d,options);
              this.children('ul').addClass('winner-line');
              var _con = $('.winner-line').eq(0);
              var _conH = scrollWidth;
              var _conChildH = 0;
              var _temp = width;
              var _time = d.time;
              _con.find("li:lt(3)").clone().insertAfter(_con.children('li:last'));
              var num = d.num;
              var _p = this.find('li');
              var allNum = _p.length;
              var timeID = setInterval(right,_time);
              function right(){
                _con.parent().css({"transition":'transform 200ms cubic-bezier(0.33, 0.66, 0.66, 1)'})
                _con.parent().css({"transform":'translate(-' + _conChildH + 'px, 0px) scale(1) translateZ(0px)'})
                  num += 1;
                  if(_conH <= (_conChildH + _temp*3)){
                      _con.animate({transform: 'translate(-' + _conChildH + 'px, 0px) scale(1) translateZ(0px)'},"",over);
                  }
                  _conChildH += _temp;
              }
              function over(){
                  _con.parent().css({"transition":'transform 1ms cubic-bezier(0.33, 0.66, 0.66, 1)'})
                  _con.parent().css({"transform":'none'})
                  num = 1;
                  _conChildH = _temp;
              }
          }
      })(jQuery);
  </script>

</notempty>

多个图片消失隐藏轮播

    <div class="parent-div">
        <ul>
                <li><img src='1.png'/></li>
                <li><img src='2.png'/></li>
                <li><img src='3.png'/></li>
                <li><img src='4.png'/></li>
                <li><img src='5.png'/></li>
        </ul>
    </div>


<script type="text/javascript">
$('.parent-div').find('li').eq(0).css({'display':'block'});
$(document).ready(function(){
    $('.parent-div').blockToNoneScroll({time: 3000,num: 1});
});
(function($){
    $.fn.blockToNoneScroll = function(options){
        var d = {time: 3000,s: 500,num: 1}
        var o = $.extend(d,options);
        var _time = d.time;
        var _s = d.s;
        var num = d.num;
        var _p = this.find('li');
        var allNum = _p.length;
        var timeID = setInterval(Up,_time);
        function Up(){
            _p.fadeOut(_s);
            _p.eq(num).fadeIn(_s);
            if(num == allNum){
                num = 1;
                _p.fadeOut(_s);
                _p.eq(num-1).fadeIn(_s);
            }else{
                num = num+1;
            }
        }
    }
})(jQuery);
</script>