可配置循环左右滚动例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>可配置横栏滚动Demo</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">* { margin:0; padding:0;}body { font-size:12px;}</style>

<script src="jquery-1.4.1.js" type="text/javascript"></script><style type="text/css">

#scrollable {    background-color:#efefef;    border:1px solid #ddd;    padding:10px 8px;    width:523px;    height:65px;    margin-top:30px;}

div.items {    height:66px;        margin-left:8px;    float:left;    width:475px !important;}

div.items a {    display:block;    float:left;    margin-right:8px;    width:88px;    height:66px;    background:#BBB;    font-size:50px;    color:#ccc;    line-height:66px;    text-decoration:none;    text-align:center;    cursor:pointer;}

div.items a:hover {    color:#999;    }

div.items a.active {    background-position:-174px 0;            color:#555;    cursor:default;}

a.prev, a.next {    background:url(left.png) no-repeat 0 0;    display:block;    width:18px;    height:18px;    float:left;        margin:22px 0 0 0;    cursor:pointer;}

a.next {    background-image:url(right.png)        }

a.prev:hover {    background-position:0 -18px;        }

a.next:hover {    background-position:0 -18px;        }</style><script language="javascript" type="text/javascript">            (function ($) {            $.fn.extend({                Scroll: function (opt, callback) {

                    if (!opt) var opt = {};var _btnleft = $(opt.left);var _btnright = $(opt.right);var timerID;var _this = this.eq(0).find("div").eq(1);var lineW = _this.find("a:first").width(), //获取列宽                    line = opt.line ? parseInt(opt.line, 10) : parseInt(_this.width() / lineW, 10), //每次滚动的列数，默认为一屏，即父容器列宽                    speed = opt.speed ? parseInt(opt.speed, 10) : 500; //滚动速度，数值越大，速度越慢（毫秒）                     timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔（毫秒）                       if (line == 0) line = 1;var upWidth = 0 - line * lineW;//滚动函数                                      var scrollLeft = function () {if (!_this.is(":animated")) {                            _this.animate({                                left: upWidth                            }, speed, function () {for (i = 1; i <= line; i++) {                                    _this.find("a:first").appendTo(_this);                                }                                _this.css({ left: 0 });                            });                        }                    }var scrollRight = function () {if (!_this.is(":animated")) {for (i = 1; i <= line; i++) {                                _this.find("a:last").show().prependTo(_this);                            }                            _this.css({ left: upWidth });                            _this.animate({                                left: 0                            }, speed, function () {                            });                        }                    }                         //Shawphy:自动播放                        var autoPlay = function () {if (timer) timerID = window.setInterval(scrollLeft, timer);                    };var autoStop = function () {if (timer) window.clearInterval(timerID);                    };

　　　　　　　　　　　　//鼠标事件绑定                       _this.hover(autoStop, autoPlay).mouseout();                   _btnleft.css("cursor", "pointer").click(scrollLeft).hover(autoStop, autoPlay);                       _btnright.css("cursor", "pointer").click(scrollRight).hover(autoStop, autoPlay);                }            })        })(jQuery);        $(document).ready(function () {            $("#scrollable").Scroll({ line: 5, speed: 500, timer: 3000, left: ".prev", right: ".next"});        }); </script></head><body><div style="margin:0 auto;width:500px;">

<div id="scrollable"><a class="prev" href="#"></a>

<div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 478px;"><div style="position: absolute; width: 200000em; left: 0px;" class="scrollable_demo"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>10</a><a>11</a><a>12</a><a>13</a><a>14</a><a>15</a></div><br clear="all"/>            </div>

<a  class="next" href="#"></a></div>

</div></body></html>

说明：1、需要两个图片

left.png：

right.png：

2、需要引入jquery的包，这个应该不用说的......

posted on 2011-09-06 16:35 转角遇到猫阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/yunduan/archive/2011/09/06/2168898.html

可配置循环左右滚动例子相关推荐

仿造小红书页面代码html,jQuery仿小红书登录页，背景图垂直循环滚动登录页，向上循环滚动的动画，实现一张背景图片的无缝向上循环js滚动...
jQuery仿小红书登录页,背景图垂直循环滚动登录页,向上循环滚动的动画,实现一张背景图片的无缝向上循环js滚动先看效果图: 图片是gif看着有点卡顿,网页里面其实很流畅的此代码使用CSS3动画实 ...
js文字无限循环向上滚动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
原生js实现文字循环向上滚动效果
原生js实现文字循环向上滚动效果 css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度,最好比内容区域高度低点,产生滚动条) #scrollArea {width: 400px; ...
android横向自动滚动列表,android横向循环自动滚动
项目需要实现GridView横向循环自动滚动 1.先看布局 android:layout_width="fill_parent" android:layout_height=&qu ...
使用“ Row_Number”功能和WHILE循环创建滚动平均值报告
介绍 ( Introduction ) A few days ago I received an email from a gentleman in the healthcare industry. ...
nginx php怎么配置伪静态,nginx rewrite 伪静态配置参数和使用例子
正则表达式匹配,其中: * ~ 为区分大小写匹配 * ~* 为不区分大小写匹配 * !~和!~*分别为区分大小写不匹配及不区分大小写不匹配文件及目录匹配,其中: * -f和!-f用来判断是否存在文件 ...
wpf的listbox循环数据滚动_滚动版 CentOS Stream 和 Fedora 的关系
如果 CentOS 现在位于 RHEL 的上游,那么 Fedora 会发生什么?那不是 Fedora 在 Red Hat 生态系统中的角色吗? -- Matthew Miller(作者) 一封来自 F ...
android循环滚动textview,Android 循环上下滚动
最近在做项目的时候遇到了一个上下滚动文字的需求,在网上找到了一个自定义的TextView,但是切换效果很图片,没有滚动的效果,考虑到html的marquee效果添加到TextView中,无奈没有效果, ...
CSS实现图片无限循环无缝滚动
实现代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...

可配置循环左右滚动例子

可配置循环左右滚动例子相关推荐

最新文章

热门文章