基于jquery可配置循环左右滚动例子_jquery

复制代码 代码如下:

可配置横栏滚动Demo * { 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; } (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 _this.find("a:first").appendTo(_this); } _this.css({ left: 0 }); }); } } var scrollRight = function () { if (!_this.is(":animated")) { for (i = 1; 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"}); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

说明：1、需要两个图片

left.png：

right.png：

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

// <![CDATA[ (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); //Shawphy:向上向下鼠标事件绑定 _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"}); }); // ]]>

基于jquery可配置循环左右滚动例子_jquery

Articles Liés