Jquery 根据翻转的简单图像旋转 - 向左或向右 - 如何使其连续？

Question

我正在学习 Jquery 并且有一个简单的图像旋转脚本，它显示三张图像并允许您将鼠标悬停在中央，并根据鼠标是否在左侧相应地移动其余图像或在右边。我对它在右侧的工作方式很满意，但在左侧却不行。两个图像都突然弹出，但从右边看效果更好，而左边的过渡很刺耳。有任何想法吗？

其次，更重要的是，我需要让这种轮换持续进行。旋转图像后，鼠标离开并再次进入左侧或右侧图像，我需要再次进行旋转。最好的方法是什么？我尝试创建 .left .center 和 .right 类并在每个动画结束时重新分配它们，但这似乎不起作用。

JS Fiddle - https://jsfiddle.net/unata/4km5cf0r/

<div class="featured_listings">
  <div id="carousel">


<div><img src="https://via.placeholder.com/200/808080/000000?text=roll over me"></div>
<div><img src="https://via.placeholder.com/200/0000CC/000000?Text=div2"></div>
<div><img src="https://via.placeholder.com/200/00CCCC/000000?text=roll over me"></div>

</div>
</div>

Jquery:

$('#carousel div:nth-child(2)').addClass('selected'); 
//put orange border around the selected item            


var div_widthtotal = 230; 
var ijustmoved=0; 
$("#carousel div:nth-child(1)").addClass("left"); 
$("#carousel div:nth-child(2)").addClass("center"); 
$("#carousel div:nth-child(3)").addClass("right"); 


$(".right").mouseenter(function() {
        $(this).addClass('selected'); 
        $(this).siblings().removeClass('selected'); 
    //this is to stop the hover effect from repeating
        if (ijustmoved ==0) {
        $("#carousel").animate({marginLeft: -div_widthtotal}, function(){
            $(".left").clone().insertAfter(".right"); 
            //don't move me anymore
            ijustmoved=1; 
        });         
        }
    });

    $(".left").mouseenter(function() {
        $(this).addClass('selected'); 
            $(this).siblings().removeClass('selected'); 
    if (ijustmoved ==0) {
        //on animation clone the left div 
        $("#carousel").animate({marginLeft: div_widthtotal}, function(){
            $(".right").clone().insertBefore(".left"); 
            $("#carousel").css('margin-left', 0);  
            //don't move me anymore
            ijustmoved=1; 
        });         
        }


    });

Answer 1

这应该对很多人有帮助。它还不完美。边距动画偶尔会在错误的时间切换到零仍然存在一些问题。但这是一个显着的改进。

连续动画的关键是在将克隆添加到 DOM 后再次在克隆上设置翻转。

$('#carousel div:nth-child(2)').addClass('selected'); 
//put orange border around the selected item            

var div_widthtotal = 230; 
$("#carousel div:nth-child(1)").addClass("left"); 
$("#carousel div:nth-child(2)").addClass("center"); 
$("#carousel div:nth-child(3)").addClass("right"); 

function setupRight(el)
{
  el.unbind('mouseenter.roll').bind('mouseenter.roll', function() {
    el.addClass('selected'); 
    el.siblings().removeClass('selected');
    //on animation clone the left div and remove all the classes)
    $("#carousel").animate({marginLeft: -div_widthtotal}, function()
    {
      $("#carousel div:nth-child(1)").clone().insertAfter("#carousel div:nth-child(3)"); 
      $("#carousel").css('margin-left', 0);  
      setupRight($("#carousel div:nth-child(4)"));
      $("#carousel div:nth-child(1)").empty().remove();
      setupLeft($("#carousel div:nth-child(1)"));
      //don't move me anymore
      el.unbind('mouseenter.roll');
    });
  });
}

function setupLeft(el)
{
  el.mouseenter(function() {
    el.addClass('selected'); 
    el.siblings().removeClass('selected');
    //on animation clone the left div 
    $("#carousel").animate({marginLeft: div_widthtotal}, function(){
      $("#carousel div:nth-child(3)").clone().insertBefore("#carousel div:nth-child(1)"); 
      $("#carousel").css('margin-left', 0);  
      $("#carousel div:nth-child(4)").empty().remove();
      setupRight($("#carousel div:nth-child(3)"));
      setupLeft($("#carousel div:nth-child(1)"));
      //don't move me anymore
      el.unbind('mouseenter.roll');
    });
  });
}

