好了朋友们。当用户单击较小的缩略图图像时,我希望切换较大的显示图像。
这是我的 jquery 脚本,但到目前为止它没有切换。单击缩略图时没有任何反应。
这很奇怪,因为我有两个箭头图像,在单击时会滑动缩略图,但由于某种原因,在单击实际拇指时不会。到底是怎么回事?
查询:
$(document).ready(function () {
// when image with ID thumb is clicked change src
$("img#thumb").click(function () {
var imgpath = $(this).attr("src");
$("img#cover").attr("src", imgpath);
});
// slide more thumbnails
$("#arrowright").click(function () {
$("#innerthumb").animate({ marginLeft: "-850px" });
});
$("#arrowleft").click(function () {
$("#innerthumb").animate({ marginLeft: "0px" });
});
// image change on click
$("img#thumb").click(function () {
var newimg = $(this).attr("src");
$("img#cover").attr("src", newimg);
});
HTML
<div id="mainimage">
<div id="inner">
<img id="cover" src="images/environments/img0.jpg" width="980px" />
<img id="cover-old" src="" width="980px"/>
</div>
</div> <!--end of mainimage div-->
<div id="arrowleft"><img src="images/arrowleft.png"></div>
<div id="innerthumb">
<div id="thumb1" ><img id="thumb" src="images/environments/img0.jpg" width="160px" height="80px"/></div>
<div id="thumb2" ><img id="thumb" src="images/environments/img1.jpg" width="160px" height="80px" /></div>
<div id="thumb3" ><img id="thumb" src="images/environments/img2.jpg" width="160px" height="80px" /></div>
<div id="innerthumb"></div>
<div id="arrowright"><img src="images/arrowright.png"></div>