jquery 幻灯片_制作不带jQuery的简单JavaScript幻灯片

最新推荐文章于 2021-08-23 21:13:57 发布

dingshi7798

最新推荐文章于 2021-08-23 21:13:57 发布

阅读量204

点赞数

文章标签： java python javascript css 人工智能 ViewUI

原文链接：https://www.sitepoint.com/make-a-simple-javascript-slideshow-without-jquery/

版权

jquery 幻灯片

本文由Dan Prince和Chris Perry进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！

“我只想制作一个没有jQuery的简单JavaScript幻灯片。”

幻灯片（也称为图像轮播，滑块或旋转的横幅）是学习JavaScript的人们普遍要求的教程。

在本教程中，我们将介绍以下主题：

制作基本的幻灯片演示，而无需使用jQuery之类的任何外部库
了解用户体验和可访问性问题，包括是否应该使用幻灯片放映
将控件添加到幻灯片中。

不为幻灯片显示使用库的主要好处是，由于减少了代码，页面的性能更好-而且您可以在任何地方使用幻灯片显示而不必担心加载任何额外的文件。

本教程假定您了解一些JavaScript，包括函数，单击事件和样式更改。对于发现有用的任何人，我已经写了一份快速路线图，其中列出了需要尽快学习使用JavaScript进行实际操作的知识。

制作基本幻灯片

HTML

对于HTML，我们需要一个幻灯片容器以及幻灯片本身。外观如下：

<ul id="slides">
    <li class="slide showing">Slide 1</li>
    <li class="slide">Slide 2</li>
    <li class="slide">Slide 3</li>
    <li class="slide">Slide 4</li>
    <li class="slide">Slide 5</li>
</ul>

CSS

核心CSS将需要完成以下任务：

为幻灯片定义一个容器
将幻灯片放在其容器中彼此顶部
定义幻灯片显示或隐藏时的外观
过渡不透明度以获得淡入淡出效果。

在查看CSS之前，请记住您可能需要更改类和ID名称，以避免在您自己的站点中发生冲突。本文中的名称被选择为简短易读。

以下是核心CSS的外观：

/*
essential styles:
these make the slideshow work
*/

#slides {
    position: relative;
    height: 300px;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.showing {
    opacity: 1;
    z-index: 2;
}

现在，您可以添加其他样式来更改幻灯片的外观。我在此演示中使用了以下内容：

/*
non-essential styles:
just for appearance; change whatever you want
*/

.slide {
    font-size: 40px;
    padding: 40px;
    box-sizing: border-box;
    background: #333;
    color: #fff;
}

.slide:nth-of-type(1) {
    background: red;
}
.slide:nth-of-type(2) {
    background: orange;
}
.slide:nth-of-type(3) {
    background: green;
}
.slide:nth-of-type(4) {
    background: blue;
}
.slide:nth-of-type(5) {
    background: purple;
}

JavaScript

JavaScript有一项工作：隐藏当前幻灯片并显示下一张。为此，我们只需要更改相关幻灯片的类别即可。

JavaScript的外观如下：

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}

让我们分解一下这里发生的事情。

首先，我们使用querySelectorAll从容器中获取幻灯片。
接下来，我们设置一个变量以跟踪当前幻灯片。
然后，我们将创建一个间隔，以每两秒显示一次下一张幻灯片（表示为2000毫秒）。

让我们更深入地了解nextSlide函数内部发生的情况：

首先，我们更改当前幻灯片的类，使其不显示。 CSS过渡会自动处理淡出。
然后，我们向当前幻灯片添加一个，但是如果到达幻灯片的末尾，我们将使用％运算符将其循环回到零。快速提醒一下，％运算符将两个数相除，然后将剩余的数除掉。这对于必须使用时钟或日历等周期进行数学运算的情况非常有用。在这种情况下，我们有5张幻灯片，所以每个数字都是这样：1％5 = 1、2％5 = 2、3％5 = 3、4％5 = 4和5％5 = 0。
获得新幻灯片的编号后，我们将更改该幻灯片的类，以便显示该幻灯片。再次，我们CSS不透明度过渡会自动处理淡入淡出效果。

恭喜！现在，您有一个基本的幻灯片放映。

相容性说明：
CSS过渡与IE9及以下版本不兼容，因此幻灯片将通过显示下一张幻灯片而优雅地降级，而不是使用淡入淡出效果。

这是实际的基本幻灯片演示：

