Question

我正在为一位朋友在网站上工作，我遇到了一个奇怪的问题。该模板使用猫头鹰旋转木马，基本上是磨机滑块的运行，但是我也想要它，以便当用户点击旋转木马图像时它取代上面的主图像。我制定了以下代码，但是只有在旋转木马中选择第二个图像后才能按照预期的方式工作，然后是第一个图像。好像主图像在执行此序列之后才获得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并淡化元素。这就是它的全部内容。

轮播/滑块选择加载主图像

1 个答案: