改变文本和图像的HTML/JS旋转木马
改变文本和图像的HTML/JS旋转木马
提问于 2020-10-03 09:18:51
我想要一个带短信的旋转木马。每次单击左右键时，我都希望更改图像和文本。它能很好地处理图像，但我没有收到短信。如何通过每次点击按钮来更改文本？我试过在document.carousel_text.__src = textsi上使用“src”，但是控制台中出现了一个错误。但只在window.onload。
var i = 0;
var images = [];
var texts = [];
// image list
images[0] = 'src/image1.jpg';
images[1] = 'src/image2.jpg';
images[2] = 'src/image3.jpg';
// text list
texts[0] = 'Text1';
texts[1] = 'Text2';
texts[2] = 'Text3';
// change image
function changeImgLeft() {
changeTextLeft();
if (i > 0) {
i--;
} else {
i = 2;
}
document.slide.src = images[i];
}
function changeImgRight() {
changeTextRight();
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
document.slide.src = images[i];
}
window.onload = document.slide.src = images[i];
window.onload = document.carousel_text = texts[i];
// change text
function changeTextLeft() {
if (i > 0) {
i--;
} else {
i = 2;
}
document.carousel_text = texts[i];
}
function changeTextRight() {
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
document.carousel_text = texts[i];
}<div id="carousel">
<button class="carousel_button" onclick="changeImgLeft()">
<img class="carousel_button_image"src="src/left_button.svg">
</button>
<img id="slideImg" name="slide">
<button class="carousel_button" onclick="changeImgRight()">
<img class="carousel_button_image"src="src/right_button.svg"></button>
<div id="carousel_text">
<h1 name="carousel_text"></h1>
</div>
</div>
Stack Overflow用户
发布于 2020-10-03 09:38:54
将name属性用于<h1>有什么意义？
尝试给它分配一个id：
var i = 0;
var images = [];
var texts = [];
// image list
images[0] = 'src/image1.jpg';
images[1] = 'src/image2.jpg';
images[2] = 'src/image3.jpg';
// text list
texts[0] = 'Text1';
texts[1] = 'Text2';
texts[2] = 'Text3';
// change image
function changeImgLeft() {
changeTextLeft();
if (i > 0) {
i--;
} else {
i = 2;
}
document.slide.src = images[i];
}
function changeImgRight() {
changeTextRight();
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
document.slide.src = images[i];
}
// change text
function changeTextLeft() {
if (i > 0) {
i--;
} else {
i = 2;
}
document.getElementById('carousel_text').innerHTML = texts[i];
}
function changeTextRight() {
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
document.getElementById('carousel_text').innerHTML = texts[i];
}
window.onload = document.slide.src = images[0];
window.onload = document.getElementById('carousel_text').innerHTML = texts[0];<div id="carousel">
<button class="carousel_button" onclick="changeImgLeft()">
<img class="carousel_button_image"src="src/left_button.svg">
</button>
<img id="slideImg" name="slide">
<button class="carousel_button" onclick="changeImgRight()">
<img class="carousel_button_image"src="src/right_button.svg"></button>
<div id="carousel_text">
<h1 id="carousel_text"></h1>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64182607
复制相关文章
相似问题
腾讯云开发者
