使用jQuery，javascript和css自動播放圖像滑塊

Question

我已經使用jQuery和javascript創建了這個滑塊，但是我無法使用outplay和next-previous按鈕使其工作。 我需要這個滑塊圖像標題說，你可以幫助我左/右側動畫？

$(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>