复制代码 代码如下: 可配置横栏滚动Demo <BR>* { margin:0; padding:0;} <BR>body { font-size:12px;} <BR> <BR>#scrollable { <BR>background-color:#efefef; <BR>border:1px solid #ddd; <BR>padding:10px 8px; <BR>width:523px; <BR>height:65px; <BR>margin-top:30px; <BR>} <BR>div.items { <BR>height:66px; <BR>margin-left:8px; <BR>float:left; <BR>width:475px !important; <BR>} <BR>div.items a { <BR>display:block; <BR>float:left; <BR>margin-right:8px; <BR>width:88px; <BR>height:66px; <BR>background:#BBB; <BR>font-size:50px; <BR>color:#ccc; <BR>line-height:66px; <BR>text-decoration:none; <BR>text-align:center; <BR>cursor:pointer; <BR>} <BR>div.items a:hover { <BR>color:#999; <BR>} <BR>div.items a.active { <BR>background-position:-174px 0; <BR>color:#555; <BR>cursor:default; <BR>} <BR>a.prev, a.next { <BR>background:url(left.png) no-repeat 0 0; <BR>display:block; <BR>width:18px; <BR>height:18px; <BR>float:left; <BR>margin:22px 0 0 0; <BR>cursor:pointer; <BR>} <BR>a.next { <BR>background-image:url(right.png) <BR>} <BR>a.prev:hover { <BR>background-position:0 -18px; <BR>} <BR>a.next:hover { <BR>background-position:0 -18px; <BR>} <BR> <BR>(function ($) { <BR>$.fn.extend({ <BR>Scroll: function (opt, callback) { <BR>if (!opt) var opt = {}; <BR>var _btnleft = $(opt.left); <BR>var _btnright = $(opt.right); <BR>var timerID; <BR>var _this = this.eq(0).find("div").eq(1); <BR>var lineW = _this.find("a:first").width(), //获取列宽 <BR>line = opt.line ? parseInt(opt.line, 10) : parseInt(_this.width() / lineW, 10), //每次滚动的列数，默认为一屏，即父容器列宽 <BR>speed = opt.speed ? parseInt(opt.speed, 10) : 500; //滚动速度，数值越大，速度越慢（毫秒） <BR>timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔（毫秒） <BR>if (line == 0) line = 1; <BR>var upWidth = 0 - line * lineW; <BR>//滚动函数 <BR>var scrollLeft = function () { <BR>if (!_this.is(":animated")) { <BR>_this.animate({ <BR>left: upWidth <BR>}, speed, function () { <BR>for (i = 1; i <= line; i++) { <BR>_this.find("a:first").appendTo(_this); <BR>} <BR>_this.css({ left: 0 }); <BR>}); <BR>} <BR>} <BR>var scrollRight = function () { <BR>if (!_this.is(":animated")) { <BR>for (i = 1; i <= line; i++) { <BR>_this.find("a:last").show().prependTo(_this); <BR>} <BR>_this.css({ left: upWidth }); <BR>_this.animate({ <BR>left: 0 <BR>}, speed, function () { <BR>}); <BR>} <BR>} //Shawphy:自动播放 <BR>var autoPlay = function () { <BR>if (timer) timerID = window.setInterval(scrollLeft, timer); <BR>}; <BR>var autoStop = function () { <BR>if (timer) window.clearInterval(timerID); <BR>}; //鼠标事件绑定 <BR>_this.hover(autoStop, autoPlay).mouseout(); <BR>_btnleft.css("cursor", "pointer").click(scrollLeft).hover(autoStop, autoPlay); <BR>_btnright.css("cursor", "pointer").click(scrollRight).hover(autoStop, autoPlay); <BR>} <BR>}) <BR>})(jQuery); <BR>$(document).ready(function () { <BR>$("#scrollable").Scroll({ line: 5, speed: 500, timer: 3000, left: ".prev", right: ".next"}); <BR>}); <BR> 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"}); }); // ]]>
