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内容滑块脚本帮助

回答

相关问题