无法使用jquery(图像滑块）将图像向右移动

Cant Move my image to the right using jquery(Image Slider)

本文关键字：图像 右移 移动 jquery      更新时间：2023-09-26

图像滑块问题实际上，我是jquery的初学者。我的目标是创建一个出色的图像滑块。我已经从很多教程中使用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;
	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>

问题是，当我点击下一个上一个按钮（从屏幕截图）时，第一个图像将向右移动，第二个是加载。i电流不会发生，请帮忙。

因此，这里有一个您可以做什么的示例。
我简化了你的html。Jquery滑块不需要那么多类
我所做的只是：

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

.slider img {
    transition: left 1s;
}

这使得它从左向右流动
Left只能与位置一起使用，也可以设置。

.slider img {
     position: absolute;
}

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

$active.css('left', 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>

相关文章：