Question

我创建了一个幻灯片，看起来不错，但是很粗糙。

我使用了HTML，CSS和JavaScript。

我首先要添加一个交替的滑动动画。

定义：交替滑动动画

这意味着，如果我转到上一张幻灯片，它将从右向左过渡，但是如果我转到下一张幻灯片，它将从左向右过渡。

我尝试从Google获得帮助，但是答案没有道理。

我将展示整个粗糙的幻灯片显示代码：

基本的HTML结构：

<div id="slideShow">
     <div class="slideItem" style="background-image: url(img1.jpg);">
          <div>
               <h1>Item 1</h1>
               <p>Lorem ispum dorat... I don't know latin.</p>
          </div>
     </div>
     <div class="slideItem" style="background-image: url(img2.jpg);">
          <div>
               <h1>Item 2</h1>
               <p>Lorem ispum dorat... I don't know latin.</p>
          </div>
     </div>
     <div class="slideItem" style="background-image: url(img3.jpg);">
          <div>
               <h1>Item 3</h1>
               <p>Lorem ispum dorat... I don't know latin.</p>
          </div>
     </div>
     <img src="left.png" id="left" onclick="addIndex(false);" />
     <img src="right.png" id="right" onclick="addIndex(true);" />
</div>

div中id和slideShow的{{1}}只是所有项目的容器。

div中slideShow中的id中的所有slideItem是您看到的幻灯片项目。

我还在每个div内添加了slideItem来进行边距控制。

我为背景图像使用了单独的style元素，并在slideItem s中添加了一些文本。

最后两个img是在幻灯片之间滑动的按钮。这就是为什么他们有onclick事件。它们还具有id的{{1}}和left用于外部CSS样式。

样式，CSS：

right

首先，出于某些目的，例如将幻灯片放到窗口边缘，我使用* { margin: 0; word-wrap: break-word; } #slideShow div div, #slideShow div div * { margin: 8px; } #slideShow div { width: 100%; height: 15cm; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; filter: progoid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/ssimg1.jpg", sizingMethod="scale"); -ms-filter: progoid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/ssimg1.jpg", sizingMethod="scale"); } #slideShow div:not(:first-of-type) { display: none; } #slideShow #left, #slideShow #right { position: absolute; display: block; top: 50%; width: auto; margin-top: 1cm; padding: 5mm; transition: background-color 250ms; -webkit-transition: background-color 250ms; -moz-transition: background-color 250ms; -o-transition: background-color 250ms; } #slideShow #right { right: 0; } #slideShow #left:hover, #slideShow #right:hover { background-color: #000; cursor: pointer; }使用*清除了所有内容的边缘。

接下来，我将margin: 0的内容分配给每个margin: 8px内部的div和内部的slideItem，以使页边距恢复正常。

我设置了所有div的样式，使其全角，足够大，并修改了背景图片，使其在slideItem内全屏显示。

使用slideItem仅制作第一张幻灯片。我使用了display: none，因此除第一张幻灯片外，所有幻灯片都使用:not(:first-of-type)。

对于控制按钮，我使用了display: none以使它们不出现在底部，而使用position: absolute使其成为按钮状。

我用display: block将它们做成漂亮的大块。

我用其余的东西来调整控制按钮的位置，并为背景图像添加了padding: 5mm。

右按钮使用transition，因此它是右对齐而不是左对齐。

当鼠标在按钮上时，它们具有right: 0事件会变黑。我还添加了代码，将鼠标悬停在hover链接上时，将光标图像更改为您看到的任何图像。

最后，JavaScript：

1表示幻灯片的总数。值为totalSlides，但这意味着2。

首先，我添加3以显示第一张幻灯片。（我是在CSS上做到的，而且我知道！）

displayImage(imageIndex)函数根据其名为addIndex的参数（表示检查或对位）来更改索引（imageIndex的值）。

如果coo是coo，则它将添加索引，但是如果索引是true，则索引将下降。

代码包含false，因此幻灯片随索引一起变化。

您已经看到我多次提到displayIndex(imageIndex)。

displayIndex(imageIndex)是一项根据索引号显示幻灯片并隐藏所有其他幻灯片的功能。

向HTML，CSS，JavaScript幻灯片中添加交替滑动动画

0 个答案: