关于几种滚动效果的总结

1.多行滚动

<ul class="text1">
                    <li>
                        <a href="#">省农牧厅党组书记、厅长康国玺赴礼县帮......</a>
                        <span>2017-12-17</span>
                    </li>
                    <li>
                        <a href="#">省农牧厅召开厅党组理论学习中心组扩大......</a>
                        <span>2017-12-17</span>
                    </li>
                    <li>
                        <a href="#">省农牧厅召开深入学习宣传贯彻党的十九......</a>
                        <span>2017-12-17</span>
                    </li>
                    <li>
                        <a href="#">传达学习《中共中央关于认真学习宣传贯......</a>
                        <span>2017-12-17</span>
                    </li>
                    <li>
                        <a href="#">省农牧厅召开厅党组（扩大）会议 传达学......</a>
                        <span>2017-12-17</span>
                    </li>
                    <li>
                        <a href="#">省农牧厅党组组织学习党的十九大会议精神</a>
                        <span>2017-12-17</span>
                    </li>
                    <li>
                        <a href="#">传达学习《中共中央关于认真学习宣传贯......</a>
                        <span>2017-12-17</span>
                    </li>
                    <li>
                        <a href="#">省农牧厅召开厅党组（扩大）会议 传达学......</a>
                        <span>2017-12-17</span>
                    </li>
                    <li>
                        <a href="#">省农牧厅党组组织学习党的十九大会议精神</a>
                        <span>2017-12-17</span>
                    </li><li>
                        <a href="#">传达学习《中共中央关于认真学习宣传贯......</a>
                        <span>2017-12-17</span>
                    </li>
                    <li>
                        <a href="#">省农牧厅召开厅党组（扩大）会议 传达学......</a>
                        <span>2017-12-17</span>
                    </li>
                    <li>
                        <a href="#">省农牧厅党组组织学习党的十九大会议精神</a>
                        <span>2017-12-17</span>
                    </li>

                </ul>

<script>
        $(document).ready(function(){
            var marginTop =0;
            var bool=false;
            setInterval(function(){
                if(bool) return;//判断运行和停止
                $(".text1 li:first").animate({marginTop:marginTop--},10,function(){
                    if(!($(this).is(":animated"))) {    //判断是否有一个动画节点
                        if ((-marginTop) >= $(this).height()) {  //判断移出位置是否超过高度
                            $(this).css("margin", "0");
                            $(this).appendTo($(".text1"));  //把第一个节点移到ul后面
                            marginTop = 0;      //重新设置移动数值
                        }
                    }
            });
            },100);
            $(".text1").mouseover(function(){   //li鼠标移入，停止移动
                bool=true;
            });
            $(".text1").mouseout(function(){
                bool=false;
            });
        });

    </script>

这种写法要注意几个问题，第一滚动的的总高度要大于ul的高度，第二ul的overflow属性要选择hidden，不然会出现这种情况，只有滚动过程中给最后一行滚出和滚动行的高度一样的空间最后一行才会出现，所以视觉上就给人一种最后一行突然跳入的感觉。

2.单行滚动，而且带有停顿的效果可以用swiper插件来写。

当然首先要引入swiper.css或者swiper.min.css和swiper.jquery.js或者swipe.jquery.min.js

设置main-g（显示容器）的宽高

               <div class="main-g">
                    <div class="swiper-container" style="width: 100%;height: 100%;">
                        <div class="swiper-wrapper">
                             <div class="swiper-slide" style="background-image: url(res/img/meeting.png)">内容</div>
                             <div class="swiper-slide" style="background-image: url(res/img/meeting.png)">内容</div>
                             <div class="swiper-slide" style="background-image: url(res/img/meeting.png)">内容</div>
                        </div>
                    </div>

                </div>

注意其中除了main-g和内容部分的自定义class，其他class名不得修改，内容部分可以自定义新节点，添加新元素。

 

初始化：

<script>        

  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    loop: true,
    loopAdditionalSlides : 1,
    autoplay : 2000,
    speed:1000,
    onTouchStart: function(swiper,even){
    },
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    onTouchStart: function(swiper,even){
    }
  })        
  </script>