/**
 *
 *  marqueeObject : 跑馬燈對(duì)象 ul,
 *  marqueeDelay : 跑馬燈滾動(dòng)延時(shí),
 *  marqueeHeight : 跑馬燈區(qū)域高度,
 *  marqueeWidth : 跑馬燈區(qū)域?qū)挾? *  isRecursive : 跑馬燈是否無(wú)線循環(huán)滾動(dòng)
 */

var marquee = (function(window,$){
    var _$marqueeObject,_$marqueeObjectList,
        _marqueeLength,_marqueeWidth,
        _options,_$marqueeId,
        _marqueeInterval1 = null,   //跑馬燈延時(shí)效果的interval
        _marqueeInterval2 = null,   //跑馬燈上下滾動(dòng)的interval
        _currentIndex = 0,          //跑馬燈當(dāng)前展示的序號(hào)
        _previousScrollUp,
//        _$marqueeItemWidthList,


        _init = function(options){
            _options = $.extend({
                marqueeDelay : 3000,
                isRecursive : true
            },options || {});
//            console.log(_options);

            _$marqueeObject = _options.marqueeObject;
            _$marqueeObjectList = _$marqueeObject.find("li");
            _marqueeLength = _$marqueeObject.children().length;
            _marqueeWidth = _options.marqueeWidth;
            _options._marqueeHeight = _$marqueeObject.find("li").height();

            var firestItemchildrenWidth = _getItemChildrenWidth(_currentIndex);
            if(firestItemchildrenWidth > _marqueeWidth){
                var gap = firestItemchildrenWidth - _marqueeWidth
                _scrollSingleNews(_currentIndex);
            }else{
                _marqueeInterval1 = setInterval(_startMarquee,_options.marqueeDelay);
            }

//        _bindEvent();

        },
//    _bindEvent = function(){
//        _$marqueeObject.find("li").on('swipeUp',function(){
//            console.log("trigger -- swipeUp");
//        });
//
//        _$marqueeObject.find("li").on('touchstart',function(e){
//            console.log("trigger -- touchmove");
//            console.log(e);
//        });
//
//
//        _$marqueeObject.find("li").on('touchmove',function(e){
//            console.log("trigger -- touchmove");
//            console.log(e);
//        });
//
//
//        _$marqueeObject.find("li").on('touchend',function(e){
//            console.log("trigger -- touchmove");
//            console.log(e);
//        });
//
//    },
//
        _startMarquee = function(){
            clearInterval(_marqueeInterval2);
            if(_options.isRecursive){
                _marqueeInterval2 = setInterval(_scrollMarquee2,20);
            }else{
                _marqueeInterval2 = setInterval(_scrollMarquee,20);
            }

        },

        _scrollMarquee = function(){
            _previousScrollUp = _$marqueeObject.scrollTop();
            _$marqueeObject.scrollTop(_previousScrollUp+1);
//            console.log(_$marqueeObject.scrollTop()%_options._marqueeHeight);
//            console.log(_options._marqueeHeight - 1);

            if(_$marqueeObject.scrollTop()%_options._marqueeHeight==_options._marqueeHeight - 1 || _previousScrollUp == _$marqueeObject.scrollTop()){
                //console.log(_$marqueeObject.scrollTop());
                //console.log(_options._marqueeHeight - 1);
                //console.log("end--------");
                clearInterval(_marqueeInterval2);
                _currentIndex++;
                var previousItem = _$marqueeObjectList[_currentIndex  - 1];
                $(previousItem).css("margin-left","0px");

                if(_currentIndex == _marqueeLength){
                    console.log("start again--------");
                    //_$marqueeObject.animate({scrollTop: '0px'}, 800);
                    _$marqueeObject.scrollTop(0);
                    _currentIndex = 0;
                }
                _scrollSingleNews(_currentIndex)
            }
        },
        _scrollMarquee2 = function(){
            _previousScrollUp = _$marqueeObject.scrollTop();
            _$marqueeObject.scrollTop(_previousScrollUp+1);
            if(_$marqueeObject.scrollTop()%_options._marqueeHeight==_options._marqueeHeight - 1 || _previousScrollUp == _$marqueeObject.scrollTop()){
                clearInterval(_marqueeInterval2);
                _currentIndex++;
                var previousItem = _$marqueeObjectList[_currentIndex  - 1];
                $(previousItem).css("margin-left","0px");
                $(previousItem).remove();
                _$marqueeObject.append($(previousItem));


                var domNodes = Array.prototype.slice.call(_$marqueeObjectList);
                domNodes.push(domNodes.shift());
                _$marqueeObjectList = domNodes;
//                console.log(domNodes);
                _previousScrollUp = 0;
                _$marqueeObject.scrollTop(_previousScrollUp);
                _currentIndex--;
                _scrollSingleNews(_currentIndex);

            }
        },
        _scrollSingleNews = function(index){
            var topNewsItem = _$marqueeObjectList[index];
//            console.log(index);
//            console.log(topNewsItem);
            var childrenWidth = _getItemChildrenWidth(index);
            if(childrenWidth > _marqueeWidth){
//                console.log("out of range");
                var overflowWidth = childrenWidth - _marqueeWidth;
                clearInterval(_marqueeInterval1);
                $(topNewsItem).animate({"margin-left":overflowWidth * -1 + "px"},{ duration: 9000, queue: false, complete: function() { _marqueeInterval1 = setInterval(_startMarquee,_options.marqueeDelay);  } });
            }

        },
        _getItemChildrenWidth = function(index){
            var topNewsItem = _$marqueeObjectList[index];
            var chidrenWidth = 0;
            $.each(topNewsItem.children, function(index,value){
                chidrenWidth+= $(value).width();
            })
            return chidrenWidth;
        }

    return {
        init : function(options){
            _init(options);
        }
    }
}( window,Zepto));

 var $topNews = $(".topNewsContent");
    var topNewsContentWidth = $(".topNews").width() - ( $topNews.offset().left - $(".topNewsHead").offset().left) ;
    var topNewsContentHeight = $topNews.find("li").height();
    marqueeHandler.init({
        marqueeObject : $topNews,
        marqueeDelay : 2000,
        marqueeHeight : topNewsContentHeight,
        marqueeWidth : topNewsContentWidth
    });

