jQuery內容滑塊腳本幫助

我在我的網站上有一個<div>其中包含子<div>的。我想讓這些孩子像內容滑塊一樣滑入。我已經嘗試了幾個不同的插件，但都失敗了，因爲他們試圖做某種DOM操作，使事情變得糟糕......jQuery內容滑塊腳本幫助

我自己的實現很差，似乎存在主要的性能問題。

所以，我想知道是否有人知道一個不錯的內容滑塊，不會搞砸事情，而且希望有一個好的文檔。不要推薦bxSlider或easySlider，嘗試它們並且失敗，特別是bxSlider。

這裏的元素是如何結構：

<div class="Parent"> 
    <div> 
     <h2>...</h2> 
     <ul> 
      <li>...</li> 
     </ul> 
     <p>...</p> 
    </div> 
    (Repeat) 
</div>

提前感謝！

編輯

我重建我的執行和它的工作幾乎是我想要的方式。問題是，當它到達列表的末尾時，它會非常快速地向後滑動通過所有項目，然後重新開始。不確定如何解決它。將不勝感激任何建議！

var interval; 

var Slider = function() { 
    var width = $(".Parent").width(); 
    var count = $(".Children").size(); 
    var margin = width; 
    var wrapper = $(".Wrapper"); 
    var a = 0; 

    wrapper.css({ 
     width: (width * count) 
    }); 

    var interval = window.setInterval(function() { 
     if (margin == (width * count)) { 
      margin = 0; 
      a = 0; 
     } else { 
      margin = (width * a); 
     }; 

     wrapper.animate({ 
      marginLeft: ("-" + margin + "px") 
     }, 1000); 

     a++; 
    }, 6000); 
};

來源

2010-02-26 Gup3rSuR4c

試着看一下[流量滑塊（http://www.flowslider.com）。 – 2012-02-05 23:24:18

這一個適合我。也許它會幫助你：

<script type="text/javascript"> 
var headline_count; 
var headline_interval; 
var old_headline = 0; 
var current_headline = 0; 

headline_count = $("div.headline").size(); 

$("div.headline:eq("+current_headline+")").css('top','5px'); 

headline_interval = setInterval(headline_rotate,7000); //time in milliseconds 
$('#scrollup').hover(function() { 
     clearInterval(headline_interval); 
    }, function() { 
     headline_interval = setInterval(headline_rotate,7000); //time in milliseconds 
     headline_rotate(); 
    }); 

function headline_rotate() { 
    current_headline = (old_headline + 1) % headline_count; 
    $("div.headline:eq(" + old_headline + ")").animate({top: -205},"slow", function() { 
     $(this).css('top','210px'); 
    }); 
    $("div.headline:eq(" + current_headline + ")").show().animate({top: 5},"slow"); 
    old_headline = current_headline; 
} 
</script>

// HTML

<div id='scrollBox'> 
<div id='scrollup'> 
    <div class="headline">...</div> 
    <div class="headline">...</div> 
    <div class="headline">...</div> 
</div> 
</div>

來源

2010-02-26 01:00:50 Sinan

忘了放在$（document）.ready（） – Sinan 2010-02-26 01:01:49

給你點，因爲你是唯一一個嘗試和幫助我的人。 – Gup3rSuR4c 2010-03-01 21:17:05

我有同樣的問題。我已經使用這個解決：（這是我的一塊滑板插件）應用內jquery(select_expression).each()

function start() 
{ 

var a=$('div:first',$this); 

a.clone().appendTo($this); 

$(a).animate({'marginLeft':options.width*-1},options.speed,function(){$(a).remove();}); 

setTimeout(function() {start();}, delay); 

}

來源

2010-07-19 11:51:13 Cardy

jQuery內容滑塊腳本幫助

回答

相關問題