- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
因此,对于我的网站,我正在尝试实现轮播,但图片没有调整大小,并且下一个和上一个功能无法正常工作。有什么建议么?
我尝试将脚本包含在 html 函数的底部,并确保函数均已定义。我想做的是让 html 页面上的图片变小,并在图片下方提供上一个和下一个功能,并确保轮播正常工作
HTML
<h1 class="header"> Projects </h1>
<div id="container">
<div class = "carousel-item fade" style="width: 50%">
<img src = "hackBU.png">
<div class = "carousel-text"> Text </div>
</div>
<div class = "carousel-item fade">
<img src = "pigGame.png">
<div class = "carousel-text"> Text </div>
</div>
<div class = "carousel-item fade">
<img src = "connect4.png">
<div class = "carousel-text"> Text </div>
</div>
<div class = "carousel-item fade">
<img src = "ese123clock.png">
<div class = "carousel-text"> Text </div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusItem(-1)">❮</a>
<a class="next" onclick="plusItem(1)">❯</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
CSS
#projects{
width: auto;
height: 40rem;
margin: 4rem;
text-align: center;
}
.header{
color: white;
text-align: center;
font-family: Helvetica Neue',Helvetica,Arial,sans-serif;
}
.container{
width: 40rem;
position: relative;
margin: auto;
}
.carousel-item{
display: none;
width: 10%;
}
.prev,.next{
cursor: pointer;
position: inherit;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: blue;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
JS
document.addEventListener("DOMContentLoaded", function(event) {
var itemIndex = 1;
showItem(itemIndex);
// Next/previous controls
function plusItem(n) {
showItem(itemIndex += n);
}
// Thumbnail image controls
function currentItem(n) {
showItem(itemIndex = n);
}
function showItem(n) {
var item = document.getElementsByClassName("carousel-item");
if (n > item.length) {itemIndex = 1}
if (n < 1) {itemIndex = item.length}
for (var i = 0; i < item.length; i++) {
item[i].style.display = "none";
}
item[itemIndex-1].style.display = "block";
}
},false);
最佳答案
我假设您只需要有人告诉您为什么您的事件没有在点击时触发;如果您需要更多帮助,请告诉我。
单击箭头时,您调用的函数 (plusItem) 并未定义,因为您在未触发的“DOMContentLoaded”处理程序中定义它们。
我会将函数声明移到“DOMContentLoaded”处理程序之外。请参阅下面的代码片段;
var itemIndex = 1;
document.addEventListener("DOMContentLoaded", function(event) {
showItem(itemIndex);
},false);
// Next/previous controls
function plusItem(n) {
console.log('plusitem')
showItem(itemIndex += n);
}
// Thumbnail image controls
function currentItem(n) {
showItem(itemIndex = n);
}
function showItem(n) {
var item = document.getElementsByClassName("carousel-item");
if (n > item.length) {itemIndex = 1}
if (n < 1) {itemIndex = item.length}
for (var i = 0; i < item.length; i++) {
item[i].style.display = "none";
}
item[itemIndex-1].style.display = "block";
}
至于为什么你的“DOMContentLoaded”处理程序没有触发,我相信这对于页脚脚本检测页面加载来说执行得太早了。如果您的脚本位于页脚中,则不需要为此检测页面加载。或者,查看窗口负载:https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
为了将来的引用,在开发 JavaScript 时查看控制台给您提供的反馈是一个好主意,因为在这种情况下您会看到“plusItem 未定义”,这将为您提供线索。使用控制台日志记录 (console.log("abc")) 对于查看脚本的哪些部分正在执行也非常有用。
关于javascript - 轮播下一个和上一个按钮不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55507949/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!