javascript - 无法使用 jquery(Image Slider) 将我的图像向右移动

Question

图像 slider 问题 实际上我是 jquery 的初学者。我的目标是创建一个出色的图像 slider 。我已经使用很多教程中的 jquery 创建了图像 slider 。

代码部分slider.js

$(document).ready(function(){
        $(".slider li:first-child").addClass("active");
        setTimeout(autoAddClass, 5000);
        
       
         $('.next').click(function() {
                nextslide();    
        });
         
         
        $('.previous').click(function() {
                
        previousslide();
        
        });
        
                
});

 
 function nextslide()
 {
           
    
     $('.slider li:first-child').hide('slide', {direction: 'left'}, 1000);
        
     //$('.slider li:first-child').fadeOut().next().fadeIn().end().appendTo('.slider');    
 }
 
 function previousslide(){
        $('.slider li:first-child').fadeOut();
        $('.slider li:last-child').prependTo('.slider').fadeOut();
        $('.slider li:first-child').fadeIn();
        setTimeout(autoAddClass, 5000);
 }
 
 
function autoAddClass(){
    var next = $(".active").removeClass("active").next();
    if(next.length)
        $(next).addClass('active');
    else
        $('.slider li:first-child').addClass('active');
    setTimeout(autoAddClass, 5000);
}

*{
    margin: 0;
    padding: 0;
}

.full_width{
    /*display: inline-block;*/
    display: block;
    width: 100%;
}
.full_width.language_header{
    height: 50px;
    background-color:#000;
    /*margin-bottom: -5px;*/
}

.full_width.slider_header{
    height: 600px;
    background-color:#fff;
    /*margin-bottom: -5px;*/
    overflow: hidden;
}

.main_content{
    /*display: inline-block;*/
        display: block;
	width:100%;
	float:left;
}

.wrapper{
    margin: 0 auto;
    max-width: 1125px;
    width: 100%;
}

.main_slider{
    width: 100%;
    float: left;
}


.active{
    display: block;
}

ul{
    list-style: none;
}
li{
    display: block;
    display: none;
}

.previous{
    color: #000;
}

.next{
     color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="full_width slider_header">
  <div class="wrapper">
    <div class="main_content">
        
      <div class="main_slider">
        <a href="javascript:;" class="previous"> Previous </a>
        <a href="#" class="next">Next </a>
    <ul class="slider">
   <li><img height="100%" width="100%" alt="#Welcome" src="img/pic1.jpg"></li>
   <li><img height="100%" width="100%" alt="#Welcome" src="img/pic3.jpg"></li>
    <li><img height="100%" width="100%" alt="#Welcome" src="img/pic2.jpg"></li>
     <li><img height="100%" width="100%" alt="#Welcome" src="img/pic4.jpg"></li>
      <li><img height="100%" width="100%" alt="#Welcome" src="img/pic5.jpg"></li>
    </ul>
    </div>

问题是当我单击下一个上一个按钮(从屏幕截图中)时，第一个图像将移动到右侧，第二个图像正在加载。我目前没有发生，请帮忙。

Answer 1

下面是您可以执行的操作的示例。
我简化了你的 html。一个 Jquery slider 不需要那么多类。
我所做的就是这样:

这就是所有魔法发生的地方:

.slider img {
    transition: left 1s;
}

这使得它从左向右流动。
Left 只能与 position 一起使用，并且也被设置。

.slider img {
     position: absolute;
}

当我们在 Jquery 中设置 css 属性时会发生动画:

$active.css('left', wid);

不要对 wid 感到困惑，它只是一个测量值:var wid = $active.width();

现在有了上一个按钮!

上次编辑:它现在是一个带有标题的可滑动 div，您可以根据需要编辑悬停的 div。

$(".slider .slide:first-child").addClass("active");
//setInterval(nextslide, 5000);


$('.next').click(function () {
    nextslide();
});

$('.previous').click(function () {
    previousslide();
});

function nextslide() {
    var $active = $('.slider .active');
    var wid = $active.width();
    $active.css('left', wid);
    var $next;
    if ($active.next().length != 0) 
        $next = $active.next();
    else 
        $next = $('.slider .slide').first()
    $next.addClass("next")
    setTimeout(function () {
        $next.addClass('active');
        $next.removeClass("next");
        $active.removeClass('active');
        $active.css('left', 0);
    }, 1000);
}

function previousslide() {
    var $active = $('.slider .active');
    var $previous;
    if ($active.prev().length != 0) {
        $previous = $active.prev();
    } else 
        $previous = $('.slider .slide').last();
    
    var wid = $previous.width();
    $previous.css('left', wid);
    setTimeout(function () {
        $active.removeClass("active");
        $active.addClass("previous");
        $previous.addClass('active');
        $previous.css('left', 0);
    }, 1000);
    setTimeout(function () {
        $active.removeClass("previous");
    }, 2000);
}

* {
    margin: 0;
    padding: 0;
}
.slider .slide {
    transition: left 1s;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    background-color: white;
}
.slide img {
  max-width: 100%;
}
.slider .next {
    z-index: 98;
}
.slider .previous {
    z-index: 98;
}
.slider .active {
    z-index: 99;
}
.slider {
    position: relative;
    height: 400px;
    width: 400px;
    overflow: hidden;
    border: solid black 2px;
    border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
    <div class="btn-group">
      <button class="previous">previus</button>
        <button class="next">Next</button>
    </div>
    <div class="slider">
      <div class="slide">
        <h4>Now with text and kittens!</h4>
        <img src="https://www.math.ku.edu/~wsanders/Kittens/new%20kittens/Cute-little-kittens-550x365.jpg" />
      </div>
      <div class="slide">
        <h4>I hope this helps you out</h4>
        <img src="http://maxcdn.thedesigninspiration.com/wp-content/uploads/2012/08/Cuddling-Kittens-002.jpg" />
        </div>
      <div class="slide">
        <h4>Its not so hard to modify the code. You should really try it yourself.</h4>
        <img src="https://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg" />
        </div>
    </div>
</main>