ボタンをクリックしたら、画像が切り替わるようにしたい。

初めての投稿になります。初心者すぎる質問で申し訳ありません。

HTMLとCSSである程度WEBのトップ画面（下写真）を作成したのですが、
ここから、左側の4つのブランドロゴの下にある Next と Back のボタンを押すたびに、4つのブランドの配置が切り替わるようにできないかと考えています。
また、ボタンを押してブランドのロゴを切り替える度に、最前面に配置されたブランドロゴに紐づく商品イメージ（右側の写真）が出るように設計したいです。

なお、現在のHTMLコードは下の感じです。

<aside> <h1>Original Brand</h1>

<div class="Aside_OriginalBrand">

<div class="OriginalBrand_BackArrow"><a href="#">
    <img src="img/Arrow/BackArrow.jpg" width="80" height="30" alt="BackArrow"/>

</a></div> 
	
	
	<ul><!--各liのimg要素のソースの末尾番号をKeyにしたい-->
		<li class="OriginalBrand_01"><a href="maison_de_naturel.com">
  			<img src="img/OriginalBrand/OriginalBrand_01.png" alt="maison_de_naturel"></a></li>
		
		<li class="OriginalBrand_02"><a href="cuew.com">
  			<img src="img/OriginalBrand/OriginalBrand_02.png" alt="cuew"></a></li>
		
		<li class="OriginalBrand_03"><a href="f_choice.com">
  			<img src="img/OriginalBrand/OriginalBrand_03.png" alt="f_choice"></a></li>
		
		<li class="OriginalBrand_04"><a href="e_smith.com">
  			<img src="img/OriginalBrand/OriginalBrand_04.png" alt="e_smith"></a></li>
	</ul>


	<div class="OriginalBrand_NextArrow"><a href="#">
    <img src="img/Arrow/NextArrow.jpg" width="80" height="30" alt=""/>

</a></div> 



<!--class="OriginalBrand_04"と連動させたい-->
<div class="Aside_OriginalBrandImg">
	<img src=
	"img/OriginalBrandImg/OriginalBrandImg_.jpg" width="548" height="360" alt=""/>
  <a href="maison_de_naturel.com">
    <button class="btn">詳細を見る</button>
  </a>
</div>
<!--↑Aside_OriginalBrandと＃をPHPで連動させたい-->

</div> </aside>


既にマークアップでもいろいろと問題があると思いますが、ここからどうプログラミング言語を設定すれば自分のイメージに近づけられるか教えていただけませんでしょうか？

tkturbo

2016/03/25 07:45

ソースは画面キャプチャではなくテキストのコピー＆ペーストでお願いします。

Akirax

2016/03/25 07:59

指摘、ありがとうございます。画面キャプチャからテキストのコピー＆ペーストに切替えました。

tkturbo

2016/03/25 08:01

「OriginalBrand_BackArrow」「OriginalBrand_NextArrow」あたりを押したら何か処理をするようにjavascriptを書いてると思いますが、そのあたりも追加で。

Akirax

2016/03/25 08:05

javascriptの記載は処理の記述が分からなくて、まだ何もしてないんです。＞＜どうしたらいいでしょうか？

行動規範の内容に同意します

回答2件

先頭の説明文が日本語変だったので修正しますたorz

投稿2016/03/25 08:54

tkturbo

総合スコア5572

ベストアンサー

まず、ボタンと「ボタンが押される」というイベントを紐づけなければなりません。

1.どのボタンで？ => document.getElementsByClassName(クラス名)で取得できるでしょう。配列になってますけど。
2.どんなイベント？ => addEventListener(処理)で1のボタンがクリックされたイベントを処理と紐づけます。
3.処理の中身は？ => 並べ替え？対象は1と同様にliタグについてるクラス名で取得すればいいんじゃないかと。

まあ、だいたいこんな感じ。

/* javascript-1 */
document.getElementsByClassName('OriginalBrand_NextArrow')[0].addEventListener(
	'click',
	function(){
		// このブロックに処理の内容
	}
);

このやり方だとNextボタンにaタグ不要になるので、

<!-- html_1 -->
<div class="OriginalBrand_NextArrow">
	<img src="img/Arrow/NextArrow.jpg" width="80" height="30" alt=""/>
</div>

これで十分。

あと、liタグを並べ替えたいんなら、ulタグにid属性つけた方がよさそう。
id属性があると「document.getElementById(id属性の値)」ulタグが取れるので。

たとえば

<!-- html_2 -->
<ul id='aside'><!--各liのimg要素のソースの末尾番号をKeyにしたい-->

とかにしておくと、javascript-1の処理内容はこんな感じかな？

/* javascript-2 */
// ulタグを取得
var ul = document.getElementById('aside');
// 次を表示＝先頭のliタグを最後に入れる。のでliタグの配列を持ってくる。
var list = ul.getElementsByTagName('li');
// ↑これはulタグの中に入ってるliタグをタグ名で全部持ってくるやつ。
ul.appendChild(list[0]);
// appendChildは子供の要素を末尾に追加する、ということ。
// 先頭のを最後に持っていったら2番目のが繰り上げ先頭。

「やりたいこと」の関連キーワードはだいたい入ってるから後はGoogle先生とよろしく。

投稿2016/03/25 08:37

編集2016/03/25 08:53

tkturbo

総合スコア5572