javascript - 轮播/ slider 选择加载主图像

Question

我正在为一个 friend 做网站，我遇到了一个奇怪的问题。该模板使用 Owl Carousel ，基本上是您运行的磨机 slider ，但我也想拥有它，以便当用户单击旋转木马图像时它会替换上面的主图像。我制定了以下代码，但它仅在选择轮播中的第二张图片，然后选择第一张图片后才能按预期方式工作。好像主图像在执行此序列后才获得 display:none 属性。

您可以在以下位置查看示例:http://felixplakolb.com/portfolio-single/138649524

http://codepen.io/afagard/pen/KMpQQN

JQUERY:

<script type="text/javascript">
jQuery(function () {
    // gallery setup    
    var Img='.'+$(".gallery_image img#active").attr('class')
    $("#owl-related-works a").click(function(){
        var ImgId = '.'+$(this).attr("href").slice(1);
        if (ImgId!=Img) {
             $(Img).hide();
             $(Img).attr({id:'inactive-gallery'});
             $(ImgId).show();
             $(ImgId).attr({id:'active'})
        }
        Img=ImgId;
      return false;
    });
});
</script>

轮播:

    <?php } elseif ($type = 'Photography') { ?>
    <section class="related-projects pb-90">
        <div class="container">
            <h4 class="heading-inline"><?php echo $name . ' Gallery'; ?></h4>
            <div class="customNavigation right">
                <a class="btn prev"><i class="fa fa-angle-left"></i></a>
                <a class="btn next"><i class="fa fa-angle-right"></i></a>
            </div>
            <div class="row mt-20">
                <div id="owl-related-works" class="owl-carousel owl-theme">

                    <?php $counter = 1; foreach ($imagesArr as $image) { ?>
                    <div class="work-item">
                        <div class="work-container">
                            <div class="work-img">
                                <a href="#img<?php echo $counter++; ?>"><img src="<?php echo $images_core->prepLocation . $image ?>" alt="<?php echo $name; ?>"></a>
                            </div>
                        </div> 
                    </div>
                    <?php } ?>

                </div>
            </div>
        </div>
    </section>

    <? } ?>

主图:

                    <div id="gallery_image">

                    <?php $counter = 1; foreach ($imagesArr as $image) { ?>
                    <img src="<?php echo $images_core->prepLocation . $image ?>" alt="<?php echo $name; ?>" <?php echo $counter > 1 ? 'style="display:none;" ' : 'style="display:block;" id="active" '; ?> class="img<?php echo $counter++;?>">
                    <?php } ?>          
                    </div>  

Answer 1

你能用一个例子创建一个codepen或jsbin吗？我很乐意帮助你:)

一般来说，大图上最好用jquery回调来替换图片src。但如果我们有一个合适的 jsbin，解释起来会容易得多。

理论上，脚本需要简单得多，您可以将onclick 监听器附加到所有小图像。它将从被点击的 div 中窃取 href 或 data-attribute 值。它将淡出当前图像，作为回调，它将替换 src 并淡入元素。这就是它的全部内容。