我正在尝试将Magnify.js实现为bxSlider幻灯片,但是我有一个问题,缩放效果仅适用于幻灯片的第一张图片,一旦移至下一张图片,效果将无法使用,但是它在第一个上执行。幻灯片的所有图像都有一个“缩放” ID,我使用Magnify定位。
有什么方法可以使它适用于整个幻灯片,而不只是第一张幻灯片?

最佳答案

尝试使用以下代码段:https://jsfiddle.net/L9fe0py3/5/

HTML:

<ul class="bxslider">
  <li><img id="img1" src="http://bxslider.com/images/home_slides/picto.png" data-magnify-src="http://bxslider.com/images/home_slides/picto.png" /></li>
  <li><img id="img2" src="http://bxslider.com/images/home_slides/houses.jpg" data-magnify-src="http://bxslider.com/images/home_slides/houses.jpg"/></li>
  <li><img id="img3" src="http://bxslider.com/images/home_slides/hillside.jpg" data-magnify-src="http://bxslider.com/images/home_slides/hillside.jpg"/></li>
</ul>
<img id="img4" src="http://bxslider.com/images/home_slides/hillside.jpg" data-magnify-src="http://bxslider.com/images/home_slides/hillside.jpg"/>


Javascript:

$(document).ready(function() {
    $('.bxslider').bxSlider({
      onSlideAfter:function(e){
        $(e).find('img').magnify();
      }
    });
    $('#img1,#img2,#img3,#img4').magnify();
});


您需要将<img/>元素上的“ data-magnify-src”属性替换为“大”图像URL,并且每当幻灯片更改时,ALSO(已编辑)也将添加.magnify()函数。

09-25 21:47