setupRight($("#carousel div:nth-child(3)"));
setupLeft($("#carousel div:nth-child(1)"));

编辑 - 2020-02-06

我认为以下是您现在需要的方式。无需付款。好玩。您可能需要针对真实场景稍微修改它（特别是 jQuery 选择器，例如 'img'，这肯定太宽泛了），但希望这会指出您需要去的地方.

HTML

<div class="featured_listings">
  <div id="carousel">
    <div class="imgWrp">
      <img src="https://via.placeholder.com/200/808080/000000?text=One">
      <img src="https://via.placeholder.com/200/0000CC/000000?Text=Two">
      <img src="https://via.placeholder.com/200/00CCCC/000000?text=Three">
    </div>
  </div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
}


.featured_listings {
  width: 70%;
  max-width: 940px; 
  margin: auto; 
  margin-top: 10%; 
  overflow: hidden; 
}

#carousel{
  display: inline-block;
  width: 100%;
  max-width: 100%;
  padding: 1em 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}

.featured_listings img {
  max-width: 200px; 
  margin: 0 1em;

}

.imgWrp {
  display: inline-block;
}

.selected {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  border: 5px solid #e67e22;
  transform: scale(1.08);
  transition: all ease-in-out .3s;
}

JS

$(function() {
  //put orange border around the selected item
  $('#carousel .imgWrp img:nth-child(2)').addClass('selected');

  // Set margin amount
  var div_widthtotal = 230;

  // Find and create jQuery elements
  var carousel = $('#carousel');
  var imgWrp = $('.imgWrp');
  var newFirst = $('#carousel .imgWrp img:first-child').clone();
  var newSecond = $('#carousel .imgWrp img:nth-child(2)').clone();
  var newThird = $('#carousel .imgWrp img:last-child').clone();

    // This function places the images in the correct location
  function scrollToCenter(ms)
  {
    var img = carousel.find('img.selected');
    var desiredCenter = img[0].offsetLeft;
    var actualCenter = carousel.width() / 2;
    var lftScroll = desiredCenter - actualCenter;
    carousel.animate({
      scrollLeft: lftScroll
    }, ms);
  }

    // This is the on-mouse-enter function
  function onMouseenter(el)
  {
    if (el.index() == 1)
    {
        var newFirst = $('#carousel .imgWrp img:last-child');
      newFirst.css("margin-right", 0);
      newFirst.css("margin-left", -newFirst.width() + 'px');
      $('#carousel .imgWrp img:first-child').before(newFirst);
      el.addClass('selected');
      el.siblings().removeClass('selected');
      newFirst.animate({ 'marginLeft': '1em', 'marginRight': '1em' }, 400);
    }
    else if (el.index() == 3)
    {
      $('#carousel .imgWrp img:last-child').after($('#carousel .imgWrp img:first-child'));
      scrollToCenter(0);
      el.addClass('selected');
      el.siblings().removeClass('selected');
      scrollToCenter(400);
    }
  }

    // This is where all images will be bound to the mouse-enter function at one time
  function bindImgs()
  {
    $('img').each(function(i, img){
      var el = $(img);
      el.unbind('mouseenter.roll').bind('mouseenter.roll', function(e){
        // First, turn off mouse-enter functionality
        $('img').unbind('mouseenter.roll');
        // Next, run the process to move the images around
        onMouseenter(el);
      });
    });
  }

    // Make it so the user can re-activeate the mouse-enter functionality when they leave the scroller
  carousel.unbind('mouseleave.scroller').bind('mouseleave.scroller', function(e){
    bindImgs();
  });

    // Additional setup
  $('#carousel .imgWrp img:last-child').after(newFirst);
  $('#carousel .imgWrp img:last-child').after(newSecond);
  $('#carousel .imgWrp img:first-child').before(newThird);

  // Launch functionality
  scrollToCenter(0);
  bindImgs();
});

Jquery 根据翻转的简单图像旋转 - 向左或向右 - 如何使其连续？

Jquery simple image rotation depending on rollover - left or right - how to make this continious?

jquery

carousel

编辑 - 2020-02-06