[英]How to add prev and next button in a JQuery slideshow code
我下面有幻燈片的jQuery代碼。 在我現在正在處理的項目中,它運行完美。 不過,如果可能的話,我想在同一代碼中實現上一個和下一個按鈕。 任何幫助將非常感激。
<script type="text/javascript">
function() {
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide",{direction:"left"},500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
$(".slider #"+count).show("slide",{direction:"right"},500);
$(".slider #"+count).delay(5500).hide("slide",{direction:"left"},500);
if(count == sc){
count = 1;
}
else
{
count=count+1;
}
},6500);
}
</script>
<div class="slider">
<img id="1" src="images/slider/slide1.jpg" border="0" alt="primeira" />
<img id="2" src="images/slider/slide2.jpg" border="0" alt="segunda" />
<img id="3" src="images/slider/slide3.jpg" border="0" alt="terceira" />
</div>
<style>
.slider {
width: 800px;
height: 349px;
overflow:hidden;
margin: 30px auto;
background-image: url(images/slider/load.GIF);
background-repeat: no-repeat;
background-position: center;
}
.slider img {
width: 800px;
height: 349px;
display: none;
}
</stile>
您可以執行以下操作:
var sc;
var count = 1;
$(document).ready(function() {
sc = $(".slider img").size();
$(".slider #1").show("fade",500);
setInterval(function(){
switchPanel(1);
},5500);
$("#prev").click(function(){switchPanel(-1)});
$("#next").click(function(){switchPanel(1)});
});
function switchPanel(direction)
{
var hide, show;
if (direction == 1)
{
show = "right";
hide = "left";
}
else if (direction == -1)
{
show = "left";
hide = "right";
}
$(".slider #"+count).hide("slide",{direction:hide},500);
count = count + direction;
if(count == sc + 1) count = 1;
else if(count == 0) count = sc;
$(".slider #"+count).show("slide",{direction:show},500);
}
剩下的就是添加上一個( #prev
)和下一個( #next
)按鈕。
這應該是可行的。
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide",{direction:"left"},500);
var sc = $(".slider img").size();
var count = 2;
var hideImage;
var slideshow;
var slideImage = function(isNext) {
var showDirection;
if (isNext){
showDirection = "right";
} else {
showDirection = "left";
}
$(".slider #"+count).show("slide",{direction:showDirection},500);
hideImage = setTimeout(function(){
$(".slider #"+count).hide("slide",{direction:"left"},500);
count = (count+1) > sc ? 1 : count+1;
}, 5500);
}
// Start the slideshow
slideshow = setInterval(function(){
slideImage(true);
},6500);
var manualSlide = function(isNext) {
// Stop the slideshow
clearTimeout(hideImage);
clearInterval(slideshow);
// Force hide current image
var hideDirection = isNext ? "left" : "right";
$(".slider #"+count).hide("slide",{direction:hideDirection},500);
if(isNext) {
count = (count+1) > sc ? 1 : count+1;
} else {
count = (count-1) == 0 ? sc : count-1;
}
setTimeout(function(){
slideImage(isNext);
// Start the slideshow again
slideshow = setInterval(function(){
slideImage(true);
},6500);
}, 1000);
}
$("#prev").on("click", function() { manualSlide(false); });
$("#next").on("click", function() { manualSlide(true); });
結果是: FIDDLE
注意:我必須將delay
更改為setTimeout
因為我們無法取消delay
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.