幻灯片和这里使用的导航栏.... https://www.imaginedragonsmusic.com

Question

有人可以帮我构建幻灯片以及此处使用的导航栏 .... https://www.imaginedragonsmusic.com

我遇到的问题......

• 我尝试使用bootstrap旋转木马课，但我不能添加褪色效果＆amp;图像在旋转木马指示器中处于活动状态时的黄金背景效果。
• 在调整浏览器大小时，我无法发挥作用，就像原始网站一样。

谢谢

Answer 1

我的方式如下：

<span>Left Arrow</span>

    <div> First Image <div>
    <div> Second Image <div>
    <div> Third Image <div>
    <div> Fourth Image <div>

<span>Right Arrow</span>

（1）隐藏除第一个以外的所有图像

（2）然后在两个箭头上设置点击事件

（3）让我们说点击右箭头，它应显示第二张图像并隐藏其余图像

（4）如果再次点击它，它应显示第3张图像并隐藏其余图像

（5）为左箭头设置相同的东西

我前一段时间用Vanilla JS做过这个，你可以在这里找到代码： https://github.com/nishkaush/automatic-slideshow

我这样做是为了让图像每隔几秒钟改变一次，但用户也可以通过点击向前或向后箭头来改变它们。

希望这有帮助！