javascript - 不同的 ul 元素在水平移动的 div 中重叠

Question

我正在制作一个包含连续移动图像的 div 这是代码

<div class="carousel">
<ul id='country'>
    <li><img src="http://placehold.it/60x60&text=IND" alt='country' style=" border-radius: 5px;height:50px;cursor: pointer" onclick="openind()"/></li>
    <li><img src="http://placehold.it/60x60&text=US" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=SA" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=UK" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=GRE" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=PO" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=PAK" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=ARG" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=NZ" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=AUS" alt='country' style=" border-radius: 5px;height:50px"/></li>
</ul>
    <ul id='ind' style=" display: none">
    <li><img src="http://placehold.it/60x60&text=WB" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=JH" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=UP" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=BI" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=UK" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=MH" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=MP" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=KA" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=KL" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=TN" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=AP" alt='country' style=" border-radius: 5px;height:50px"/></li>
    <li><img src="http://placehold.it/60x60&text=AM" alt='country' style=" border-radius: 5px;height:50px"/></li>
</ul>
<div class="left-arrow carrow"></div>
<div class="right-arrow carrow"></div>

在第一个 ul 中，如果我单击图像 IND，那么这些 ul 元素必须消失，并且下一个 ul 元素必须出现。问题是，即使在单击之前，第二个 ul 的图像也开始与第一个 ul 的图像一起出现按钮。当我单击 IND 时，也会发生同样的情况。

这是链接http://jsfiddle.net/adeete/bjyuA/21/

请帮忙。

隐藏第一个ul并显示第二个ul的函数

function openind()
{
  document.getElementById('country').style.display='none';
  document.getElementById('ind').style.display='block';
}

Answer 1

问题是您从两个 ul 中选择了所有 li。您需要进行具体更改。

首先将display: block添加到country ul

<ul id='country' style="display: block">

接下来在 myAnimate 函数中更改您的 ul 选择器，如下所示

var $ul = $carousel.children('ul[style^="display: block"]');

注意:上面的样式选择器的显示方式应与您设置的方式相同。目前，: 和 block 之间有一个空格。所以这一点在任何地方都必须坚持下去。

编辑:此处更新了 fiddle :http://jsfiddle.net/marudhupandiyang/bjyuA/25/