活动和悬停时的自定义滑块具有相同的属性

Question

我正在处理自定义滑块，我已经编写了一个循环，它可以正常工作的活动幻灯片和活动点分页。在悬停时，我为活动幻灯片编写了一些 CSS，位于所有滑块的顶部。问题是 example$( "#dt2").hover(){} 这个悬停功能我如何与活动幻灯片合并这个悬停属性我想在两种情况下都在活动和悬停上工作我想使用 jquery 工作这个 CSS。 谁能建议我如何实现此输出。 将鼠标悬停在点分页上，您可以看到活动幻灯片位于所有其他幻灯片的顶部。因此，我正在尝试在活动幻灯片上使用相同的属性

$(document).ready(function() {
  $(".pdot").on({
    mouseover: function() {
      myvar = this.id;
      $('#sl' + myvar).addClass('fullVisible').siblings().removeClass('fullVisible');
    },
    mouseout: function() {
      $("img.image1").addClass('fullVisible').siblings().removeClass('fullVisible');
    }
  });

  $(function() {
    var $slideLoop = $('.slide');
    var $dotLoop = $('.pdot');
    var timeOut;
    var index = 0;

    function _loop(idx) {
      $slideLoop.removeClass('active').eq(idx).addClass('active');
      $dotLoop.removeClass('active').eq(idx).addClass('active');
      timeOut = setTimeout(function() {
        index = (idx + 1) % $slideLoop.length;
        index = (idx + 1) % $dotLoop.length;
        _loop(index);
      }, 3000);
    };
    _loop(index);
    $(".pagination-dots, .inner").hover(function() {
      window.clearTimeout(timeOut);
    }, function() {
      _loop(index);
    });
    $(".slide, .pdot").hover(function() {
      $(".slide, .pdot").removeClass("active");
      $(this).addClass("active");
    }, function() {
      $(".slide, .pdot").removeClass("active");
    });
  });

  // onhover on dot (this will work on hover as well as active slide)
  $("#dt2").hover(
    function() {
      $("#sldt1").css({
        "top": "-200px"
      });
    },
    function() {
      $("#sldt1").css({
        "top": "-100px"
      });
    }
  );
  $("#dt3").hover(
    function() {
      $("#sldt1").css({
        "top": "-200px"
      });
      $("#sldt2").css({
        "top": "-150px"
      });
    },
    function() {
      $("#sldt1").css({
        "top": "-100px"
      });
      $("#sldt2").css({
        "top": "-60px"
      });
    }
  );
  $("#dt4").hover(
    function() {
      $("#sldt1").css({
        "top": "-200px"
      });
      $("#sldt2").css({
        "top": "-155px"
      });
      $("#sldt3").css({
        "top": "-125px"
      });
    },
    function() {
      $("#sldt1").css({
        "top": "-100px"
      });
      $("#sldt2").css({
        "top": "-60px"
      });
      $("#sldt3").css({
        "top": "-30px"
      });
    }
  );
});

.wrapper {
  width: 500px;
  height: 500px;
  margin: 150px auto;
  position: relative;
}

.inner {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 150px auto;
  z-index: 0;
}

