基于jquery的循环左右滚动和上下滚动效果（备用记录）

来源：互联网发布：网络精准推广编辑：程序博客网时间：2024/05/01 14:15

@charset "utf-8";/* CSS Document */* {margin:0;padding:0;}body {font-size:12px;}/*左右滚动*/#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;}/*上下滚动*/#scrollDiv {width: 300px;height: 25px;line-height: 25px;border: #ccc 1px solid;overflow: hidden;}#scrollDiv li {height: 25px;padding-left: 10px;}

js代码

// JavaScript Document// 左右滚动(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"    });});// 上下滚动function AutoScroll(obj) {    $(obj).find("ul:first").animate({        marginTop: "-25px"    },    500,    function() {        $(this).css({            marginTop: "0px"        }).find("li:first").appendTo(this);    });}$(document).ready(function() {    var myar = setInterval('AutoScroll("#scrollDiv")', 1000);    $("#scrollDiv").hover(function() {        clearInterval(myar);    },    function() {        myar = setInterval('AutoScroll("#scrollDiv")', 1000)    }); //当鼠标放上去的时候，滚动停止，鼠标离开的时候滚动开始});

html代码

<!-- 左右滚动 --><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><!-- 上下滚动 --><div id="scrollDiv"><ul>  <li><a href="http://www.sina.com">欢迎浏览新浪网</a></li>  <li><a href="http://www.163.com">欢迎浏览网易</a></li>  <li><a href="http://www.csdn.com">欢迎进入程序员之家</a></li>  <li><a href="http://www.51aspx.com">很好的源代码下载区</a></li>  <li><a href="http://www.msdn.com">msdn</a></li>  <li><a href="http://www.baidu.com">欢迎浏览百度网</a></li></ul></div