Question

我制作了jQuery幻灯片，因此文本和图像将按照预期的方式循环，但不会重复。如果我让它循环通过JUST图像或文本它将重复，但不是一起。

HTML：

<div id="slideshow">
<div id="slideContain">
    <img src="http://www.codekrewe.com/images/surf.png" height="200px" width="300px" />
    <img src="http://www.codekrewe.com/images/leafriverresources.png"  height="200px"        width="300px" />
    <img src="http://www.codekrewe.com/images/bookReviews.png"  height="200px" width="300px" /> 
    <p class="slideInfo">Surf Shack Yogurt was a fun business to work with. They gave me a shot when I had barely anything to prove my worth, and for that, I thank them. This website help me expand my knowledge about web development/design...</p>
    <p class="slideInfo">I found Leaf River Resource's website to have a unique challenge when developing/designing it. The oil/gas business does not want to disclose all of their info/tricks on a website for all of their competitors to see...</p>
    <p class="slideInfo">This book database site was requested by an english teacher at Castle View High School for his students. This website gave me much needed practice and new knowledge that I can now apply to future projects...</p>
</div>
</div>

CSS：

#slideContain{
position:relative;
width:900px;
height:250px;
margin-left:auto;
margin-right:auto;
}
#slideContain img{
position:absolute;
left:5px;
top:25px;
}
#slideContain p{
width:570px;
height:200px;
position:absolute;
left: 330px;
top:25px;
}
.slideInfo{
color:#333;
text-shadow:0px -1px 1px #CCC;
}

JavaScript的：

$(function() {
$('#slideContain img:gt(0)').hide();
$('#slideContain p:gt(0)').hide();
setInterval(function() {
    $('#slideContain img:first').fadeOut(1000)
    .next('img').fadeIn(1000)
    .end().appendTo('#slideContain');
}, 3000);
setInterval(function() {
    $('#slideContain .slideInfo:first').fadeOut(1000)
    .next('.slideInfo').fadeIn(1000)
    .end().appendTo('#slideContain');
}, 3000);
});

Answer 1

您需要重置第一张图片和slideInfo才能再次显示。 jsFiddle

Answer 2

您可以改用此功能：

$(function() {
        $('#slideContain img:gt(0)').hide();
        $('#slideContain p:gt(0)').hide();
        var index=0;
        var count=$("#slideContain img").length;    
    setInterval(function() {
            $('#slideContain img:eq('+index+')').fadeOut(1000);
            $('#slideContain p:eq('+index+')').fadeOut(1000);
            index++;
            if (index>=count) index=0;
            $('#slideContain img:eq('+index+')').fadeIn(1000);
            $('#slideContain p:eq('+index+')').fadeIn(1000);
    }, 2000);
});

它适用于任意数量的幻灯片，因此您可以添加尽可能多的幻灯片，而无需更改javascript。

演示：http://jsfiddle.net/7Z7KC/

Answer 3

JQuery Cycle是一个很好的jquery插件，用于循环元素，效果很好。

Answer 4

这就是我修复它的方法：

我将图片包装在他们自己的div中，并将文本包装在他们自己的div中。（这也有助于造型！）

http://jsfiddle.net/UNYuR/

HTML：

<div id="slideshow">
<div id="slideContain">
    <div id="picContain">
        <img class="slidePic" src="images/surf.png" height="200px" width="300px" />
        <img class="slidePic" src="images/leafriverresources.png"  height="200px" width="300px" />
        <img class="slidePic" src="images/bookReviews.png"  height="200px" width="300px" />
    </div>
    <div id="textContain">
        <p class="slideInfo">Surf Shack Yogurt was a fun business to work with. They gave me a shot when I had barely anything to prove my worth, and for that, I thank them. This website help me expand my knowledge about web development/design...</p>
        <p class="slideInfo">I found Leaf River Resource's website to have a unique challenge when developing/designing it. The oil/gas business does not want to disclose all of their info/tricks on a website for all of their competitors to see...</p>
        <p class="slideInfo">This book database site was requested by an english teacher at Castle View High School for his students. This website gave me much needed practice and new knowledge that I can now apply to future projects...</p>
    </div>
</div>
</div>

并没有真正改变CSS只是一些造型，但这里是：

#slideshow{
width:100%;
min-width:900px;
background-image:url('../images/slideshow.png');
background-color:#111;
height:250px;
margin-bottom:25px;
}
#slideContain{
width:900px;
height:250px;
margin-left:auto;
margin-right:auto;
}
#textContain{
float:left;
width:570px;
height:200px;
margin-top:25px;
position:relative;
}
#picContain{
float:left;
width:300px;
height:200px;
margin-top:25px;
margin-right:25px;
margin-right:5px;
position:relative;
}
.slideInfo{
position:absolute;
top:0px;
left:0px;
color:#eaecea;
text-shadow:0px -1px 1px #000;
}
.slidePic{
width:300px;
height:200px;
position:absolute;
top:0px;
left:0px;
}

JavaScript的：

$(function() {
$('#picContain img:gt(0)').hide();
$('#textContain p:gt(0)').hide();
setInterval(function() {
    $('#picContain img:first').fadeOut(1000)
    .next('img').fadeIn(1000)
    .end().appendTo('#picContain');
}, 3000);
setInterval(function() {
    $('#textContain p:first').fadeOut(1000)
    .next('p').fadeIn(1000)
    .end().appendTo('#textContain');
}, 3000);
});

jQuery幻灯片不重复

4 个答案: