我有当前的代码:
<script type="text/javascript">
$(document).ready(function()
{
$('.showcase-content .description').jScrollPane();
$(".beericon").click(function() {
var imgnumber = parseInt($(this).attr('id').replace("imglink", ""));
var move = -($("#img"+imgnumber).width() * (imgnumber - 1));
$("#img_box").animate({
left: move
}, 500);
$("#beerview_icons").find("div").removeAttr("style");
$("#imglink"+imgnumber).css("background-position", "0px -74px");
return false;
});
});
</script>
它适用于:
<div id="img_container">
<div id="img_box"> <img id="img1" src="../images/lightbox_brew_photos/cutthroat.png"/> <img id="img2" src="../images/beer_in_glasses/Cutthroat.png"/>
<img id="img3" src="../images/lightbox_brew_photos/Cutthroat-6-Pack.png" style="margin-top:290px;"/>
<img id="img4" src="../images/lightbox_brew_photos/Cutthroat-12-Pack.png" style="margin-top:335px;"/>
<div style="clear:both;"></div>
</div>
</div>
<div id="beerview_icons">
<div class="beericon" id="imglink1" style="background-position:0px -74px;"></div>
<div class="beericon" id="imglink2"></div>
<div class="beericon" id="imglink3"></div>
<div class="beericon" id="imglink4"></div>
<br class="clearfloat" />
</div>
有没有办法修改 js 使其成为基本的上一个下一个导航?我必须添加更多图像,它的拇指空间更小。认为尝试写一些东西比用不同的幻灯片重做更容易。