javascript - html按钮更改图像
问题描述
我有一个网站,我目前正在定期更改图像,但是,我现在还希望能够通过按下按钮来更改它们。通常这很容易,但由于某种原因,结果是它只会让图像显示在彼此下方(这会向上和向下拉伸页面)。
另一个问题是我希望我的图像首先淡入屏幕(淡出 css 功能),然后在时间结束后淡出(淡出屏幕)。这应该发生在定期旋转(所以不是当一个人按下按钮时)。我什至不知道从哪里开始,但动画确实有效。
另一件事是,我还没有在这里发布太多,所以我可能做错了什么(在这里之前做过......)。感谢您提供任何帮助,我希望我已经提供了足够的代码和有关该问题的信息。如果不是这种情况,那么我将尝试尽快提供任何额外的信息,尽管我无法发送/显示图像,因为它们是私人的。
var slideIndex = 0;
showSlides();
var j = 0;
function chngImg(z) {
j = z
}
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = j; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
for (i = j; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}
div.content {
position: absolute;
left: 0;
}
.box {
margin: auto;
width: 80%;
padding: 10px;
}
.grey {
background: rgb(204, 203, 203);
}
* {
box-sizing: border-box;
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
display: none;
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 75%;
display: inline-block;
transition: background-color 1.5s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 5s;
animation-name: fade;
animation-duration: 5s;
}
.fadeOut {
-webkit-animation-name: fadeOut;
-webkit-animation-duration: 5s;
animation-name: fadeOut;
animation-duration: 5s;
}
@-webkit-keyframes fade {
from {
opacity: .7
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .7
}
to {
opacity: 1
}
}
.fade-out {
animation: fadeOut ease 5s;
-webkit-animation: fadeOut ease 5s;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0.7;
}
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0.7;
}
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img/00.jpg" style="width:100%">
<div class="text">img1</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img/01.jpg" style="width:100%">
<div class="text">img2</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img/02.jpg" style="width:100%">
<div class="text">img3</div>
</div>
</div>
<br>
<div style="text-align:center">
<button onclick="chngImg(0)"><span class="dot"></span> </button>
<button onclick="chngImgo(1)"><span class="dot"></span> </button>
<button onclick="chngImg(2)"><span class="dot"></span> </button>
</div>
解决方案
不错的编码 - 可能会更好。
随便修改
<button onclick="chngImg(0)">
到
<button onclick="chngImg(0);showSlides()">
它应该工作......
推荐阅读
- java - 无法访问 Lambda 函数中的环境变量
- bash - bash 脚本将日志文件作为邮件内容发送,格式化(特定颜色编码)
- reactjs - 是否可以在 Material UI SWipeableDrawer 中定义一个不通过关闭抽屉来响应滑动的区域
- callback - pyaudio 以非阻塞方式保存多个 .WAV 文件
- xml - Nlog - 我可以使用哪些参数来通过 Web.Nlog XML 进行数据库日志记录
- java - 模板方法:当您希望能够灵活更改原始选项时如何使用它?
- php - sms api 与 php 的集成 - smsedge.com telnyx.com
- visual-studio-code - VS Code 多任务栏图标
- vue.js - 返回的数据被渲染而不是 Nuxt 中的页面结构
- python - XGBoost 中的相同预测