javascript - 如何在转盘上产生这种悬停效果？

基本上，我制作了一个3D轮播，其中包含3张图像。当用户单击“下一步”和“上一步”按钮时，轮播会来回移动。我在顶部还有一个单独的图像，可以产生这种悬停效果。我想将这种悬停效果包括在我的轮播中的图像上，并具有相同的动画，不透明度，文本，大小等。但是，我不知道如何包括它。我怎样才能做到这一点？任何帮助，将不胜感激。这是我的代码。谢谢。

var carousel = $(".carousel"),
    currdeg  = 0;

$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);

function rotate(e){
  if(e.data.d=="n"){
    currdeg = currdeg - 120;
  }
  if(e.data.d=="p"){
    currdeg = currdeg + 120;
  }
  carousel.css({
    "-webkit-transform": "rotateY("+currdeg+"deg)",
    "-moz-transform": "rotateY("+currdeg+"deg)",
    "-o-transform": "rotateY("+currdeg+"deg)",
    "transform": "rotateY("+currdeg+"deg)"
  });
}

.container {
  margin: 0 auto;
  width: 250px;
  height: 200px;
  position: relative;
  top: 500px;
  perspective: 1000px;

}

.carousel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.item {
  display: block;
  position: absolute;
  background: #000;
  width: 250px;
  height: 200px;
  line-height: 200px;
  font-size: 5em;
  text-align: center;
  color: #FFF;
  opacity: 0.95;

}

.a {
  transform: rotateY(0deg) translateZ(250px);
}
.b {
  transform: rotateY(120deg) translateZ(250px);
}
.c {
  transform: rotateY(240deg) translateZ(250px);
}

