ウェブページの画像の回転を実現するjs

この記事では、Webページの画像の回転を実現するためのjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

1. 効果は以下のとおりです。

2. 関数を実装する:

（１）左矢印または右矢印をクリックすると、下に表示されている画像が対応する前または次の画像に切り替わります。

（２）ナビゲーション内の画像をクリックすると、その下の対応する画像が表示され、前または次の画像を再度クリックすると、対応する画像が表示されます。

（3）画像アドレスはインターネットから取得することも、独自のサーバーから送信された文字列配列にすることもできます。

3. 実装コード:

（１）ディレクトリ構造：

（２）index.htmlのコード内容は以下のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
 <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
 <title>画像の回転</title>
 <script type="text/javascript" src="js/showPic.js"></script>
 <link rel="スタイルシート" type="text/css" href="css/mystyle.css"/>
</head>
<本文>
    <img id="picture" src="image/1.jpg"alt="私の画像"/>
    <div id="ナビゲート">
    <ul id="画像">
          <li>
              <a href="#" title="左矢印" οnclick="clickTurnLeft();">
                 <img src="image/left_aim.jpg" id="leftAim">
              </a>
          </li>
   <li>
             <a href="image/1.jpg" title="花" οnclick="showPic(this);return false;">
          <img src="image/1.jpg" id="smallPic" alt="花のサムネイル">
             </a>
   </li>
   <li>
             <a href="image/2.jpg" title="白い雪" click="showPic(this);return false;">
                <img src="image/2.jpg" id="smallPic"alt="雪のサムネイル">
             </a>
   </li>
   <li>
      <a href="image/3.jpg" title="飛んでいる鳥" οnclick="showPic(this);return false;">
                <img src="image/3.jpg" id="smallPic"alt="鳥のサムネイル">
             </a>
   </li>
   <li>
       <a href="image/4.jpg" title="ロック" click="showPic(this);return false;">
          <img src="image/4.jpg" id="smallPic"alt="石のサムネイル">
              </a>
   </li>
          <li>
             <a href="#" title="右矢印" οnclick="clickTurnRight();">
                <img src="image/right_aim.jpg" id="rightAim"alt="右に回転">
             </a>
         </li> 
      </ul>
   </div>   
</本文>
</html>

（３）mystyle.cssのコード内容は以下のとおりです。

/* mystyle.css コード */
 
体 {
 テキスト配置:中央
}
#ナビゲート{
 マージン:0 自動; 
 幅:1100ピクセル; 
 高さ:100px;
}
ul{
 右マージン:自動;左マージン:自動;
}
li{
 フロート:左;
 パディング:10px;
 リストスタイル:なし;
}
 
#左狙い{
 幅:100ピクセル;
 高さ:100px;
}
#小さい写真{
 幅:180ピクセル;
 高さ:120px;
 border:2px 黒一色;
}
#正しい狙い{
 幅:100ピクセル;
 高さ:100px;
}
＃写真{
 表示:ブロック;
 幅:800ピクセル;
 高さ:600px;
 マージン:0 自動;
}

（4）showPic.jsのコード内容は次のとおりです。

//写真を表示
var href = 新しい配列("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg"); 
var インデックス = 0 ; 
 
関数clickTurnLeft() {
 （インデックス == 0）の場合{
  インデックス = href.length - 1; 
 } それ以外 {
  インデックス = --index % href.length; 
 }
    var picture = document.getElementById("picture");
   picture.setAttribute("src",href[index]);
}
 
関数clickTurnRight(){
 インデックス = ++index % href.length; 
 var picture = document.getElementById("picture");
   picture.setAttribute("src",href[index]);
}
 
関数 showPic(whichPic){
 var ソース = whichPic.getAttribute("href");
 インデックス = href.indexOf(ソース);
  var picture = document.getElementById("picture");
  picture.setAttribute("src",ソース);
}