.topNewsSection {
  background-color: #f3f4f5;
  position: relative;
  .topNews{
    text-align: left;
    font-size: 1.6rem;
    margin: 0;
    background-color: #f3f4f5;
    white-space: nowrap;
    overflow: hidden;
    .topNewsHead {
      color: #DC137D;
      border-right: 1px solid;
      padding-right: .3rem;
      border-color: #CACACA;
      font-size: 1.3rem;
      display: inline-block;
      vertical-align: text-top;
      line-height: 2.3rem;
    }

    .noticeIcon {
      background: url("../../images/icon_notice.png") no-repeat;
      width: 1rem;
      height: 1rem;
      display: inline-block;
      background-size: 100%;
      margin-left: 5px;
      vertical-align: text-top;
      margin-top: 0.6rem;
    }

    .topNewsContent {
      font-size: .7rem;
      display: inline-block;
      position: relative;
      /* left: 8.5rem; */
      //top: 8px;
      height: 2.3rem;
      overflow: hidden;
      vertical-align: text-top;
      li {
        position: relative;
        white-space: nowrap;
        font-size: .3rem;
        color: #666;
        a {
          line-height: 2.3rem;
          font-size: 1rem;
        }
      }
    }
  }
}

<section class="topNewsSection">
        <span class="topNewsHead" style="display:none"></span>

        <div class="topNews">
            <span class="noticeIcon"></span>
            <ul class="topNewsContent">
                <#list rotationNewsInfoList as rotationNews >
                    <li><a
                        <#assign url="${rotationNews.url!''}">
                        <#if url!=''> href="${url}"</#if>
                          >${rotationNews.text}</a>
                        <a class="topNewsHypertext"
                            <#if url!=''> href="${url}"</#if>
                           >${rotationNews.hypertext}</a></li>
                </#list>
            </ul>

        </div>
    </section>