简体   繁体   English

如何在轮播中将上一个和下一个图像嵌入上一个和下一个按钮

[英]How to embed the previous and next image in the previous and next button in a carousel

I am making a portfolio website, with a carousel to showcase my images. 我正在制作一个投资组合网站,上面有一个轮播展示我的图片。 I have successfully coded the carousel to work. 我已经成功编码了轮播工作。 Now, I just have one obstacle: I want the 'Next' and 'Prev' button to show the next and previous image. 现在,我有一个障碍:我想要“下一张”和“上一张”按钮显示下一张和上一张图像。 What kind of javascript code, would I have to put inside of my code, in order for this to work? 为了使其正常工作,我必须在代码中放入哪种javascript代码? This image illustrates what I mean 此图说明了我的意思

Find whatever functions are being called for you normal carousel next and prev buttons and call them from your next and prev images by adding an onclick attribute to them in the html. 查找正常轮播下一个和上一个按钮正在调用的功能,并通过在HTML中向它们添加onclick属性,从下一个和上一个图像中调用它们。

<img inclick="prevImage()" href="image1"
<!-- Main carousel image -->
<img onclick="nextImage()" href="image3">

You could then just swap the hrefs of the images. 然后,您可以只交换图像的hrefs。 Alternatively, you could create an array of images and have a prev, current, and next classes. 另外,您可以创建一个图像数组,并具有上一个,当前和下一个类。 Style those using CSS and still onClick would just be updating the classes. 使用CSS样式并仍然onClick的样式将仅更新类。

Some more detail could better guide a better response. 一些更多的细节可以更好地指导更好的响应。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM