Jquery Testmonial：使用兩個項目，但沒有更多

-1

我寫了一個代碼用於訪問者的推薦。當一個或兩個推薦內容位於代碼內時，它可以正常工作，但當該數量增加時，而不是一次顯示一條評論，該腳本將同時顯示兩個推薦內容。有人可以幫我解決這個問題嗎？ Working example fiddle和bad working fiddle的例子。Jquery Testmonial：使用兩個項目，但沒有更多

HTML代碼

<div id="testmonials-wrapper"> 
<div id="testmonials-area"></div> 
<div id="testmonials-text">MY TESTMONIALS</div> 
<div id="testmonials-label"> 
<div id="testmonial-center"> 

<div id="test-rotator"> 
<div class="roter" style="display: none;"> 
<div class="left-quote"></div> 
<div class="center-quote">TEXT 01</div> 
<div class="right-quote"></div> 
<div class="testmonials-name">- Username 01 -</div> 
</div> 
<div class="roter" style="display: block;"> 
<div class="left-quote"></div> 
<div class="center-quote">Text 02.</div> 
<div class="right-quote"></div> 
<div class="testmonials-name">- Username 02 -</div> 
</div> 


</div> 
</div> 
</div> 
</div>

的Javascript

var carouselInt = ''; 
var carouDiv = function(){ 
carouselInt = setInterval(function() { 
    $("#test-rotator > .roter:first") 
    .fadeIn(500) 
    .next() 
    .fadeOut(0) 
    .end() 
    .appendTo("#test-rotator"); 
},2000); 

}; 
$(carouDiv());//Initialise the carousel function 

$("#test-rotator").hover(function(){ //Stop the carousel on hover 
clearInterval(carouselInt); 
    },function(){ 
    carouDiv(); 
});

CSS：

body { 
    background-color: #251a17; 
    margin: 0px; 
    padding: 0px; 
    background-image: url('../snippets/neb01.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
} 
#testmonials-wrapper { 
    height: 150px; 
    width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
    color: #fff; 
    text-align: center; 
} 
#testmonials-wrapper-pinturas { 
    height: 10px; 
} 
.left-quote { 
    width: 39px; 
    height: 67px; 
    float: left; 
    background-image: url(../snippets/left-quote.png); 
    background-repeat: no-repeat; 
} 
.testmonials-name { 

    text-align: center; 
    color: #fff; 
    font-size: 12px; 
} 
#brown-divider { 
    height: 61px; 
    background-color: #251a17; 
    padding-top: 12px; 
    color: #FFFFFF; 
    background-image: url(../snippets/testmonial-shadow.jpg); 
    background-repeat: no-repeat; 
} 

#testminials-write { 
    width: 243px; 
    height: 52px; 
    margin-left: auto; 
    margin-right: auto; 
    background-image: url(../snippets/testmonials-button.jpg); 
    background-repeat: no-repeat; 
} 
.right-quote { 
    width: 39px; 
    height: 67px; 
    float: left; 
    background-image: url(../snippets/right-quote.png); 
    background-repeat: no-repeat; 
    clear: right; 
} 
#testminials-write #envienos { 
    display: block; 
    text-align: center; 
    line-height: 42px; 
    font-size: 12px; 

} 
.roter { 
    display: none; 
} 
#testmonials-text { 
    height: 50px; 
}

來源

2017-08-11 V.Salles

有什麼問題嗎？我們不是免費的調試服務。請閱讀[幫助] – Liam

我相信'$（「＃test-rotator> .roter：first」）'是你選擇的第一個類型的罪魁禍首。 –

謝謝你的幫助@RajeevRanjan。我能夠通過更改CSS的一部分來解決問題。 –

爲了解決這個問題，簡單的這段代碼添加到CSS表：

#test-rotator { 
    overflow: hidden; 
    height: 35px; 
}

而且爲javascript代碼，更改：

.fadeOut(0)

到：

.fadeOut(500)

小提琴例如here

來源

2017-08-11 14:11:39

Jquery Testmonial：使用兩個項目，但沒有更多

回答

相關問題