不同的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>

如果我点击图像IND，那么在第一个ul中，这些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 to country ul

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

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

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

注意：上面的样式选择器应该与设置它的方式相同。 目前你在:和block之间有一个空格。 所以这必须坚持到处都是。

编辑：更新小提琴： http ： //jsfiddle.net/marudhupandiyang/bjyuA/25/