.next, .prev {
  color: #444;
  position: absolute;
  top: 500px;
  padding: 1em 2em;
  cursor: pointer;
  background: #CCC;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
}
.next:hover, .prev:hover { color: #000; }
.next:active, .prev:active {
  top: 504px;
  box-shadow: 0 1px 0 #999;
}
.next { right: 5em; }
.prev { left: 5em; }



.content {
 position: relative;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 max-width: 400px;
}
.container .title{
 color: #1a1a1a;
 text-align: center;
 margin-bottom: 10px;
}



.content .content-overlay {
 background: rgba(0,0,0,0.7);
 position: absolute;
 height: 99%;
 width: 100%;
 opacity: 0;
 -webkit-transition: all 0.4s ease-in-out 0s;
 -moz-transition: all 0.4s ease-in-out 0s;
 transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
 opacity: 1;
}

.content-image{
 width: 100%;
}

.content-details {
 position: absolute;
 text-align: center;
 padding-left: 1em;
 padding-right: 1em;
 width: 100%;
 top: 50%;
 left: 50%;
 opacity: 0;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 -webkit-transition: all 0.3s ease-in-out 0s;
 -moz-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
 top: 50%;
 left: 50%;
 opacity: 1;
}

.content-details h3{
 color: #fff;
 font-weight: 500;
 letter-spacing: 0.15em;
 margin-bottom: 0.5em;
 text-transform: uppercase;
}

.content-details p{
 color: #fff;
 font-size: 0.8em;
}

.fadeIn-bottom{
 top: 80%;
}




.content {
 position: relative;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 max-width: 400px;
}



.content .content-overlay {
 background: rgba(0,0,0,0.7);
 position: absolute;
 height: 99%;
 width: 100%;
 opacity: 0;
 -webkit-transition: all 0.4s ease-in-out 0s;
 -moz-transition: all 0.4s ease-in-out 0s;
 transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
 opacity: 1;
}

.content-image{
 width: 100%;
}

.content-details {
 position: absolute;
 text-align: center;
 padding-left: 1em;
 padding-right: 1em;
 width: 100%;
 top: 50%;
 left: 50%;
 opacity: 0;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 -webkit-transition: all 0.3s ease-in-out 0s;
 -moz-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
 top: 50%;
 left: 50%;
 opacity: 1;
}

.content-details h3{
 color: #fff;
 font-weight: 500;
 letter-spacing: 0.15em;
 margin-bottom: 0.5em;
 text-transform: uppercase;
}

.content-details p{
 color: #fff;
 font-size: 0.8em;
}

.fadeIn-bottom{
 top: 80%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css">
  <title>Document</title>
</head>
<body>
   <div class="content">
   <a href="#open-modal">
     <div class="content-overlay"></div>
     <img class="content-image" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/03/25/12/eiffel.jpg">
     <div class="content-details fadeIn-bottom">
       <h3 class="content-title">Eiffel Tower</h3>
     </div>
   </a>
 </div>
  <div class="container">
  <div class="carousel">
    <div class="item a"><img src="https://www.insidehook.com/wp-content/uploads/2019/08/HERO-3.jpg?fit=1200%2C750" width="250px" height="200px"></div>
    <div class="item b"><img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/03/25/12/eiffel.jpg" width="250px" height="200px"></div>
    <div class="item c"><img src="https://nypost.com/wp-content/uploads/sites/2/2019/12/robberies-serious-crimes-spike-in-central-park-this-year.jpg?quality=80&strip=all" width="250px" height="200px"></div>
  </div>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>

  <script src="script.js"></script>
</body>
</html>

最佳答案

对于解决方案，我必须对css，html进行一些更改，并修复您的js代码才能确定 Activity 幻灯片。
这样的结果是否必要？

var carousel = $(".carousel"),
    currdeg = 0,
    current = 0;

$(".next").on("click", {d: "n"}, rotate);
$(".prev").on("click", {d: "p"}, rotate);

function rotate(e) {

    $(carousel.find('.active')).removeClass('active');
    if (e.data.d == "n") {
        currdeg = currdeg - 120;
        current = (current + 1) % carousel.find('.item').length;
    }

    if (e.data.d == "p") {
        currdeg = currdeg + 120;
        current = (current - 1 + carousel.find('.item').length) % carousel.find('.item').length;

    }

    $(carousel.find('.item')[current]).addClass('active');
    carousel.css({
      "-webkit-transform": "rotateY(" + currdeg + "deg)",
      "-moz-transform": "rotateY(" + currdeg + "deg)",
      "-o-transform": "rotateY(" + currdeg + "deg)",
      "transform": "rotateY(" + currdeg + "deg)"
    });
}

.container {
  margin: -100px auto;
  width: 250px;
  height: 200px;
  position: relative;
  top: 500px;
  perspective: 1000px;

}

.carousel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.item {
  display: block;
  position: absolute;
  background: #000;
  width: 250px;
  height: 200px;
  line-height: 200px;
  font-size: 5em;
  text-align: center;
  color: #FFF;
  /*opacity: 0.95;*/

}

.item.active {
  cursor: pointer;

}

.a {
  transform: rotateY(0deg) translateZ(250px);
}
.b {
  transform: rotateY(120deg) translateZ(250px);
}
.c {
  transform: rotateY(240deg) translateZ(250px);
}

.next, .prev {
  color: #444;
  position: absolute;
  top: 500px;
  padding: 1em 2em;
  cursor: pointer;
  background: #CCC;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
}
.next:hover, .prev:hover { color: #000; }
.next:active, .prev:active {
  top: 504px;
  box-shadow: 0 1px 0 #999;
}
.next { right: 5em; }
.prev { left: 5em; }



.content {
 position: relative;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 max-width: 400px;
}
.container .title{
 color: #1a1a1a;
 text-align: center;
 margin-bottom: 10px;
}


.carousel .content-overlay,
.content .content-overlay {
 background: rgba(0,0,0,0.7);
 position: absolute;
 height: 100%;
 width: 100%;
 opacity: 0;
 -webkit-transition: all 0.4s ease-in-out 0s;
 -moz-transition: all 0.4s ease-in-out 0s;
 transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
 opacity: 1;
}

.carousel .item.active:hover .content-overlay{
 opacity: 1;
}

.content-image{
 width: 100%;
}

.content-details {
 position: absolute;
 text-align: center;
 padding-left: 1em;
 padding-right: 1em;
 width: 100%;
 top: 50%;
 left: 50%;
 opacity: 0;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 -webkit-transition: all 0.3s ease-in-out 0s;
 -moz-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
 top: 50%;
 left: 50%;
 opacity: 1;
}

.content-details h3{
 color: #fff;
 font-weight: 500;
 letter-spacing: 0.15em;
 margin-bottom: 0.5em;
 text-transform: uppercase;
}

.content-details p{
 color: #fff;
 font-size: 0.8em;
}

.fadeIn-bottom{
 top: 80%;
}




.content {
 position: relative;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 max-width: 400px;
}



.content .content-overlay {
 background: rgba(0,0,0,0.7);
 position: absolute;
 height: 99%;
 width: 100%;
 opacity: 0;
 -webkit-transition: all 0.4s ease-in-out 0s;
 -moz-transition: all 0.4s ease-in-out 0s;
 transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
 opacity: 1;
}

.content-image{
 width: 100%;
}

.content-details {
 position: absolute;
 text-align: center;
 padding-left: 1em;
 padding-right: 1em;
 width: 100%;
 top: 50%;
 left: 50%;
 opacity: 0;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 -webkit-transition: all 0.3s ease-in-out 0s;
 -moz-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
 top: 50%;
 left: 50%;
 opacity: 1;
}

.content-details h3{
 color: #fff;
 font-weight: 500;
 letter-spacing: 0.15em;
 margin-bottom: 0.5em;
 text-transform: uppercase;
}

.content-details p{
 color: #fff;
 font-size: 0.8em;
}

.fadeIn-bottom{
 top: 80%;
}

.carousel_content-details {
 position: absolute;
 text-align: center;
 width: 100%;
 top: 50%;
 left: 50%;
 opacity: 0;
  margin: 0;
 padding: 0;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 -webkit-transition: all 0.3s ease-in-out 0s;
 -moz-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
}

.carousel .item.active:hover .carousel_content-details{
 top: 50%;
 left: 50%;
 opacity: 1;
}

.carousel_content-details h3{
 color: #fff;
 font-size: 24px;
 font-weight: 500;
 letter-spacing: 0.15em;
 margin-bottom: 0.5em;
 text-transform: uppercase;
 margin: 0;
 padding: 0;
}

.carousel_fadeIn-bottom{
  top: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css">
  <title>Document</title>
</head>
<body>
   <div class="content">
   <a href="#open-modal">
     <div class="content-overlay"></div>
     <img class="content-image" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/03/25/12/eiffel.jpg">
     <div class="content-details fadeIn-bottom">
       <h3 class="content-title">Eiffel Tower</h3>
     </div>
   </a>
 </div>
  <div class="container">
  <div class="carousel">
    <div class="item a active">
    <div class="content-overlay"></div>
    <img src="https://www.insidehook.com/wp-content/uploads/2019/08/HERO-3.jpg?fit=1200%2C750" width="250px" height="200px">
     <div class="carousel_content-details carousel_fadeIn-bottom">
       <h3 class="carousel_content-title">Text 1</h3>
     </div>
    </div>
    <div class="item b">
    <div class="content-overlay"></div>
    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/03/25/12/eiffel.jpg" width="250px" height="200px">
    <div class="carousel_content-details carousel_fadeIn-bottom">
       <h3 class="carousel_content-title">Text 2</h3>
     </div>
    </div>
    <div class="item c">
    <div class="content-overlay"></div>
    <img src="https://nypost.com/wp-content/uploads/sites/2/2019/12/robberies-serious-crimes-spike-in-central-park-this-year.jpg?quality=80&strip=all" width="250px" height="200px">
     <div class="carousel_content-details carousel_fadeIn-bottom">
       <h3 class="carousel_content-title">Text 3</h3>
     </div>
    </div>
  </div>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>

  <script src="script.js"></script>
</body>
</html>

关于javascript - 如何在转盘上产生这种悬停效果？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/64731620/