將上一個，下一個，播放和暫停按鈕添加到jQuery幻燈片

我幾乎沒有使這個代碼工作。只剩下一件事。將上一個，下一個，播放和暫停按鈕添加到jQuery幻燈片

我想添加上一個，下一個，播放和暫停按鈕到我現有的幻燈片，如in this page。

我做了look at this，但是很混亂和複雜。

請幫我修改下面的代碼嗎？

感謝

<html> 
<style> 
*   { margin: 0px; padding: 0px; } 
#cover  { width: 100%; height: 300px; background: #CCCCCC; } 
#cover div { width: 100%; height: 200px; display: none; background: #FFFFFF; } 
.content { text-align: center; } 
</style> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() 
     { 
      var div_array = []; 
      var i   = 0; 

      $('#cover div').each(function() 
      { 
       //alert($(this).attr('id')); 
       div_array.push('#' + $(this).attr('id')); 

      }); 

      $(function(){ 
       (function nextImage() 
       { 
        $(div_array[i++] || div_array[i = 0, i++]).hide().delay(500).fadeIn(1000).delay(1000).fadeOut(500, nextImage); 
       })(); 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <div id="cover"> 
     <div id="slider_1"><p class="content">SLIDER ONE</p></div> 
     <div id="slider_2"><p class="content">SLIDER TWO</p></div> 
     <div id="slider_3"><p class="content">SLIDER THREE</p></div> 
    </div> 
</body>

來源

2012-08-03 BentCoder

我試圖通過以下網址爲您創造一個樣品演示。

HTML

<div id='items'> 
    <div class='item first'>Item 1</div> 
    <div class='item'>Item 2</div> 
    <div class='item'>Item 3</div> 
    <div class='item'>Item 4</div> 
    <div class='item'>Item 5</div> 
</div> 
<ul id='controls'> 
    <li id='prev'>Prev</li> 
    <li id='play'>Play</li> 
    <li id='pause'>Pause</li> 
    <li id='next'>Next</li> 
</ul>

CSS

#items { 
    position : relative; 
    width : 400px; 
    height : 200px; 
    top : 20px; 
    left : 20px; 
} 
.item { 
    position : absolute; 
    background-color : #eee; 
    border : 1px solid #ccc; 
    width : 398px; 
    height : 198px; 
    display :none; 
    text-align : center; 
    font-size : 72px; 
} 
.first{ 
    display : block; 
} 
#controls { 
    margin-top : 30px; 
} 
li { 
    display : inline-block; 
    padding : 5px; 
    border : 1px solid #ccc; 
    background-color : #eee; 
    cursor : pointer; 
} 
#play { 
    display : none; 
}

的JavaScript

//To store timeout id 
var timeoutId; 

var slideImage = function(step) { 

    if (step == undefined) step = 1; 

    //Clear timeout if any 
    clearTimeout (timeoutId); 

    //Get current image's index 
    var indx = $('.item:visible').index('.item'); 

    //If step == 0, we don't need to do any fadein our fadeout 
    if (step != 0) { 
     //Fadeout this item 
     $('.item:visible').fadeOut(); 
    } 

    //Increment for next item 
    indx = indx + step ; 

    //Check bounds for next item 
    if (indx >= $('.item').length) { 
     indx = 0; 
    } else if (indx < 0) { 
     indx = $('.item').length - 1; 
    } 

    //If step == 0, we don't need to do any fadein our fadeout 
    if (step != 0) { 
     //Fadein next item 
     $('.item:eq(' + indx + ')').fadeIn(); 
    } 

    //Set Itmeout 
    timeoutId = setTimeout (slideImage, 5000); 
}; 

//Start sliding 
slideImage(0); 

//When clicked on prev 
$('#prev').click(function() { 

    //slideImage with step = -1 
    slideImage (-1); 
}); 

//When clicked on next 
$('#next').click(function() { 

    //slideImage with step = 1 
    slideImage (1); 
}); 

//When clicked on Pause 
$('#pause').click(function() { 

    //Clear timeout 
    clearTimeout (timeoutId);  

    //Hide Pause and show Play 
    $(this).hide(); 
    $('#play').show(); 
}); 

//When clicked on Play 
$('#play').click(function() { 

    //Start slide image 
    slideImage(0); 

    //Hide Play and show Pause 
    $(this).hide(); 
    $('#pause').show();  
});

請檢查並讓我知道你是否需要任何修改。

來源

2012-08-03 17:16:21

完美。你甚至添加了評論！非常感謝你。 – BentCoder 2012-08-04 09:47:47

保存我的一天！謝謝。 – Si8 2016-01-29 15:00:09

首先使用bxslider插件嘗試過，它不能適應每60秒更新一次ajax數據，這會導致css響應性的變化。您的代碼完全符合我的要求，我可以在幻燈片之間設置自定義時間，並使用帶有$（'。wrapper'）的ajax更新數據。 $（ '包裝'）追加（newData）;' – Vijayaraghavan 2017-11-08 15:03:25

將上一個，下一個，播放和暫停按鈕添加到jQuery幻燈片

回答

相關問題