小贝子编程

使用JavaScript创建幻灯片



我目前正在处理一个小型web项目，该项目应该包含多个幻灯片。由于我以前从未真正使用过JavaScript，这比我希望的更难…

我从w3schools找到了这个相当简单的代码，我正在尝试实现它。遗憾的是，我面临着多个问题，我不知道如何解决：

一开始我在试页面上的第一个例子(https://www.w3schools.com/howto/howto_js_slideshow.asp)"幻灯片放映/旋转木马"。这很好，只是除非你点击上一个/下一个按钮，否则它不会显示任何内容。因此，如果我重新加载页面，幻灯片放映容器是空的，而不是显示第一张幻灯片。

现在我想在我的网页上放第二个Slider。在这里，我将JavaScript代码切换到w3schools的最后一个示例"多张幻灯片"。这里我遇到了和以前一样的问题：当刷新页面时，两个幻灯片都不会显示任何图像，除非你点击上一个/下一个按钮。此外，我想在每个幻灯片的底部添加点。遗憾的是，我不知道如何在JavaScript代码中添加点。

有人能帮我理解吗？非常高兴提前感谢您！！：(

第1版：我喜欢澄清：我不想要自动幻灯片放映。只有当我点击上一个/下一个按钮或点时，幻灯片本身才会发生变化。但问题是，当我第一次打开页面时，幻灯片显示什么都没有。默认情况下，我喜欢显示的第一张幻灯片。

第2版：我刚刚将我的JavaScript代码复制到html的底部(而不是extern script.js文件(，这解决了在重新构建页面时不显示第一张幻灯片的问题！但我仍然需要一些帮助来集成javascript代码中的点

我的代码：

/***************************************************************** SLIDESHOW **/
var slideIndex = [1,1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["slides1", "slides2"]
showSlides(0, 0);
showSlides(0, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "table";
}
*  { margin:0px; padding:0px; border:0px; box-sizing: border-box;}
html { width:100%; height:100%; }
body {
position:relative;
margin: 0px auto;
padding: 0px;
height: 100%;
width: 100%;
}
/****************************************************************** BASIC CSS */
body {
font-family:'Montserrat';
font-weight: 400;
font-size: 12px;
}
/** HEADINGS **/
h1,h2,h3,h4,h5,h6 {
font-family: 'Montserrat';
font-weight: normal;
position:    relative;
padding:  0 0 20px 0;
}
h1 { font-size: 33px; }
/** LAYOUT **/
.row:after {
content: "";
clear: both;
display:table;
}
[class*="col-"] {
float:left;
width:99.99999%;
height:100%;
}
@media (min-width:640px) {
.col-s-1{width:99.99999%;} .col-s-2{width:49.99999%;} .col-s-3{width:33.22222%;} .col-s-4{width:24.9999%;}
}
@media (min-width:800px) {
.col-m-1{width:99.99999%;} .col-m-2{width:49.99999%;} .col-m-3{width:33.22222%;} .col-m-4{width:24.9999%;}
}
@media (min-width:1024px) {
[class*="col-"] {height:100vh;}
.col-l-1{width:99.99999%;} .col-l-2{width:49.99999%;} .col-l-3{width:33.22222%;} .col-l-4{width:24.9999%;}
}
article {position:relative;padding:80px 70px;}
.center_wrapper {
display:table;
width:100%;
height:100%;
}
.center_box {
margin: 0px auto;
display: table-cell;
vertical-align: middle;
text-align:center;
}
/*************************************** SLIDER GENERAL **/
.slideshow-container {
width: 100%;
height: 100%;
position: relative;
}
.slides1 {
display: none;
width:100%;
height:100%;
}
/** NEXT, PREVIOUS AND DOTS **/
.prev, .next {
cursor: pointer;
position: absolute;
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;
text-decoration:none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/** 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}
}
/********************************************* SLIDER 1 **/
#BigSlider {
background-image: url('images/red.jpg'); 
background-color:red;
background-repeat: no-repeat;
background-attachment: fixed; 
background-position: center center; 
background-size: cover;
height:100vh;
width:100%;
}
/** DEPARTMENTS **/
.department {
width:300px;
margin: 0px auto;
}
.department>a {
color:#fff;
text-decoration:none;

}
.department>a>i {
font-size:60px;
margin-bottom:10px;
}
.department>a>h4 {
font-size:18px;
font-weight:bold;
}
.department>a>p {
font-size:14px;
text-align:left;
}
/********************************************* SLIDER 2 **/
/** EMPLOYEES **/
#Employees {
background-color:#222;
color:#fff;
}
#Employees>h1 {
color:#fff;
}
.employee_info {color:#fff;}
<div class="row">
<article id="BigSlider" class="col-l-1">                    
<div class="slideshow-container">
<div class="slides1 fade">
<div class="center_box">
<div class="department">
<a href="#">
<i class="far fa-envelope"></i>
<h4>HEADLINE1</h4>
<p>
Some Text here...
</p>
</a>
</div>

</div>
</div>
<div class="slides1 fade">
<div class="center_box">
<div class="department">
<a href="#">
<i class="fas fa-users"></i>
<h4>HEADLINE 2</h4>
<p>
Some Text here...
</p>
</a>
</div>
</div>
</div>
<div class="slides1 fade">
<div class="center_box">
<div class="department">
<a href="#">
<i class="fas fa-users"></i>
<h4>HEADLINE 3</h4>
<p>
Some Text here...
</p>
</a>
</div>
</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
<a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>   
</article>
</div>

<div class="row">
<article id="Employees" class="col-l-2">
<h1>HEADLINE HEADLINE HEADLINE</h1>
<div id="pic_box_mobile" class="slideshow-container">
<div class="slides2 fade">
<div class="center_box">
<div class="employee_info">
<h4>111NAME NAME</h4>
<h5>111POSITION</h5>
</div>
</div>
</div>
<div class="slides2 fade">
<div class="center_box">
<div class="employee_info">
<h4>222NAME NAME</h4>
<h5>222POSITION</h5>
</div>
</div>
</div>
<div class="slides2 fade">
<div class="center_box">
<div class="employee_info">
<h4>333NAME NAME</h4>
<h5>333POSITION</h5>
</div>
</div>
</div>
<div class="slides2 fade">
<div class="center_box">
<div class="employee_info">
<h4>444NAME NAME</h4>
<h5>444POSITION</h5>
</div>
</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a>
<a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>  
</article>
</div>

这里有一个转盘，可以在每页显示多个项目。

https://jsfiddle.net/rimika89/a9pqnv3f/1/

class Carousel {
constructor() {
this.currentPage = 1;
this.perPage = 2;
this.data = [];
this.getData();
//if (this.data) {
// this.displayData();
//}
document.querySelector(".right-arrow").addEventListener("click", (event) => {
event.preventDefault();
this.handleRightClick();
});
document.querySelector(".left-arrow").addEventListener("click", (event) => {
event.preventDefault();
this.handleLeftClick();
});
}
countTotalPages() {
let totalPages = Math.ceil(this.data.length / this.perPage);
return totalPages;
}
handleLeftClick() {
if (this.currentPage === 1) {
return;
}
this.currentPage--;
this.displayData();
}
handleRightClick() {
const totalPages = this.countTotalPages();
if (this.currentPage >= totalPages) {
return;
}
this.currentPage++;
this.displayData();
}
paginate() {
let startIndex = (this.currentPage - 1) * this.perPage;
let endIndex = (this.currentPage * this.perPage);
return this.data.slice(startIndex, endIndex);
}
displayData() {
if (this.data) {
const paginatedList = this.paginate();
document.querySelector('.carousel-wrapper').innerHTML = paginatedList !== '' ? paginatedList.map((item) => {
return `<div class="carousel-item" id=${item.id}>${item.data}</div>`;
}).join('') : '<div>No Data To show</div>';
document.querySelector(".current-page").innerHTML = this.currentPage;
document.querySelector(".total-pages").innerHTML = this.countTotalPages();
}
}
fetch() {
const data = [{
'id': '1',
'data': 'Data 1'
},
{
'id': '2',
'data': 'Data 2'
},
{
'id': '3',
'data': 'Data 3'
},
{
'id': '4',
'data': 'Data 4'
},
{
'id': '5',
'data': 'Data 5'
}
];
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(data);
}, 2000);
});
}
async getData() {
try {
const response = await this.fetch();
this.data = response;`enter code here`
this.displayData();
} catch (error) {
console.log('fetch failed', error);
}
}
}
let carousel = new Carousel();

你的答案在于问题本身。这是w3Schools的链接。

  • 底部有你需要的小圆点
  • 图像(幻灯片(也会自动滚动
  • 每次重新加载页面时，都会显示第一张幻灯片
  • 代码是w3Schools对初学者友好的，您不需要javascript知识就可以在您的网站中嵌入SlideShow
  • 幻灯片放映的更多技术术语是旋转木马

一切顺利：(

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium