文章/答案/技术大牛

发布

社区首页 >问答首页 >改变文本和图像的HTML/JS旋转木马

问改变文本和图像的HTML/JS旋转木马
EN

Stack Overflow用户

提问于 2020-10-03 09:18:51

回答 3查看 855关注 0票数 0

我想要一个带短信的旋转木马。每次单击左右键时，我都希望更改图像和文本。它能很好地处理图像，但我没有收到短信。如何通过每次点击按钮来更改文本？我试过在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>

javascript

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-10-03 09:29:08

请试一下：

var i = 0;
var images = [];
var texts = [];

// image list
images[0] = 'https://www.w3schools.com/bootstrap/la.jpg';
images[1] = 'https://www.w3schools.com/bootstrap/chicago.jpg';
images[2] = 'https://www.w3schools.com/bootstrap/ny.jpg';

// text list
texts = ['Text0','Text1','Text2'];

// change image
function changeImgLeft() {
if (i > 0) {
        i--;
    } else {
        i = 2;
    }
    changeTextLeft(i);
    
    document.slide.src = images[i];
}

function changeImgRight() {
if (i < images.length - 1) {
        i++;
    } else {
        i = 0;
    }
    changeTextRight(i);
    
    document.slide.src = images[i];
}

window.onload = document.slide.src = images[i];
window.onload = document.getElementsByName("carousel_text")[0].innerText = texts[i];

// change text
function changeTextLeft(counter) {
    document.getElementsByName("carousel_text")[0].innerText = texts[counter];
}

function changeTextRight(counter) {
    document.getElementsByName("carousel_text")[0].innerText = texts[counter];
}

<div id="carousel">
            <button class="carousel_button" onclick="changeImgLeft()">left</button>
            <button class="carousel_button" onclick="changeImgRight()">right</button>
            <img id="slideImg" name="slide">
            
            <div id="carousel_text">
                <h1 name="carousel_text"></h1>
            </div>
        </div>

票数 3

Stack Overflow用户

发布于 2020-10-03 09:37:50

引导有一个组件，正好适合你想要的东西。

这是关于它的链接，https://getbootstrap.com/docs/4.5/components/carousel/

为了使其工作，您必须在HTML文件中包括以下标记：

This goes on <head> tag
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

This goes on <body> tag
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

票数 1

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64182607

复制

相似问题

问改变文本和图像的HTML/JS旋转木马
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问改变文本和图像的HTML/JS旋转木马EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问改变文本和图像的HTML/JS旋转木马
EN