javascript - 如何使我的幻灯片按钮工作?
问题描述
基本上,我正在尝试创建一个具有“下一个”和“上一个”按钮的幻灯片。我已经创建了幻灯片,但是在创建交互式按钮时遇到了麻烦。出于某种原因,这些按钮在单击时不会转换到幻灯片上的相应幻灯片。我认为这可能是我的 JavaScript 的问题。我怎样才能解决这个问题?任何帮助表示赞赏。这是我的代码。
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 - 60;
}
if(e.data.d=="p"){
currdeg = currdeg + 60;
}
carousel.css({
"-webkit-transform": "rotateY("+currdeg+"deg)",
"-moz-transform": "rotateY("+currdeg+"deg)",
"-o-transform": "rotateY("+currdeg+"deg)",
"transform": "rotateY("+currdeg+"deg)"
});
}
body {
background: #333;
padding: 70px 0;
font: 15px/20px Arial, sans-serif;
}
.container {
margin: 0 auto;
width: 250px;
height: 200px;
position: relative;
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;
border-radius: 10px;
}
.a {
transform: rotateY(0deg) translateZ(250px);
background: #ed1c24;
}
.b {
transform: rotateY(60deg) translateZ(250px);
background: #0072bc;
}
.c {
transform: rotateY(120deg) translateZ(250px);
background: #39b54a;
}
.d {
transform: rotateY(180deg) translateZ(250px);
background: #f26522;
}
.e {
transform: rotateY(240deg) translateZ(250px);
background: #630460;
}
.f {
transform: rotateY(300deg) translateZ(250px);
background: #8c6239;
}
.next, .prev {
color: #444;
position: absolute;
top: 100px;
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: 104px;
box-shadow: 0 1px 0 #999;
}
.next { right: 5em; }
.prev { left: 5em; }
<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="container">
<div class="carousel">
<div class="item a">A</div>
<div class="item b">B</div>
<div class="item c">C</div>
<div class="item d">D</div>
<div class="item e">E</div>
<div class="item f">F</div>
</div>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>
<script src="script.js"></script>
</body>
</html>
解决方案
推荐阅读
- python - 创建一个 Python 函数,该函数将为字符计数的元组创建一个字典,分配给元音、辅音或其他的键
- node.js - 当我的 API 服务器处理 aws SNS 订阅确认消息时出现意外结果
- asp.net-mvc - .NET Core 5.0 EF Migration 添加新的外部列
- xslt - XSLT 帮助 - 根据两个条件删除重复的 XML 节点
- python - 如何从基于两列的熊猫数据框创建新的汇总行
- python - 如何在 Pandas 中更轻松地绘制此 DataFrame
- c - 更改使用“转到定义”时打开哪个文件 vscode
- javascript - 检查采样猫鼬的结果
- git - 推送后我无法提交
- c - 如果没有 math.h 库,我该如何做 pow?