使用Jquery，javascript和CSS自動播放圖像滑塊

Question

我已經使用jQuery和javascript創建了此滑塊，但是我無法通過outout和下一個上一個按鈕來實現此功能。 如標題所述，我需要此滑塊來顯示圖像，您能幫我左右動畫嗎？

$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();    
$('.active').show();

$('.active').removeClass('active').addClass('oldActive');    
        if ( $('.oldActive').is(':last-child')) 
        {
            $('.sp').first().addClass('active');
        }
        else
        {
            $('.oldActive').next().addClass('active');
        }
    $('.oldActive').removeClass('oldActive');
    setTimeout('.active', 1000);
    $('.sp').fadeOut();
    $('.active').fadeIn();

該代碼的另一部分在jsfiddle鏈接中，這是代碼https://jsfiddle.net/ghy14p0f/1/

Answer 1

制作幻燈片的最簡單方法是包括jquery-ui模塊，以實現效果和緩和。 我在下面添加了它，並創建了轉換。 另外，在您的小提琴中，您實際上從未告訴過它使用jquery －是的，它永遠都行不通。 我實際上並沒有太大的改變，我編輯的唯一行是淡入淡出/淡入淡出以使其過渡。 祝你好運！

 $(document).ready(function() { $('.sp').first().addClass('active'); $('.sp').hide(); $('.active').show(); $('#button-next').click(function() { $('.active') .removeClass('active') .addClass('oldActive'); if ($('.oldActive').is(':last-child')) { $('.sp').first().addClass('active'); } else { $('.oldActive').next().addClass('active'); } $('.oldActive').hide("slide", { direction: "right" }, 600).removeClass('oldActive'); $('.active').delay(400).show("slide", { direction: "left" }, 600); }); $('#button-previous').click(function() { $('.active').removeClass('active').addClass('oldActive'); if ($('.oldActive').is(':first-child')) { $('.sp').last().addClass('active'); } else { $('.oldActive').prev().addClass('active'); } $('.oldActive').hide("slide", { direction: "left" }, 600).removeClass('oldActive'); $('.active').delay(400).show("slide", { direction: "right" }, 600); }); }); 

 #slider-wrapper { width: 500px; height: 200px; } #slider { width: 500px; height: 200px; position: relative; } .sp { width: 500px; height: 200px; position: absolute; } img { height: 200px; } #nav { margin-top: 20px; width: 100%; } #button-previous { border: 1px dotted blue; background-color: #ccc; float: left; } #button-next { border: 1px dotted blue; background-color: #ccc; float: right; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <div id="slider-wrapper"> <div id="slider"> <div class="sp"> <img src="https://upload.wikimedia.org/wikipedia/commons/3/32/Bianco_e_Rosso_(Croce)_e_Rosso.png"> First Image </div> <div class="sp"> <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/600px_Rosso_e_Giallo.PNG"> Second Image </div> <div class="sp"> <img src="https://upload.wikimedia.org/wikipedia/en/4/4c/Flag_of_Sweden.svg"> Third Image </div> </div> </div> <div id="nav"></div> <div id="button-previous">prev</div> <div id="button-next">next</div>