我们有一个滑块,我们想使用它。死简单的东西。但我需要它变得更有活力。
我们有一个博客卷,它在 php 循环上运行和显示,基本上.. 如果我们将循环设置为 6.. 它会生成 6 组 div。
现在我的想法是,将显示博客文章的 DIV 放在一个滑块中,然后我们可以在每个 div 刷新时显示后续文章.. 有点事情.. 我相信你知道我的意思。
我做了一个简单的小提琴...... http://jsfiddle.net/ozzy/yEB4V/
本质上,我们只需要一个<li> to </li>
原因是,我们可以在 LI 标记周围使用我们的 php,以便循环正常工作,并且幻灯片会相应地更新..
我遇到的问题是,第一次触发 LI 时,它必须没有 display:none,原因很明显.. LI 标签的所有其他后续出现都被隐藏了。
正如您从小提琴中看到的那样,除了第一个 LI 标签外,所有的 LI 标签都没有显示,所以它首先显示,然后循环到下一个,每个标签都被更新。
脚本在这里;
var slider = function() {
$('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
if($(this).next('li.slide').size()){
$(this).next().fadeIn(2000);
}
else{
$('#testimonials .slide').eq(0).fadeIn(1000);
}
});
};
var interval = setInterval(slider, 2000);
$('#testimonials .slide').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(slider, 2000);
});
我想知道是否有人知道如何解决这个问题......因为我们的 php 代码将类似于:
<ul id="testimonials">
<!-- OUR PHP LOOP-->
<li class="slide">
<div>
<h1><?php echo $title; ?></h1>
<p><?php echo $stuff; ?>
</div>
</li>
<!-- // PHP LOOP -->
</ul>