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

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

首先将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/

不同的ul元素在水平移动的div

1 个答案: