不能使用jQuery移動我的形象的權利（圖像滑塊）

Question

圖像滑塊問題 其實我在jquery.My目的初學者是創建一個光輝的形象slider.I已經使用jQuery從很多創建圖像滑塊教程。

代碼部分 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; 
 
\t width:100%; 
 
\t 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 img { 
    transition: left 1s; 
} 

這使得從左至右流動。
左側只能與位置一起使用，並且也會設置。

.slider img { 
    position: absolute; 
} 

的動畫時，當我們在jQuery中設置的CSS PROPERT：

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