.image1,
.image2,
.image3,
.image4 {
  width: 490px;
  height: 490px;
  opacity: 0.1;
  width: 461px;
  height: 378px;
  position: absolute;
  transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.image1 {
  top: -100px;
  left: 0px;
  z-index: 4;
}

.image2 {
  top: -60px;
  left: 0px;
  z-index: 3;
}

.image3 {
  top: -30px;
  left: 10px;
  z-index: 2;
}

.image4 {
  top: 0;
  left: 11px;
  z-index: 1;
}

.fullVisible {
  opacity: 1;
  transition: all 0.35s ease-in-out;
}

.pagination-dots {
  width: 150px;
  height: 100px;
  display: flex;
  position: absolute;
  right: -150px;
  top: 0;
  justify-content: space-between;
}

.pdot {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50px;
}

.pdot.active {
  width: 40px;
}

.slide.active {
  background-color: red;
  width: 100%;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="wrapper">
  <div class="pagination-dots">
    <div class="page-dot1 pdot" id="dt1"></div>
    <div class="page-dot2 pdot" id="dt2"></div>
    <div class="page-dot3 pdot" id="dt3"></div>
    <div class="page-dot4 pdot" id="dt4"></div>
  </div>
  <div class="inner">
    <img class="slide image1 fullVisible" id="sldt1" src="https://picsum.photos/300/200?image=244">
    <img class="slide image2" id="sldt2" src="https://picsum.photos/300/200?image=1024">
    <img class="slide image3" id="sldt3" src="https://picsum.photos/300/200?image=611">
    <img class="slide image4" id="sldt4" src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg">
  </div>
</div>

Answer 1

在您的代码中，您将 fullVisible 类与 active 混淆了。所以把code-sn-p改成：

var caroussel;
	
$(document).ready(function() {		

	
	$(".pdot").on({
		mouseover: function() {
			myvar = this.id;
			// console.log(`myvar= ${myvar}\n`);
			clearTimeout(caroussel);
			console.log(caroussel + " has been stopped");
			$('#sl' + myvar).addClass('fullVisible').siblings().removeClass('fullVisible');
			$('#'+ myvar).addClass('active').siblings().removeClass('active');
			// console.log(`#${myvar} is active.`);
			//console.log(`#sl${myvar} is fullVisible.`);
		},
		mouseout: function() {	
			$("#sldt1").addClass('fullVisible').siblings().removeClass('fullVisible');
			$('#dt1').addClass('active').siblings().removeClass('active');
			_loop(0);
		}
	});
	
  //startLoop();
  _loop(0);
});


function _loop(idx) {
	let slideLoop = $('.slide');
    let dotLoop = $('.pdot');    
	
	slideLoop.removeClass('fullVisible').eq(idx).addClass('fullVisible');
	dotLoop.removeClass('active').eq(idx).addClass('active');
	
	caroussel = setTimeout(function() {
        index = (idx + 1) % slideLoop.length;
        index = (idx + 1) % dotLoop.length;
        _loop(index);
	}, 3000);
	console.log(caroussel + " has been scheduled.");
};

#wrapper {
  width: 500px;
  height: 500px;
  margin: 150px auto;
  position: relative;
}

#inner {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 150px auto;
  z-index: 0;
}


.slide {
  width: 490px;
  height: 490px;
  opacity: 0;
  /*width: 461px; */
  /* height: 378px;*/
  position: absolute;
  transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
}

#sldt1 {
  top: -100px;
  left: 0px;
  z-index: 4;
}

#sldt2 {
  top: -100px;
  left: 0px;
  z-index: 3;
}

#sldt3 {
  top: -100px;
  left: 0px;
  z-index: 2;
}

#sldt4 {
  top: -100px;
  left: 0px;
  z-index: 1;
}

.fullVisible {
  opacity: 1;
  transition: all 0.01s ease;
}

#pagination-dots {
  width: 150px;
  height: 100px;
  display: flex;
  position: absolute;
  right: -150px;
  top: 0;
  justify-content: space-between;
}

.pdot {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50px;
}

.pdot.active {
  width: 40px;
}

.img {
  /* background-color: red; */
  width: 100%;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="wrapper">
  <div id="pagination-dots">
	  <div class="pdot" id="dt1"></div>
    <div class="pdot" id="dt2"></div>
    <div class="pdot" id="dt3"></div>
    <div class="pdot" id="dt4"></div>
  </div>
  <div id="inner">
    <img class="slide fullVisible" id="sldt1" src="https://picsum.photos/300/200?image=244">
    <img class="slide" id="sldt2" src="https://picsum.photos/300/200?image=1024">
    <img class="slide" id="sldt3" src="https://picsum.photos/300/200?image=611">
    <img class="slide" id="sldt4" src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg">
  </div>
	</div>

如果我是你，我不会使用太多的 css-classes，hover() 函数是多余的，你不需要每次都设置图像的顶部和左侧，因为它们具有不同的 index-z . Here 是一个工作小提琴。