Question

我有一个使用jQuery cycle2的幻灯片。我已经在jsfiddle中包含了一个如何在我的项目中运行的模型：https://jsfiddle.net/b1tfx58o/2/

它的侧面有导航链接，边缘有一个红色小方框，可以移动以与导航链接对齐。例如，如果我单击“幻灯片2”，则红色框将向下滑动并保持在那里，就像幻灯片1一样。如果我单击幻灯片1或幻灯片3，它将移动到位于边框线的中间位置链接。您还应该能够单击红色框以使其转到下一张幻灯片。当我点击链接时，我有那部分工作但没有移动它。对此的任何帮助将不胜感激！

到目前为止的脚本（检查JSfiddle会更有意义）：

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

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

Answer 1

你需要为每个列表链接添加点击监听器，运行'this'的.getBoundingClientRect（）函数，引用点击的链接，然后使用getBCR中的'top'值来改变你的顶部位置图标元素。您可能需要将它与window.scrollY结合用于您的项目。

见https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect＆amp;祝你好运

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

1 个答案: