如何使用jQuery cycle2在幻灯片更改上移动元素？

问题描述：

我有一个使用jQuery cycle2的幻灯片。我已经包含在它需要如何在我的项目起作用的样机一的jsfiddle：https://jsfiddle.net/b1tfx58o/2/如何使用jQuery cycle2在幻灯片更改上移动元素？

它在侧面导航链接，它有一个本应转移到与导航对齐边缘的红色小盒子链接。例如，如果我点击“幻灯片2”而不是红色框将向下滑动并像幻灯片1一样停留在那里。如果我单击幻灯片1或幻灯片3，则会移动到边框线的中间链接。您还应该能够点击红色框使其进入下一张幻灯片。我有这部分工作，但没有移动它，当我点击链接。任何帮助，将不胜感激！

剧本至今（检查的jsfiddle会更有意义）：

var icon = $('.icon'); 
var slideshow = $('.cycle-slideshow'); 

icon.on('click', function(e){ 
    e.preventDefault(); 
    slideshow.cycle('next', function(){ 
    }); 
});

答

你需要点击监听器添加到每个列表链接，运行的“这”一个功能，.getBoundingClientRect（）参考点击的链接，然后使用getBCR中的'top'值更改图标元素的顶部位置。您可能必须将其与window.scrollY结合起来用于您的项目。

请看这里https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect &好运

如何使用jQuery cycle2在幻灯片更改上移动元素？

相关推荐