自己模仿JQ插件的写法写了一个循环滚动列表插件，支持自定义上、下、左、右四个方向，支持平滑滚动或者间断滚动两种方式，都是通过参数设置。JQ里面有些重复的地方，暂时没想到更好的方法去精简。不过效果还是可以的，如下（效果图上传后都加速了，实际效果比这个要慢很多）：

html代码如下：

<!doctype html>

<html lang="zh-cn">

<head>

<meta charset="utf-8">

<title>循环滚动列表</title>

<link href="css/style.css" rel="stylesheet"/>

<script src="js/jquery-1.9.1.min.js"></script>

<script src="js/autoScroll.js"></script>

<script>

  $(function(){

    //下面是调用语句，以ID名区分

    $("#autoScroll01").autoScroll({

      direction: 'left',                //滚动方向，'up'、'down'、'left'、'right'，*必须参数

      interval: 40,                     //滚动间隔，单位'ms'，一定要大于'滚动速度'，*必须参数

      speed: 10,                        //滚动完成耗时，单位'ms'，一定要小于'滚动间隔'，*必须参数

      distance: 3,                      //单次滚动距离，单位'px'，*必须参数

      liWidth: 144,                     //单个li的盒模型高度&宽度(包括margin值。左右滚动只有liWidth参数，上下滚动只有liHeight参数)，*必须参数

      showNum: 6                        //显示几个li，父级高会自适应，但不要超过最大个数，*必须参数

    });

    $("#autoScroll02").autoScroll({

      direction: 'up',

      interval: 50,                     //interval、speed、distance都很小时，就形成了平滑滚动现象。

      speed: 10,

      distance: 1,

      liHeight: 30,

      showNum: 4

    });

    $("#autoScroll03").autoScroll({

      direction: 'down',              //向下滚动

      interval: 2000,                 //2秒滚动一次

      speed: 600,                     //滚动耗时0.6秒（所以必须2秒内滚完，以免没滚完就执行下一次滚动了）

      distance: 40,                   //一次滚动40px

      liHeight: 40,                   //单个的li的盒模型高度是40px（上下滚动li没有margin跟padding值）

      showNum: 3                      //容器里显示3个li标签

    });

    $("#autoScroll04").autoScroll({

      direction: 'right',

      interval: 2500,                 //interval、speed、distance都很大时，就形成了间歇性滚动现象。

      speed: 800,

      distance: 288,

      liWidth: 144,                   //左右滚动时，liWidth要算上margin值，注意盒模型

      showNum: 5

    });

  });

</script>

</head>

<body>

<!-- wrap和boxs box0*这个div非必需,用于布局而已 -->

<div class="wrap">

  <!--  布局必须结构为：外层容器id，里面是 ul 跟 li -->

  <div class="boxs box01">

    <div class="autoBox" id="autoScroll01">

      <ul class="clearfix">

        <li><a href="#"><img src="data:images/img01.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img02.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img03.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img04.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img05.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img06.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img07.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img08.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img09.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img10.jpg" alt=""></a></li>

      </ul>

    </div>

  </div>

  <!--第二个案例 保持结构不变，id不同就可以复用多个-->

  <div class="boxs box02">

    <div class="autoBox" id="autoScroll02">

      <ul>

        <li><a href="#">1. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

        <li><a href="#">2. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

        <li><a href="#">3. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

        <li><a href="#">4. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

        <li><a href="#">5. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

        <li><a href="#">6. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

        <li><a href="#">7. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

        <li><a href="#">8. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

      </ul>

    </div>

  </div>

  <div class="boxs box03">

    <div class="autoBox" id="autoScroll03">

      <ul>

        <li><a href="#">1. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

        <li><a href="#">2. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

        <li><a href="#">3. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

        <li><a href="#">4. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

        <li><a href="#">5. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

        <li><a href="#">6. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

        <li><a href="#">7. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

        <li><a href="#">8. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>

      </ul>

    </div>

  </div>

  <div class="clear"></div>

  <div class="boxs box04">

    <div class="autoBox" id="autoScroll04">

      <ul class="clearfix">

        <li><a href="#"><img src="data:images/img01.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img02.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img03.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img04.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img05.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img06.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img07.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img08.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img09.jpg" alt=""></a></li>

        <li><a href="#"><img src="data:images/img10.jpg" alt=""></a></li>

      </ul>

    </div>

  </div>

