jQuery幻燈片不重複

Question

我做了我的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); 
}); 

Answer 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/

Answer 2

您需要重置第一個圖像，並將slideInfo重新顯示。 jsFiddle

Answer 3

JQuery Cycle是一個不錯的jQuery插件，用於騎自行車元素與美麗的效果。

Answer 4

這是我如何固定它：

我包裹的圖像在自己的股利和在自己的格中的文本。 （這也有助於造型！）

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