我正在开发一个书页预览网站,它从文件服务器通过mysql数据库获取书籍所有页面图像(缩略图),单击缩略图将在主div上显示该图像,也可以通过单击下一个或上一个按钮来更改图像从缩略图并显示在主div上。
我已经完成了获取图像并点击缩略图将在主div上显示图像,按钮也可以正常工作,但是当我按钮更改图像时,它不会显示在主div上这是我的问题。我是这个PHP和javascript的新手,我已经按照这个http://jsfiddle.net/Bgj4b/的代码,我已经把这个仍然没有弄清楚,请帮助我。
这是我的问题演示:https://jsfiddle.net/Looper/5r6qb5k3/
这是我的实际代码
PHP / HTML
<button class="left-arrow" id="left-arrow">Left</buttom>
<img src="" alt="book" class="main-img" id="main-img">
<button class="right-arrow" id="right-arrow">Right</buttom>
<ul class="book-list id="book-list">
<?php if ($total_page > 0) : ?>
<?php foreach ($results as $row) : ?>
<li class="book p-2">
<span class="page-number"><?php echo $page_num++ ?></span>
<img src="<?php echo PAGE_URL . "/" . $b_id . "/" . $row->page_name ?>" alt="Book Image">
</li>
<?php endforeach ?>
<?php endif ?>
</ul>
JavaScript的
$("#book-list li").click(function(e) {
var target = e.target;
var src = target.src;
$("#showcase-book-img").fadeOut(function() {
$(this).on('load', function() {
$(this).fadeIn();
});
$(this).attr("src", src);
});
$("#book-list li").removeClass("active");
$(this).addClass("active");
});
$("#left-arrow").click(function(){
if($("#book-list li.active").next("#book-list li").length>0){
$("#book-list li.active").next().trigger("click");
} else {
$("#book-list li:first").trigger("click");//go to first
}
return false;
});
$("#right-arrow").click(function(){
if($("#book-list li.active").prev("#book-list li").length>0){
$("#book-list li.active").prev().trigger("click");
} else {
$("#book-list li:last").trigger("click");//go to end
}
return false;
});
$("#book-list li:first").trigger("click");
这是错的:你在li
元素中发射事件。它必须应用于其图像。
Here分叉纠正。