手順は以下の通りです。 (1) 画像（左右の矢印といくつかのサンプル画像）を準備します。 (2) JS (jquery) コードは次のとおりです。 コードをコピーします コードは次のとおりです: <br>var picPath = new Array(); ("画像/chuang_yhb.jpg"); <br>picPath.push("画像/dong_wgx.jpg"); <br>var インデックス = 0; <br>$(function() { <br>var top = $("#img1").offset().top; <br>var left = $("#img1").offset().left; <br>var height = $("#img1").height(); <br>var width = $("#img1").attr({ " src": picPath[index] }); <br>$("#img1").parent().hover(function() { <br>//左右の矢印を表示 <br>$("#leftArrow ").show(); <br> $("#rightArrow").show(); <br>$("#leftArrow").css({ "left": left - 10, "top": top (高さ / 2) }); <br> $("#rightArrow").css({ "左": 左の幅, "上": 上 (高さ / 2) }); <br>} <br>// 左右の矢印を非表示にします <br>$("#leftArrow").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> [Ctrl A
; 
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
