我在 Magento 网站上有一个定制的滑块。它具有响应性并具有自定义触摸行为。行为应该如下：
- 三个图像滑块，中间的一个应该有不透明度 1.0，其余的只有 0.15
- 在较小的分辨率上，仅显示 2 张图像。右边的应该有 1.0 左边的图像应该有 0.15 不透明度
- 在移动设备上，显示 1 张图片。当前显示的图像应具有 1.0 的不透明度。
我使它与 CSS/jQuery 混合工作。
HTML
<ul class="more-views">
<li><a href="someURL"><img src=..... /></li>
<li class="active"><a href="someURL"><img src=..... /></li>
<li><a href="someURL"><img src=..... /></li>
<li><a href="someURL"><img src=..... /></li>
<li><a href="someURL"><img src=..... /></li>
</ul>
CSS .more-views ul li { 不透明度：.15; } .more-views ul li.active { 不透明度：1.0; }
JAVASCRIPT 很长，您可能想要检查元素。但想法如下。当您单击 NEXT 箭头时，列表的第一个元素被克隆，附加到 的后面并从第一个位置销毁。稍后活动类被删除并添加到<li>列表中的第二个。像这样的东西
<ul>
<li class="elem1"></li>
<li class="elem2 active"></li>
<li class="elem3"></li>
<li class="elem4"></li>
</ul>
步骤1
<ul>
<li class="elem1"></li>
<li class="elem2 active"></li>
<li class="elem3"></li>
<li class="elem4"></li>
<li class="elem1"></li>
</ul>
第2步
<ul>
<li class="elem2 active"></li>
<li class="elem3"></li>
<li class="elem4"></li>
<li class="elem1"></li>
</ul>
第 3 步
<ul>
<li class="elem2"></li>
<li class="elem3 active"></li>
<li class="elem4"></li>
<li class="elem1"></li>
</ul>
当前的小问题如下： 1. 如果单击右箭头（下一个箭头）一次，列表中的第一个元素将不透明度保持为 1.0（仅在 Chrome 上）。2. 如果您检查该元素，它的不透明度为 0.15 3. 如果您调整浏览器的大小，您会看到不透明度再次设置为 0.15 4. 如果您在 Firebug 中启用/禁用不透明度，它的工作方式就像它一样应该。5. 如果您在下一个箭头上单击 2 次，不透明度错误就会消失。
您可以在此处查看实时示例：http: //www.mackage.com/ca/en/jeffrey-black-leather-jacket