0

我在 Magento 网站上有一个定制的滑块。它具有响应性并具有自定义触摸行为。行为应该如下：

  1. 三个图像滑块，中间的一个应该有不透明度 1.0，其余的只有 0.15
  2. 在较小的分辨率上，仅显示 2 张图像。右边的应该有 1.0 左边的图像应该有 0.15 不透明度
  3. 在移动设备上，显示 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

4

1 回答 1

0

从 site.css 的第 298 行删除以下规则声明似乎​​可以解决问题。

.product-view .product-img-box .more-views ul li:nth-child(2),

当您删除最左边（列表顶部）元素时，Chrome 一定会混淆计算第 n 个子元素。它必须在删除 DOM 元素之前计算第 n 个子元素。

此外，对于活动类，您似乎不需要 nth-child 规则。

于 2013-09-27T22:35:27.110 回答