- 問08
- ul,liのリセットを忘れて時間をかける。
- 途中から構造を変えるときは要注意。
- サムネイルは、メイン画像へのリンクだと考える。
- リンク→href属性、と連想する。
- サムネイルにはhref属性を付けなければならない。
- サムネイルは、なににリンクするのか？それは、メイン画像のsrcにリンクする。
- メイン画像が切り替わる→メイン画像の「img」のsrc属性が変わると考える。
- 総合すると、メイン画像のsrc属性が、サムネイルのhref属性に変わる、ということになる。
- $('#mainImg>img').attr('src', 'AAA');
- AAA=$(this).attr('href')
script
<script>
$(function(){
$('li.small').on('click', function(){
$('#mainImg>img').attr('src', $(this).attr('href'));
});
});
</script>
html
<body>
<div id="container">
<div id="mainImg"><img src="img/Q08_1.jpg"></div><!--mainImg-->
<ul class="thumbnail">
<li href="img/Q08_1.jpg" class="small"><img src="img/Q08_s1.jpg"></li>
<li href="img/Q08_2.jpg" class="small"><img src="img/Q08_s2.jpg"></li>
<li href="img/Q08_3.jpg" class="small"><img src="img/Q08_s3.jpg"></li>
<li href="img/Q08_4.jpg" class="small"><img src="img/Q08_s4.jpg"></li>
<li href="img/Q08_5.jpg" class="small"><img src="img/Q08_s5.jpg"></li>
<li href="img/Q08_6.jpg" class="small"><img src="img/Q08_s6.jpg"></li>
</ul>
</div><!--container-->
</body>
css
@charset "utf-8";
/* CSS Document */
html, body, img, ul, li{
margin: 0;
padding: 0;
line-height: 1.0;
}
ul, li{
list-style-type: none;
}
img{
vertical-align: bottom;
}
/*-----------------------------------------------------------------
reset*/
#container{
width: 800px;
margin: 100px auto;
}
#mainImg{
margin-bottom: 16px;
}
.thumbnail{
overflow: hidden;
width: 800px;
}
li.small{
width: 120px;
float: left;
cursor: pointer;
margin-left: 16px;
}
.thumbnail li:first-child{
margin-left: 0;
}