请参阅CodePen上的SitePoint （ @SitePoint ）提供的不带jQuery的Pen Basic JavaScript幻灯片。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

UX和辅助功能

在使用幻灯片之前，请仔细考虑其在页面上的作用。让我们看看如果不小心，幻灯片放映会如何破坏用户体验和网站的可访问性。

幻灯片可以隐藏关键内容

如果您的网站上有优先事项，则不应将其隐藏在幻灯片中。在理想情况下，您不能依靠人们来查看给定的幻灯片，更不用说在可访问性问题发生时了。

根据圣母大学的研究，只有1.07％的人单击了幻灯片中的某个功能，而在已经很小的一部分人中，除第一个幻灯片之外，其他任何人都单击了3％或更少的幻灯片。本示例说明了依赖幻灯片放映关键内容可能有多么危险。

用户可能对网站的主要目的感到困惑

对于大型首页幻灯片放映尤其如此。 如果您不能决定向用户显示什么，您如何期望用户决定要做什么？ （鸣叫）

您的网站应该为用户需要做的事情提供一条清晰明了的路径，如果幻灯片显示妨碍了您，则可能是时候重新考虑页面的策略了。

转换优化公司WiderFunnel测试了幻灯片的有效性，得出以下结论：

我们已经对轮换要约进行了多次测试，发现轮换要约是呈现主页内容的一种较差的方式。

如果有机会，值得阅读有关其结果的详细记录。

移动用户可能不满意

幻灯片放映除了使控件变得棘手之外，还可以增加在移动设备上的加载时间和数据使用量。

何时使用幻灯片放映

所以，对于一个幻灯片可以引入潜在的问题，当可能是使用一个的好时机？这里有一些建议。

给人以一般印象

当您不在乎用户是否看到任何单独的幻灯片，而只是希望他们获得某物的一般视觉印象时，可以使用幻灯片放映。在这种情况下，如果用户仅看到一张幻灯片，则不会损失任何专业知识。

当内容易于在幻灯片外部访问时

例如，也许您想在幻灯片中显示度假村，博物馆，活动或产品系列的照片，但在站点中易于访问的其他位置也有完整的照片库或产品集。然后可以使用幻灯片放映。

在逐步增强的情况下

这比较笼统，但是如果您想将幻灯片放映作为对网站功能而言并不重要的整洁的视觉效果，则不会造成太多问题。只要这是一个整洁的额外功能，而不是关键的障碍，您就可以了。

辅助功能指针

如果幻灯片的内容足够重要，您需要使其可访问，那么请认真考虑是否要首先以幻灯片形式显示该内容。

如果您（或您的客户！）坚持使用幻灯片放映，那么这里有一篇很棒的文章，使它变得可访问。

根据该文章：

创建可访问性需要满足五项原则
幻灯片：

允许用户停止所有运动
提供键盘，鼠标和触摸可访问的可见控件
通过幻灯片提供有效且易于理解的焦点顺序
有效的编码和样式表
为幻灯片提供有意义的替代方法

另外，该文章中的评论者指出了一个有用的资源，用于决定是否使用幻灯片。

为了使幻灯片更易于访问，我们将添加一些控件。

将控件添加到幻灯片中

现在该添加“暂停/播放”按钮，“下一个”按钮和“上一个”按钮了。

暂停/播放按钮

首先，将按钮添加到HTML：

<button class="controls" id="pause">Pause</button>

接下来，将其添加到JavaScript：

var playing = true;
var pauseButton = document.getElementById('pause');

function pauseSlideshow() {
    pauseButton.innerHTML = 'Play';
    playing = false;
    clearInterval(slideInterval);
}

function playSlideshow() {
    pauseButton.innerHTML = 'Pause';
    playing = true;
    slideInterval = setInterval(nextSlide,2000);
}

pauseButton.onclick = function() {
    if(playing) {
    pauseSlideshow();
  } else {
    playSlideshow();
  }
};

这是脚本中发生的事情：

播放变量存储幻灯片是否正在播放。
我们将暂停按钮存储在变量中，因此我们无需继续在文档中搜索它。
pauseSlideshow功能可暂停幻灯片放映，并使“暂停”按钮改为“播放”。
playSlideshow功能可播放幻灯片，然后将“播放”按钮改为“暂停”。
最后，我们将附加一个单击处理程序，以便“暂停/播放”按钮将在暂停和播放之间切换幻灯片显示。

