不同的UI元素

我正在做一个包含连续移动这里图像的DIV是代码不同的UI元素

<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'; 
}

来源

2017-04-03 ani

不知道你想要什么来实现的，但我做了一些更新到你的提琴以实现IND点击图片。 http://jsfiddle.net/depaule/bjyuA/24/ –

我想要的是作为第一个ul是一个移动continuoslly.It包含一个li IND，如果我点击那个然后第二个ul应该替换第一个ul，即第一个ul应该消失，第二个ul的元素应该是移动的那一个 – ani

而且仍然是同样的事情发生。相反，它现在更新后发生更多。我的意思是现在所有的元素都是ul出现两次 – ani

的问题是您选择从两个ul一切都li。您需要进行具体更改。

首先添加display: block到country UL

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

下一页更改ul选择在myAnimate功能这样

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

注：以上你的风格选择应该出现在你设置同样的方式。目前您的空间介于:和block之间。所以这个必须坚持到处。

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

来源

2017-04-03 21:36:43 Panther

非常感谢。由于缺乏声誉，我无法向您提供答案。但非常感谢。 – ani

不同的UI元素

回答

相关问题