Question

我正在研究一个简单的滑块，但我无法弄清楚一件事。我希望它淡入淡出而不是向左移动。

我想我错过了一些东西。

感谢您的时间。如果你能帮助我告诉我，那么代码如下。

       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();
    });

});

Answer 1

不应该＆＃34; fadeto＆＃34; be＆＃34; fadeTo＆＃34;在moveLeft函数？

Answer 2

在整个功能中，你不需要找到宽度，高度，也不需要向左或向右滑动，因为如果你移动一个带有边距的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/

jQuery而不是向左移动。它消失了。滑块

2 个答案: