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 に答える