如何在我的轮播上产生这种悬停效果？
基本上，我制作了一个 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)"
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<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>
吃鸡游戏浏览 93回答 1
1回答
-
拉莫斯之舞
对于解决方案，我必须对 css、html 进行一些更改并修复 js 代码以确定活动幻灯片。这样的结果有必要吗？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><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>
随时随地看视频慕课网APP
相关分类
JavaScript