顯示和隱藏LI項目

我創建幻燈片（CodePen Example）：顯示和隱藏LI項目

<div class="slide"> 
    <ul class="data"> 
    <li id="C1" class="active"> 
    <img src="http://placehold.it/840x200"> 
    </li> 
    <li id="C2"> 
     <img src="http://placehold.it/800x200"> 
    </li> 
    </ul> 
    <ul class="pipe"> 
    <li><a href="#C1" class="active"></a></li> 
    <li><a href="#C2"></a></li> 
    </ul> 
</div>

然後，我有以下的JQuery：

function swap(name) { 
    $('.slide .data .active').hide().removeClass('active'); 
    $('.slide .data [id = ' + name + ']').addClass('active').fadeIn("slow"); 
} 
$(function() { 
    $('.slide .data li:not(".active")').hide(); 
    $('.slide .pipe a').on("click", function() { 
    swap($(this).attr('href').replace(/^.*?(#|$)/, '')); 
    return (false); 
    }); 
});

目前，我有2個問題：

當我點擊活動圈當前幻燈片閃爍。
即使幻燈片確實存在，活動圓也不會改變。

最後，我的JQuery代碼可以改進嗎？

謝謝你，米格爾

來源

2014-04-16 Miguel Moura

我修改了幾個不同的東西來實現我的想法，你所追求的;這是您的CodePen example的更新版本。

一些主要的變化：

中沒有任何代碼到目標或改變活動圈，也沒有辦法輕易區分不同的圈子。我加入class="C1"和class="C2"到相應的列表項，我在與線的交換功能針對性他們：

$('.slide .pipe a').removeClass('active'); 
$('.slide .pipe .' + name + ' a').addClass('active');

我在衰落時，定位新項目在舊項目的頂部實現淡化效果通過組合position:absolute,z-index，並添加/刪除active類。

來源

2014-04-16 21:59:49 Kylok

真的需要添加C1和C2類嗎？ HREF的部分是LI的ID ......在你的例子中，似乎有一個淡出，而另一個淡入......我想隱藏活動的一個，並在其後淡入另一個。你看我的例子中，轉換速度更快，幻燈片沒有重疊。 –

最後，這可以在插件中進行轉換嗎？ HTML結構將永遠是這樣的...... –

在我的示例中，新幻燈片在舊幻燈片的頂部淡入淡出 - 舊幻燈片沒有淡出，所以過渡速度相同。但是你可以做到這一點;這是一個更新的[CodePen]（http://codepen.io/anon/pen/rDnAa/）。這些類不是必需的，你可以通過他們的'href'屬性來定位這些圈子（就像在新的CodePen I鏈接中一樣），但是最好使用類或ID來定位元素。是的，我敢肯定這可以做成一個jQuery插件。 – Kylok

顯示和隱藏LI項目

回答

相關問題