</div>

</body>

</html>

css样式如下：

@charset "utf-8";

/* 简单reset */

body, ul, li {

    margin:;

    padding:;

}

body {

    font: 14px/24px Microsoft YaHei;

    color: #333;

}

ul { list-style: none; }

a {

    color: #333;

    outline: none;

    text-decoration: none;

}

a:hover { color: #2986dd; }

img { border: none; }

.clearfix:after {

    visibility: hidden;

    display: block;

    font-size:;

    content: " ";

    clear: both;

    height:;

}

.clear {

    display: block;

    clear: both;

    height:;

    font-size:;

    line-height:;

    content: ".";

    overflow: hidden;

}

.wrap {

    width: 900px;

    padding-top: 30px;

    margin: 0 auto;

}

.boxs {

    padding: 15px;

    margin: 0 auto 30px;

    background-color: #e4fbff;

}

.box01 { width: 870px; }

.box02 {

    float: left;

    width: 400px;

}

.box03 {

    float: right;

    width: 400px;

}

.box04 { width: 720px; }

/* 具体样式 ---------- */

/* 通用必需样式 */ /* PS：有些重要样式在js里先写好了，下面id容器、ul和li标签的样式比较重要 */

.autoBox {

    position: relative;

    margin: 0 auto;

    overflow: hidden;

}

.autoBox ul {

    position: absolute;

    list-style: none;

    z-index:;

}

/* 第一、四个列表 */ /* PS：左右滚动型列表需要css定义高度，li标签可以有margin值 */

#autoScroll01, #autoScroll04 {

    width: auto;

    height: 174px;

}

#autoScroll01 ul li, #autoScroll04 ul li {

    float: left;

    width: 128px;

    height: 168px;

    padding: 3px;

    margin: 0 5px;

    _display: inline;

}

#autoScroll01 li a, #autoScroll04 li a {

    display: block;

    padding: 3px;

    border: 1px solid #dbdbdb;

    box-shadow: 0 0 3px rgba(170, 223, 252, 0.5);

}

#autoScroll01 li a:hover, #autoScroll04 li a:hover {

    border-color: #71ddff;

    box-shadow: 0 0 3px rgba(77, 185, 245, .90);

}

#autoScroll01 li img, #autoScroll04 li img {

    display: block;

    width: 120px;

    height: 160px;

}

/* 第二、三个列表 */ /* PS：上下滚动型列表需要css定义宽度，li标签尽量不要设置margin值 */

#autoScroll02, #autoScroll03 {

    width: 100%;

    height: auto;

}

#autoScroll02 ul li {

    height: 30px;

    line-height: 30px;

    overflow: hidden;

}

#autoScroll03 ul li {

    height: 40px;

    line-height: 40px;

    overflow: hidden;

}

#autoScroll02 li a, #autoScroll03 li a {

    display: block;

    width: 100%;

    height: 24px;

    line-height: 24px;

    margin: 3px 0;

    text-overflow: ellipsis;

    white-space: nowrap;

    overflow: hidden;

}

#autoScroll03 li a { margin: 8px 0; }

js代码如下：

