1

我已经制作了我的 jQuery 幻灯片，因此文本和图像将按照它们应该的方式循环，但是，它不会重复。如果我让它循环遍历图像或文本，它将重复，但不会一起重复。

http://jsfiddle.net/ncafV/3/

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);
});

​</p>

4

4 回答 4

2

您需要重置第一个图像和 slideInfo 以再次可见。jsFiddle

于 2012-08-29T03:10:38.447 回答
1

您可以改用此功能：

$(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/

于 2012-08-29T03:29:21.847 回答
0

JQuery Cycle是一个不错的 jquery 插件，用于具有漂亮效果的循环元素。

于 2012-08-29T03:14:17.463 回答
0

这就是我修复它的方法：

我将图像包装在他们自己的 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);
});
于 2012-08-29T03:25:37.350 回答