1. 画像スクロール コードをコピー コードは次のとおりです: <br> $(document).ready(function ( ) {<br> Xhun(".a"); //----------------------「.a」のみを変更する必要があります（これはここで最大の div のクラス値 ------------------------<br>}); <p>function Xhun(_box) {<br> var box_frame = _box " div ul";<br> var box_div = _box " div";<br> $(_box).find("ul").wrap(" <div></div>"); //オフセットを制御する div を追加します<br> $(box_div).append($(box_frame).clone()); //ul をクローンして、 div、シームレスなループを実現するために <br> $(box_div).append($(box_frame).clone()) //シームレスなループを実現するために、ul を複製して div に追加します <br> var li_size = $(_box).find("li").size(); //li<br>の数を取得します li_width = $(box_frame).children("li").width(); the li <br> の幅 var box_div_width = $(box_div).width(li_size * li_width * 5); // div <br> の幅を設定 $(box_frame).css("float", "left") ;</p> <p> </p> <p> var dd = setInterval(gd, 30);<br> function gd() {<br> var Position = $(_box).scrollLeft(); //scrollLeft() はオブジェクトの水平オフセットを取得します。 <br> $(_box).scrollLeft(position 1);<br> if (position >= $(box_frame).width()) { $(_box).scrollLeft(0) } // ディスプレイスメントかどうかを判断します。 ul より大きい dd);<br> });<br>} <br> の合計長 <br> <br> * { マージン: 0; パディング: 0; }</p> ul { リストスタイル: なし; }<p> li { float: 左; 幅: 100px; }<br> { 幅: 400px; ; オーバーフロー: 非表示; 高さ: 100px; }<br> ;ul> ; ;/a> 2. スライド コードをコピー コードは次のとおりです: 幻灯片切换 <br>$(document).ready(function () {<br> slide(".frame"); //----------------------只需要修改 ”.frame" (就是最大的div的class值这里就行---------------------<br>}); <p> </p> <p>function slide(cls) {<br> $(cls).find("ul").wrap("<div></div>");<br> $(cls+" div").attr("class","iframe");<br> var li = $(cls).find("li").size();//统计多少张图片<br> var li_width = $(cls).find("li").width(); //获取li的宽度<br> $(cls + " div").children("ul").width(li_width * li);//设置宽度，使图片排成一排<br> var s = "<ul class='button'>";//生成li的按钮<br> for (var i = 0; i < li; i++) {<BR> s += "<li>" + (i + 1) + "</li>";<br> }<br> s += "</ul>";<br> $(s).appendTo($(cls));//生成按钮结束,并添加到最大div里面<br> var _i = 0;//当前的编号<br> $(cls).find(".button li").each(function (i) {<br> //生成按钮点击事件<br> $(this).click(function () {<br> _i = i;<br> $(this).attr("class", "on").siblings().removeAttr("class");//设置class，没必要再多加一个off<br> $(cls + " div").animate({ scrollLeft: i * li_width }, "slow");//图片移动<br> });<br> }).eq(0).click();<br> function tt() {//定时器函数<br> _i++;<br> _i = _i % li;<br> $(cls).find(".button li").eq(_i).click();//自动点击切换图片<br> }<br> var t = setInterval(tt, 3000);//定时器<br> $(cls).hover(function () {<br> clearInterval(t);//鼠标经过清除定时器，离开时又触发<br> }, function () {<br> t = setInterval(tt, 3000);<br> })<br>}<br> <br> * { margin: 0; padding: 0; }<br> li, ul { list-style: none; margin: 0; padding: 0; }<br> .frame { width: 280px; height: 280px; position: relative; margin: 0 auto; } /*这里需要修改最大div的宽度和高度*/<br> .iframe { overflow: hidden; width: 280px; height: 280px; } /*这里需要修改该div的宽度和高度*/<br> .iframe ul li { float: left; width: 280px; } /*这里需要修改li的宽度*/<br> .button { position: absolute; bottom: 15px; right: 15px; z-index: 300; }<br> .button li { float: left; cursor: pointer; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 5px; border-radius: 7px; color: #fff; background: #000; }<br> .button .on { color: #000; background: #fff; }<br> < ;/a>
< ;/a>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
