コードをコピー コードは次のとおりです: 可配置横栏滚动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. 写真が 2 枚必要です 左.png： 右.png： 2. jqueryパッケージを導入する必要があるのは言うまでもありません...
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
