jQuery而不是向左移动.它会褪色.滑块

jQuery instead of moving left. it fades. Slider

本文关键字：褪色 滑块 移动 左移 jQuery      更新时间：2023-09-26

我正在做一个简单的滑块，但有一件事我想不通。我希望它逐渐淡出，而不是向左移动。

我想我错过了什么。

谢谢你抽出时间。下面的代码如果你能帮我，请告诉我。

       jQuery(document).ready(function ($) {
  $(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;
    $('#slider').css({ width: slideWidth, height: slideHeight });
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
    $('#slider ul li:last-child').prependTo('#slider ul');
    function moveLeft() {
        $('#slider ul').animate({
            fadeto: + slideWidth
        }, 500, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };
    function moveRight() {
        $('#slider ul').animate({
            fadeTo: - slideWidth
        }, 500, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };
    $('a.control_prev').click(function () {
        moveLeft();
    });
    $('a.control_next').click(function () {
        moveRight();
    });
});

在整个函数中，您不需要找到宽度、高度，也不需要向左或向右滑动，因为如果您移动带边距的div，它只会产生滑动效果。您可以只.fadeOut()当前div和.fadeIn()下一个div。

以下是针对具有渐变效果的moveRight()和moveLeft()函数的简短而正确的jquery

function moveRight(){
    $('#slider ul li.active').fadeOut();
    $('#slider ul li.active').next().addClass('active').fadeIn();
    $('#slider ul li.active').eq(0).removeClass('active');
  }
  function moveLeft(){
    $('#slider ul li.active').fadeOut();
    $('#slider ul li.active').prev().addClass('active').fadeIn();
    $('#slider ul li.active').eq(1).removeClass('active');
  }

示例：https://jsfiddle.net/m7rfdfoa/1/

moveLeft函数中的"fadeto"不应该是"fadeto"吗？

相关文章：