효과 좋네요. 많은 텍스트 광고를 이런 방식으로 제어할 수 있습니다. <style type="text/css"> ul,li{ display:block; } li{ width:150px; float:left; } #content { width: 2030px; margin-left: 0px; } #slider { margin-left: 40px; overflow: hidden; } #leftA { display: block; float: left; left: 10px; top: 5px; position: absolute; background-image: url(); } #rightA { display: block; float: right; right: 10px; top: 5px; position: absolute; background-image: url(); } </style> <div class="title_bar"> <a id="leftA" href="javascript:void(0);"> </a> <div id="slider"> 왼쪽 <div id="content"> <ul id="Ul1" class="tab_nav" style="margin-left: 0px; margin-right: 0px;"> <li id="gaom1" class="menuon"> </li> <li id="gaom2" class="menuoff"> 기본정보</li> <li id="gaom3" class="menuoff"> 기본정보</li> <li id="gaom4" class="menuoff"> 기본정보</li> <li id="gaom5" class="menuoff"> 기본정보</li> <li id="gaom6" class="menuoff"> 기본정보</li> <li id="gaom7" class="menuoff"> 기본정보</li> <li id="gaom8" class="menuoff"> 기본정보</li> <li id="gaom9" class="menuoff"> 기본정보</li> <li id="gaom10" class="menuoff"> 기본정보</li> <li id="gaom11" class="menuoff"> 기본정보</li> </ul> 기본정보</div> </div> <a id="rightA" href="javascript:void(0);"> </a> </div> 그렇죠 [Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ] 이후 실행 중인 경우 외부 js이므로 새로 고쳐야 합니다. function animate(dir, step) { var position; position = parseInt($("#content").css("margin-left")); var contentwidth; var sliderwidth; contentwidth = parseInt($("#content").css("width")); sliderwidth = parseInt($("#slider").css("width")); //alert(position); switch (dir) { case "right": position = ((position - step) < (sliderwidth - contentwidth)) ? (sliderwidth - contentwidth) : (position - step); break; case "left": position = ((position + step) > 0) ? 0 : (position + step); break; default: break; }; //alert(position); $("#content").animate( { marginLeft: position + "px" }, 800 ); } $(document).ready(function() { $("#slider").css("width", ($("body").attr("clientWidth") - 80) + "px"); $("#leftA").click(function() { animate("left", 400); }); $("#rightA").click(function() { animate("right", 400); }); });
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
