단계는 다음과 같습니다. (1) 사진 준비(왼쪽 및 오른쪽 화살표, 일부 샘플 사진) (2) JS(jquery) 코드는 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. <br>var picPath = new Array() <br>picPath.push ("Images/chuang_yhb.jpg"); <br>picPath.push("Images/dong_wgx.jpg") <br>picPath.push("Images/gao_xsg.jpg") <br>var index = 0; <br>$(function() { <br>var top = $("#img1").offset().top; <br>var left = $("#img1").offset().left; <br>var height = $("#img1 ").height(); <br>var width = $("#img1").width() <br>$("#img1").attr({ " src": picPath[index] }); <br>$("#img1").parent().hover(function() { <br>//왼쪽 및 오른쪽 화살표 표시 <br>$("#leftArrow ").show(); <br> $("#rightArrow").show(); <br>$("#leftArrow").css({ "left": 왼쪽 - 10, "top": 위쪽( 높이 / 2) }); <br> $("#rightArrow").css({ "왼쪽": 왼쪽 너비, "상단": 위쪽(높이 / 2) }); <br>//왼쪽 및 오른쪽 화살표 숨기기 <br>$("#leftArrow").hide() <br>$("#rightArrow").hide() <br>}; $("#leftArrow").click( function() { <br>if (index > 0) { <br>$("#img1").attr({ "src": picPath[--index] } ); <br>} <br>} ); <br>$("#rightArrow").click(function() { <br>if (index < picPath.length) { <br>$("#img1 ").attr({ "src": picPath[ index] }); <br>} <br>}); <br>}); <br> (3) HTML 부분은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. ; 아래 첨부된 내용은 의 js 버전입니다. 제목 없는 문서<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <style type="text/css"> <!-- *{ margin:0; padding:0} #imgslide{ margin:100px auto; width:550px; position:relative;-moz-user-select:none } #imgslide img{ width:550px} #imgslide #pre{ position:absolute; display:block; height:100%; background:#003366;filter:Alpha(Opacity=0);opacity:0; left:0; top:0; z-index:2; width:50%; cursor:url(http://s.xnimg.cn/imgpro/arrow/pre.cur),auto; } #imgslide #next{ position:absolute;z-index:2; display:block; background:#00CC99;filter:Alpha(Opacity=0);opacity:0; height:100%;width:50%; top:0; right:0; cursor:url(http://s.xnimg.cn/imgpro/arrow/next.cur), auto;} #intro{ padding:5px 8px; line-height:1.6; font-size:12px; color:#333; background:#333333; color:#fff} --> </style> <div id="imgslide"> <span id="pre"></span><span id="next"> </span> <img id="showimg" src="http://img1.gtimg.com/0/68/6884/688412_550x550_0.jpg" alt="클릭 화살표 이미지 전환_이미지 특수 효과를 구현하는 간단한 js 코드" > <div id="intro"> </div> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