这是您的幻灯片与暂停按钮一起工作的方式：

请参阅CodePen上的SitePoint （ @SitePoint ）的带有暂停按钮的Pen JavaScript幻灯片。

下一个和上一个按钮

首先将“下一个”和“上一个”按钮添加到HTML：

<button class="controls" id="previous">Previous</button>
<button class="controls" id="next">Next</button>

对于您JavaScript，请更改此…

function nextSlide() {
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}

…对此：

function nextSlide() {
    goToSlide(currentSlide+1);
}

function previousSlide() {
    goToSlide(currentSlide-1);
}

function goToSlide(n) {
    slides[currentSlide].className = 'slide';
    currentSlide = (n+slides.length)%slides.length;
    slides[currentSlide].className = 'slide showing';
}

在上面的脚本中，我们添加了通用的goToSlide函数以提高灵活性。为了避免出现负数，我们还对currentSlide变量中的数学做了一些改动。要自己测试一下，请为slides.length选择一个数字，然后查看当n更改时currentSlide会发生什么。

现在添加此JavaScript，以使按钮在单击时发挥所需的作用：

var next = document.getElementById('next');
var previous = document.getElementById('previous');

next.onclick = function() {
    pauseSlideshow();
    nextSlide();
};
previous.onclick = function() {
    pauseSlideshow();
    previousSlide();
};

现在您有了工作控件！

幻灯片通过控件和一些附加样式的外观如下：

请参阅CodePen上带有SitePoint 控件的Pen JavaScript幻灯片（ @SitePoint ）。

请注意，当用户单击“下一个”或“上一个”时，我们将暂停幻灯片放映，以免自动播放妨碍用户的导航。

由于控件是HTML按钮，因此可以通过键盘自动访问它们。

只要控件清晰易用，就可以随意设置控件的样式和位置。

如果要添加左右箭头键盘控件（此处未提供），请确保在用户可能在其他地方使用箭头（例如，例如文本框）时关闭这些控件。

JavaScript不可用时的后备

有时候，JavaScript无法加载，关闭，设备不支持等等。理想情况下，即使在这些情况下，最终用户也将获得有用的东西。您如何处理幻灯片的后备情况将取决于您的目标。您可以只显示第一张图像，也可以显示列表中的所有图像。

如果幻灯片的主要目的是给某物一个大致的视觉印象，并且保留页面的布局比显示所有图片更重要，那么您将要显示第一张图像。

如果需要查看所有图像，则可以将其列出。

无论如何，我们将在这里介绍步骤。

当JavaScript不可用时隐藏控件

默认情况下，使用CSS隐藏控件。

.controls {
    display: none;
}

然后使用JavaScript显示控件。这样，用户仅在启用JavaScript的情况下才能看到控件。

var controls = document.querySelectorAll('.controls');
for(var i=0; i<controls.length; i++){
    controls[i].style.display = 'inline-block';
}

上面的代码循环遍历每个控件，并使它们全部可见。

当JavaScript不可用时列出幻灯片图像

首先从position: absolute;更改您的.slide类position: absolute; position: static; 。这样，幻灯片将默认列出。

然后添加JavaScript以遍历每张幻灯片并将其位置更改为绝对位置，如下所示（确保在定义slides变量之后放置此代码）：

for(var i=0; i<slides.length; i++) {
    slides[i].style.position = 'absolute';
}

这样，如果有JavaScript，就不会列出幻灯片。

结论

我们已经讨论了如何制作基本幻灯片，如何处理一些UX和可访问性问题以及如何添加控件。

最重要的要点是：每当您在页面上放置某些内容时，请考虑它如何影响用户的体验以及如何帮助实现网站的主要目标。如果没有明确的答案，也许是时候重新考虑了。

所以你怎么看？您有任何精彩的幻灯片演示故事吗？可怕的吗？有趣的？随时分享评论。

翻译自: https://www.sitepoint.com/make-a-simple-javascript-slideshow-without-jquery/

jquery 幻灯片

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 幻灯片_制作不带jQuery的简单JavaScript幻灯片

jquery 幻灯片本文由Dan Prince和Chris Perry进行了同行评审。感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！ “我只想制作一个没有jQuery的简单JavaScript幻灯片。” 幻灯片（也称为图像轮播，滑块或旋转的横幅）是学习JavaScript的人们普遍要求的教程。在本教程中，我们将介绍以下主题：制作基本的幻灯片演...
复制链接

扫一扫