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

我正在制作一个包含连续移动图像的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

s中选择所有

li

。您需要进行特定的更改

首先将

display:block

添加到

country

ul

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

注意：上面的样式选择器的显示方式应与设置的方式相同。当前在

：

和

块之间有一个空格。因此，必须在所有地方坚持这一点

编辑：这里更新了Fiddle:
问题是您正在从两个
ul
s中选择所有
li
。您需要进行特定的更改

首先将
display:block
添加到
country
ul

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

注意：上面的样式选择器的显示方式应与设置的方式相同。当前在
：
和
块之间有一个空格。因此，必须在所有地方坚持这一点

编辑：这里更新了Fiddle:
不确定您到底想要实现什么，但我对您的Fiddle进行了一些更新，以实现IND图像单击。我正在尝试的是，第一个ul是一个不断移动的ul。它包含一个li IND，如果我点击它，那么第二个ul应该取代第一个ul，也就是说，第一个ul应该消失，而第二个ul的元素应该是移动的，并且仍然在发生相同的事情。相反，在你更新它之后，它现在发生得更多。我的意思是，现在两个ul的所有元素都出现了两次单击按钮？？我不确定你到底想达到什么目的，但我对你的小提琴做了一些更新，以影响IND图像点击。我正在尝试的是，第一个ul是一个不断移动的ul。它包含一个li IND，如果我点击它，那么第二个ul应该取代第一个ul，也就是说，第一个ul应该消失，而第二个ul的元素应该是移动的，并且仍然在发生相同的事情。相反，在你更新它之后，它现在发生得更多。我的意思是，现在两个ul的所有元素都出现了两次单击按钮？？什么按钮我…非常感谢。我不能因为缺乏声誉而对你的答案进行投票。但是非常感谢。非常感谢。我不能因为缺乏声誉而对你的答案进行投票。但是非常感谢。
var $ul = $carousel.children('ul[style^="display: block"]');