我正在尝试实现 Magnify.js到 bxSlider幻灯片,但我有一个问题,缩放效果仅适用于幻灯片的第一张图像,一旦我移动到下一张图像,该效果将不起作用,但它适用于第一张图像。所有幻灯片的图像都有一个“缩放”ID,我用放大来定位它。 有什么方法可以让它适用于整张幻灯片而不仅仅是第一张幻灯片吗?
最佳答案
尝试使用以下代码片段: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,并且还(已编辑)在每次幻灯片更改时添加 .magnify() 函数。
关于javascript - Magnify.js 与 bxSlider,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39759948/