/**

 *    Name   : 循环滚动列表

 *  Author ：子纯

 *    Time   ：2015-12-15

 **/

 (function(jQuery){

     $.fn.autoScroll = function (o) {

        o = $.extend({                                    //设置默认参数

            direction: 'left',

            interval: null,

            speed: null,

            distance: null,

            liWidth: null,

            liHeight: null,

            showNum: null

        },o || {});

        return this.each(function(){                    //回调开始

            var $ts = $(this),

                $ul = $ts.children("ul"),

                $li = $ul.children("li"),

                len = $li.length;

            if (o.direction == 'up' || o.direction == 'down' ){            //根据类型设置css

                $ts.css({ "width": "100%", "height": o.showNum * o.liHeight });

                $ul.css({ "width": "100%", "height": len * o.liHeight });

                $li.css({ "float": "none", "width": "100%", "height": o.liHeight, "margin": 0,"padding": 0 });

            };

            if (o.direction == 'left' || o.direction == 'right' ){        //其实也可以在css里写好

                $ts.css({ "width": o.showNum * o.liWidth });

                $ul.css({ "width": len * o.liWidth });

                $li.css({ "float": "left" });

            };

            switch (o.direction){                                        //分四种情况，进行事件调用

                case 'left': sroLeft();

                break;

                case 'right':sroRight();

                break;

                case 'up':      sroUp();

                break;

                case 'down': sroDown();

                break;

            };

            function sroLeft(){                                            //向左滚动事件

                $ul.css("left", 0);

                var left;

                function leftMoving(){

                    var dis = -o.distance,

                        dif = -o.liWidth * (len - o.showNum);

                        left = parseFloat($ul.css("left"));

                    if (left <= dif){

                        $ul.css("left",0);

                        left = 0;

                        $ul.delay(o.interval);

                    };

                    var ltDis = left + dis;

                    if(ltDis <= dif){

                        ltDis = dif;

                    };

                    $ul.animate({"left":ltDis+"px"}, o.speed);

                };

                $ul.hover(                                                //鼠标移上、移下的阻止与恢复滚动

                    function(){

                        clearInterval(fnLeft);

                    },

                    function(){

                        fnLeft = setInterval(function(){leftMoving()}, o.interval);

                    }

                );

                fnLeft = setInterval(function(){leftMoving()}, o.interval);

            };

            function sroRight(){                                        //向右滚动事件

                $ul.css("right", 0);

                var right;

                function rightMoving(){

                    var dis = -o.distance,

                        dif = -o.liWidth * (len - o.showNum);

                        right = parseFloat($ul.css("right"));

                    if (right <= dif){

                        $ul.css("right",0);

                        right = 0;

                        $ul.delay(o.interval);

                    };

                    var rtDis = right + dis;

                    if(rtDis <= dif){

                        rtDis = dif;

                    };

                    $ul.animate({"right":rtDis+"px"}, o.speed);

                };

                $ul.hover(

                    function(){

                        clearInterval(fnRight);

                    },

                    function(){

                        fnRight = setInterval(function(){rightMoving()}, o.interval);

                    }

                );

                fnRight = setInterval(function(){rightMoving()}, o.interval);

            };

            function sroUp(){                                            //向上滚动事件

                $ul.css("top", 0);

                var top;

                function upMoving(){

                    var dis = -o.distance,

                        dif = -o.liHeight * (len - o.showNum);

                        top =  parseFloat($ul.css("top"));

                    if (top <= dif){

                        $ul.css("top",0);

                        top = 0;

                        $ul.delay(o.interval);

                    };

                    var tpDis = top + dis;

                    if(tpDis <= dif){

                        tpDis = dif;

                    };

                    $ul.animate({"top":tpDis+"px"}, o.speed);

                };

                $ul.hover(

                    function(){

                        clearInterval(fnUp);

                    },

                    function(){

                        fnUp = setInterval(function(){upMoving()}, o.interval);

                    }

                );

                fnUp = setInterval(function(){upMoving()}, o.interval);

            };

            function sroDown(){                                            //向下滚动事件

                $ul.css("bottom",0);

                var bottom;

                function downMoving(){

                    var dis = -o.distance,

                        dif = -o.liHeight * (len - o.showNum);

                        bottom =  parseFloat($ul.css("bottom"));

                    if (bottom <= dif){

                        $ul.css("bottom",0);

                        bottom = 0;

                        $ul.delay(o.interval);

                    };

                    var bmDis = bottom + dis;

                    if(bmDis <= dif){

                        bmDis = dif;

                    };

                    $ul.animate({"bottom":bmDis+"px"}, o.speed);

                };

                $ul.hover(

                    function(){

                        clearInterval(fnDown);

                    },

                    function(){

                        fnDown = setInterval(function(){downMoving()}, o.interval);

                    }

                );

                fnDown = setInterval(function(){downMoving()}, o.interval);

            };

        });

    };

})(jQuery);

