当前位置： 文江博客话题详情

如何使用javaScript使用下一个和以前的按钮，一一显示列表项目，请不要jQuery

发布于 2025-02-08 18:55:36 字数 2160 浏览 4 评论 0原文

我正在学习JavaScript，并希望制作一个非常简单的滑块，以了解事物如何工作并在我的项目中使用它。

这是Codepen中的代码，此处是

所需的结果：

  1. DIV1默认为第一幻灯片。
  2. 用户按下下一步，将隐藏Div1，然后显示Div2，依此类推。
  3. 用户按上一个按钮将相反。
  4. 用户在末尾或上一个阵列开始时按下一个将循环循环。

感谢您的帮助。

https://codepen.io/willpower_7/pen/pen/govjale

var listItems = document.getElementById("slides-container-li").children;

function clickNext() {
  listItems[0].style.display = "none";
  listItems[1].style.display = "inline";
}

function clickPrevious() {
  listItems[0].style.display = "inline";
  listItems[1].style.display = "none";
}
.container {
  background: gray;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slides-container-li {
  width: 90%;
  height: 90%;
  background: lightblue;
  display: flex;
  text-align: center;
}

.div1 {
  width: 90%;
  height: 100%;
  background: orange;
  margin: auto;
  display: inline;
  font-size: 100px;
}

.div2 {
  width: 90%;
  height: 100%;
  background: red;
  margin: auto;
  display: none;
  font-size: 100px;
}

.div3 {
  width: 90%;
  height: 100%;
  background: yellow;
  margin: auto;
  display: none;
  font-size: 100px;
}

.btn-container {
  width: 100%;
  display: flex;
  background: lightgray;
  justify-content: center;
}
<div class="container">
  <li class="slides-container-li" id="slides-container-li">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
  </li>
</div>

<div class="btn-container">
  <button class="Previous-btn" id="Previous-btn" onclick="clickPrevious()">Previous</button>
  <button class="slide-btn" id="slide-btn" onclick="clickNext()">next</button>
</div>

原文

I'm learning javascript and want to make a very simple slider to understand how things work and use it in my project.

here is the code in codepen and here too

desired result:

  1. div1 is inline by default as first slide.
  2. user press next, will hide div1 then show div2 and so on.
  3. user press previous button, will do the opposite.
  4. user press next at the end or previous at the start of array will loop.

thanks for any help.

https://codepen.io/Willpower_7/pen/gOvJaLe

var listItems = document.getElementById("slides-container-li").children;

function clickNext() {
  listItems[0].style.display = "none";
  listItems[1].style.display = "inline";
}

function clickPrevious() {
  listItems[0].style.display = "inline";
  listItems[1].style.display = "none";
}
.container {
  background: gray;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slides-container-li {
  width: 90%;
  height: 90%;
  background: lightblue;
  display: flex;
  text-align: center;
}

.div1 {
  width: 90%;
  height: 100%;
  background: orange;
  margin: auto;
  display: inline;
  font-size: 100px;
}

.div2 {
  width: 90%;
  height: 100%;
  background: red;
  margin: auto;
  display: none;
  font-size: 100px;
}

.div3 {
  width: 90%;
  height: 100%;
  background: yellow;
  margin: auto;
  display: none;
  font-size: 100px;
}

.btn-container {
  width: 100%;
  display: flex;
  background: lightgray;
  justify-content: center;
}
<div class="container">
  <li class="slides-container-li" id="slides-container-li">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
  </li>
</div>

<div class="btn-container">
  <button class="Previous-btn" id="Previous-btn" onclick="clickPrevious()">Previous</button>
  <button class="slide-btn" id="slide-btn" onclick="clickNext()">next</button>
</div>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

旧话新听 2025-02-15 18:55:36

这是一个无穷循环滑块，无论滑块的数量如何，请检查。

var listItems = document.getElementById("slides-container-li").children;

let currentIndex = 0;



function clickNext() {
  //console.log(currentIndex >= listItems.length - 1);
  if (currentIndex >= listItems.length - 1) {
    currentIndex = -1;
  }
  [...listItems].forEach(item => item.style.display = 'none')
  listItems[++currentIndex].style.display = "inline"
  ;
  //console.log('after increment', currentIndex)
  }

function clickPrevious() {
    if (currentIndex <= 0) {
    currentIndex = listItems.length;
  }
  [...listItems].forEach(item => item.style.display = 'none')
  listItems[--currentIndex].style.display = "inline";
}
.container {
  background: gray;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slides-container-li {
  width: 90%;
  height: 90%;
  background: lightblue;
  display: flex;
  text-align: center;
}

.div1 {
  width: 90%;
  height: 100%;
  background: orange;
  margin: auto;
  display: inline;
  font-size: 100px;
}

.div2 {
  width: 90%;
  height: 100%;
  background: red;
  margin: auto;
  display: none;
  font-size: 100px;
}

.div3 {
  width: 90%;
  height: 100%;
  background: yellow;
  margin: auto;
  display: none;
  font-size: 100px;
}

.btn-container {
  width: 100%;
  display: flex;
  background: lightgray;
  justify-content: center;
  margin-bottom: 100px;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div class="container">
    <li class="slides-container-li" id="slides-container-li">
      <div class="div1">div1</div>
      <div class="div2">div2</div>
      <div class="div3">div3</div>
    </li>
  </div>

  <div class="btn-container">
    <button class="Previous-btn" id="Previous-btn" onclick="clickPrevious()">Previous</button>

    <button class="slide-btn" id="slide-btn" onclick="clickNext()">next</button>

  </div>

</body>

</html>

This is an infinity looping slider and will work whatever the count of sliders, please check.

var listItems = document.getElementById("slides-container-li").children;

let currentIndex = 0;



function clickNext() {
  //console.log(currentIndex >= listItems.length - 1);
  if (currentIndex >= listItems.length - 1) {
    currentIndex = -1;
  }
  [...listItems].forEach(item => item.style.display = 'none')
  listItems[++currentIndex].style.display = "inline"
  ;
  //console.log('after increment', currentIndex)
  }

function clickPrevious() {
    if (currentIndex <= 0) {
    currentIndex = listItems.length;
  }
  [...listItems].forEach(item => item.style.display = 'none')
  listItems[--currentIndex].style.display = "inline";
}
.container {
  background: gray;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slides-container-li {
  width: 90%;
  height: 90%;
  background: lightblue;
  display: flex;
  text-align: center;
}

.div1 {
  width: 90%;
  height: 100%;
  background: orange;
  margin: auto;
  display: inline;
  font-size: 100px;
}

.div2 {
  width: 90%;
  height: 100%;
  background: red;
  margin: auto;
  display: none;
  font-size: 100px;
}

.div3 {
  width: 90%;
  height: 100%;
  background: yellow;
  margin: auto;
  display: none;
  font-size: 100px;
}

.btn-container {
  width: 100%;
  display: flex;
  background: lightgray;
  justify-content: center;
  margin-bottom: 100px;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div class="container">
    <li class="slides-container-li" id="slides-container-li">
      <div class="div1">div1</div>
      <div class="div2">div2</div>
      <div class="div3">div3</div>
    </li>
  </div>

  <div class="btn-container">
    <button class="Previous-btn" id="Previous-btn" onclick="clickPrevious()">Previous</button>

    <button class="slide-btn" id="slide-btn" onclick="clickNext()">next</button>

  </div>

</body>

</html>

回复 原文
新一帅帅 2025-02-15 18:55:36

您可以这样做，您必须进行一个运行时变量＆amp;更改其对OnClick功能的价值

let currentPageNum = 0;

function clickNext() {
  if(listItems.length-1 != currentPageNum){
    listItems[currentPageNum].style.display = "none";
    listItems[currentPageNum+1].style.display = "inline";
    currentPageNum = currentPageNum+1;
  }
}

function clickPrevious() {
  if(currentPageNum != 0){
    listItems[currentPageNum-1].style.display = "inline";
    listItems[currentPageNum].style.display = "none";
    currentPageNum = currentPageNum-1;
  }
}

you can do like this , you have to take one runtime variable & change it's value on onclick function

let currentPageNum = 0;

function clickNext() {
  if(listItems.length-1 != currentPageNum){
    listItems[currentPageNum].style.display = "none";
    listItems[currentPageNum+1].style.display = "inline";
    currentPageNum = currentPageNum+1;
  }
}

function clickPrevious() {
  if(currentPageNum != 0){
    listItems[currentPageNum-1].style.display = "inline";
    listItems[currentPageNum].style.display = "none";
    currentPageNum = currentPageNum-1;
  }
}
回复 原文
~没有更多了~

关于作者

醉酒的小男人

暂无简介

文章
评论
1052 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文