1. 사진 스크롤 코드 복사 코드는 다음과 같습니다. <br> $(document).ready(함수 ( ) {<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> var li_width = $(box_frame).children("li").width(); 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> * { margin: 0; padding: 0 }</p> ul { 목록 스타일: 없음 ; }<p> li { float: 왼쪽; margin-left: 100px; }<br> img { 너비: 100px; 높이: 100px; ; 오버플로: 숨겨진; 높이: 100px; ;ul> ;</li><br> ;/a></li><br><br> </ul><br> </div><br></body><br></html><br><br> <br> <br>2. <br>슬라이드<br><br><br><br><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다.<br></p> <div class="codebody" id="code96350"> <br><!DOCTYPE html><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title>幻灯片切换</title><br> <script type="text/javascript" src="jquery.min.js"></script><br> <script type="text/javascript"><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> </script><br> <style type="text/css"><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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
