使用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>