Question

我有一个响应式图片库，当前在页面上显示缩略图，点击后会放大图像并将其打开为模态。

这段代码的局限性在于，当我打开图像时，我必须按下＆＃39; X＆＃39;按钮，然后返回缩略图以打开另一张图像。

我想要的是，当模态打开时，放大的图像会有一个＆＃39;＆lt;＆＃39;和＆＃39;＆gt;＆＃39;按钮，允许您滚动放大的图像。

任何想法如何做到这一点？

我希望这很清楚，如果没有，那么当你将其视为一个有效的例子here时会更有意义。

感谢您的帮助！

Answer 1

假设此刻正在显示的图像是pic1，并且您还有pic2，pic3，pic4。首先，您需要在包含这些文件位置的javascript中创建一个数组。现在假设该图像的id是“mainpic”。

var a=['pic1','pic2'....'pic4'];
var l=a.length;
var currentpic=0;
function changeright(){
    documnet.getElementById("mainpic").src=++window.currentpic%window.l;
    }
function changeleft(){
    document.getElementById("mainpic").src=abs(--window.currentpic%window.l);
   }

现在对于html部分，你需要叠加这些标志 - ＆LT;＆GT;您可以使用position：absolute和z index：-1来完成。你可以在w3school上找到这些例子。应该是这样的＆LT; AAAAAAA

并在css

enter code here
     #superimpose{
 position:absolute/relative;
 top:100px//or some other value to move the text over the pic or use "left"        and "right"
  }

Answer 2

您可以使用slick，我在工作中使用它并且非常好。

JavaScript - 图片库 - 向左和向右滑动

2 个答案: