问题描述
我有一个面向缩略图的简单幻灯片演示功能-单击缩略图时，它会从数据属性中加载图像。
现在，我已经实现了“上一个”和“下一个”功能，以在它们之间跳过（总是从所选幻灯片开始）。
问题 ：不幸的是，该序列无法跟上，并且无法以某种方式保持对应保留位置的计数。
注意：单击缩略图效果很好。
$('#product-gallery-super').children().click(function(e) { e.preventDefault(); var prodImg = $(this).attr('data-image'); var imgSrc = $(this).children().attr('src') if (imgSrc != '/images/imagecomingsoon_en.jpg') { $(this).addClass("active-thumbnail").siblings().removeClass("active-thumbnail"); $('.main-image').attr('src', prodImg); } }); $("#next").click(function() { if ($("#product-gallery-super .active-thumbnail").next().length != 0) { $("#product-gallery-super .active-thumbnail").next().addClass('active-thumbnail').prev().removeClass('active-thumbnail'); imageManage($("#product-gallery-super a").last().data('image')); } else { $("#product-gallery-super .active-thumbnail").removeClass('active-thumbnail'); $("#product-gallery-super a").first().addClass('active-thumbnail'); imageManage($("#product-gallery-super a").first().data('image')); } return false; }); $("#prev").click(function() { if ($("#product-gallery-super .active-thumbnail").prev().length != 0) { $("#product-gallery-super .active-thumbnail").prev().addClass('active-thumbnail').next().removeClass('active-thumbnail'); imageManage($("#product-gallery-super .active-thumbnail").prev().data('image')); } else { $("#product-gallery-super .active-thumbnail").removeClass('active-thumbnail'); $("#product-gallery-super a").last().addClass('active-thumbnail'); imageManage($("#product-gallery-super a").last().data('image')); } return false; }); function imageManage(target) { return $('.main-image').attr('src', target); }
.active-thumbnail { display: inline-block; border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <img class="main-image image-resize" src="http://placehold.it/300x400?text=1" data-zoom-image="http://placehold.it/1000x2000?text=1" onerror="comingSoonMain(this)"> <button name="next" id="next">Next</button> <button name="prev" id="prev">Prev</button> <div id="product-gallery-super"> <a href="#" class="product-zoom-gallery active-thumbnail" data-image="http://placehold.it/300x400?text=1"> <img src="http://placehold.it/61x79?text=1"> </a> <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=2"> <img src="http://placehold.it/61x79?text=2"> </a> <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=3"> <img src="http://placehold.it/61x79?text=3"> </a> <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=4"> <img src="http://placehold.it/61x79?text=4"> </a> <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=5"> <img src="http://placehold.it/61x79?text=5"> </a> <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=6"> <img src="http://placehold.it/61x79?text=6"> </a> </div>
1楼
webzy
0
已采纳
2015-07-26 00:05:40
您的电话应该是：
imageManage($("#product-gallery-super .active-thumbnail").data('image'));