兼容到IE6+，jq库用1.7+的都没问题 。有好的建议可以下面提出，谢谢啦~^_^

Jquery制作--循环滚动列表的更多相关文章

  1. jquery特效：无缝向上循环滚动列表

    效果呈现 整个列表间隔设定的时间向上移动一个item的高度 html结构: <div class="slide-title"> <span>title1&l ...

  2. vue实现循环滚动列表vue-seamless-scroll

    1.安装 vue-seamless-scroll   实例文档链接 cnpm install vue-seamless-scroll --save 2.文件中引入,组件配置 import vueSea ...

  3. jQuery左右循环滚动图片特效

    在线演示 本地下载

  4. 多行滚动jQuery循环新闻列表代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery 实现列表自动滚动循环滚动显示新闻通知

    需求 页面中一个小区域循环滚动展示通知(公告.新闻.活动.图片等),并且鼠标hover时停止滚动并提示,鼠标离开后,继续滚动. 效果图 https://www.iguopin.com/index.ph ...

  6. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  7. 【js与jquery】jquery循环滚动新闻

    2.html代码: <h3>最新动态</h3> <div class="scrollNews" > <ul> <li>& ...

  8. 利用jquery制作滚动到指定位置触发动画

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...

  9. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. WinForm TreeView递归加载

    这个其实通俗一点讲就是的树状分支图 首先利用递归添加数据 数据放入 treeView1.Nodes.Add() 中 public Form3() { InitializeComponent(); Tr ...

  2. idea 插件的使用 进阶篇

    CSDN 2016博客之星评选结果公布    [系列直播]零基础学习微信小程序!      "我的2016"主题征文活动   博客的神秘功能 idea 插件的使用 进阶篇(个人收集 ...

  3. TestNG 入门教程

    原文出处:http://www.cnblogs.com/TankXiao/p/3888070.html 阅读目录 TestNG介绍 在Eclipse中在线安装TestNG 在Eclipse中离线安装T ...

  4. 彻底搞懂编码 GBK 和 UTF8

    常用编码格式一览 首先来看一下常用的编码有哪些,截图自Notepad++.其中ANSI在中国大陆即为GBK(以前是GB2312),最常用的是 GBK 和 UTF8无BOM 编码格式.后面三个都是有BO ...

  5. RTMP流媒体播放过程

      RTMP协议规定:第一步,建立一个网络连接(NetConnection):客户端和服务端的基础连通关系 第二步:建立一个网络流(NetStream)发送多媒体的通道(只能建立一个网络连接,可以建立 ...

  6. C#-WebForm-★内置对象简介★Request-获取请求对象、Response相应请求对象、Session全局变量（私有）、Cookie全局变量（私有）、Application全局公共变量、ViewState

    内置对象: 1.Request - 获取请求对象 用法:接收传值 protected void Page_Load(object sender, EventArgs e) { TextBox1.Tex ...

  7. 一.Jenkins安装

    1.Java安装: 安装包:jdk-8u73-windows-x64.exe.jdk-8u73-windows-i586.exe(i586是32位系统包) Java环境变量配置:http://jing ...

  8. replace U to T in mature.fa

    sed '2~2s/U/T/g' mature.fa > miRBase_mature.fa

  9. window.hostory(浏览器的历史记录)

    浏览器会对同一个窗口(选项卡)中访问的网页进行记录,不管我们是通过以下哪种方式改变网页,浏览器都会把改变后的网页记录下来,以便通过浏览器的前进和后退按钮,能够快速的切换到已经访问过的网页:  1)直接 ...

  10. django缓存优化中caches参数如何配置？

    在python开发中,如果运营django进行编写,为了提升效率,常常需要优化缓存,缓存优化中必须掌握的caches参数相关知识: CACHES 配置参数概述 - 格式 CACHES 字典配置格式如下 ...