使用html5+css3来实现slider切换效果告别javascript+css

HTML5 和 CSS3 的引入,使得在网页设计和建设方面有了很多新的特性和技术,可以实现更多的功能,slider 切换效果就是其中一个。下面是使用 HTML5 和 CSS3 来实现 slider 切换效果的完整攻略,其中包括两个示例:

一、基础版

1. HTML 结构

首先需要准备 HTML 代码,基础版的 HTML 代码如下:

<div class="slider">
  <ul class="slider-items">
    <li>
      <img src="http://lorempixel.com/800/400/food/" alt="">
      <div class="slider-caption">
        <h2>Slider 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </li>
    <li>
      <img src="http://lorempixel.com/800/400/sports/" alt="">
      <div class="slider-caption">
        <h2>Slider 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </li>
    <li>
      <img src="http://lorempixel.com/800/400/business/" alt="">
      <div class="slider-caption">
        <h2>Slider 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </li>
  </ul>
</div>

其中,.slider 是外层容器,.slider-items 是图片轮播列表,每个轮播项包含一张图片和文字描述。

2. CSS 样式

接下来需要添加 CSS 样式,使得轮播效果可以正常显示。基础版的 CSS 样式如下:

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: inline-block;
}

.slider-items li {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.4s ease-in-out;
}

.slider-items li:nth-child(1) {
  opacity: 1;
  z-index: 2;
}

.slider-items li.active {
  opacity: 1;
  z-index: 2;
}

.slider-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 20px;
  margin: 0;
  transition: bottom 0.4s ease-in-out;
}

.slider-caption h2 {
  font-size: 2rem;
  margin: 0 0 10px;
}

.slider-caption p {
  margin: 0;
}

.slider-items li.active .slider-caption {
  bottom: 0;
}

这里的样式主要是设置轮播的基本属性,包括轮播容器的宽度、轮播项的定位方式、轮播文字的位置、字体大小等。使用 transition 属性可以使得轮播效果呈现出来。

3. 添加 JavaScript

最后,需要添加一小段 JavaScript 代码,来控制轮播效果的展示和切换。基础版的 JavaScript 代码如下:

let slideIndex = 1;
showSlides(slideIndex);

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("slider-items")[0].getElementsByTagName("li");
  if (n > slides.length) { slideIndex = 1 }
  if (n < 1) { slideIndex = slides.length }
  for (i = 0; i < slides.length; i++) {
    slides[i].className = slides[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].className += " active";
  setTimeout(function () { showSlides(slideIndex += 1) }, 5000);
}

这段 JavaScript 代码的作用是,先隐藏所有的轮播项,再通过计时器定时切换轮播项的显示。

二、进阶版

基础版的轮播效果已经可以呈现出来了,但是为了增加一些特性和美观度,可以对轮播效果进行进一步的升级。下面是一个进阶版的示例:

1. HTML 结构

同样是需要先准备 HTML 代码,并且进阶版的 HTML 代码相对于基础版来说,更加复杂一些。示例的 HTML 代码如下:

<div class="slider">
  <ul class="slider-items">
    <li>
      <img src="http://lorempixel.com/800/400/food/" alt="">
      <div class="slider-caption">
        <h2>Slider 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </li>
    <li>
      <img src="http://lorempixel.com/800/400/sports/" alt="">
      <div class="slider-caption">
        <h2>Slider 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </li>
    <li>
      <img src="http://lorempixel.com/800/400/business/" alt="">
      <div class="slider-caption">
        <h2>Slider 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </li>
    <li>
      <img src="http://lorempixel.com/800/400/technics/" alt="">
      <div class="slider-caption">
        <h2>Slider 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </li>
  </ul>
  <div class="slider-controls">
    <a class="slider-controlprev" href="#">Prev</a>
    <a class="slider-controlnext" href="#">Next</a>
  </div>
  <div class="slider-pager"></div>
</div>

这里多了两个 div 元素,一个是轮播控制的 div 元素,另一个是轮播页码的 div 元素。

2. CSS 样式

然后设置 CSS 样式,进阶版的 CSS 样式与基础版差异不大,只需增加一些样式就行了,示例代码如下:

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: inline-block;
}

.slider-items {
  width: 400%;
  transition: all 0.4s ease-in-out;
}

.slider-items li {
  position: relative;
  display: inline-block;
  width: 25%;
  min-height: 400px;
}

.slider-items li img {
  max-width: 100%;
  display: block;
  height: auto;
}

.slider-items li .slider-caption {
  width: 80%;
  left: 10%;
  bottom: -80px;
  opacity: 0;
  transition: all 0.4s ease-in-out;
  position: absolute;
  text-align: center;
}

.slider-items li .slider-caption h2 {
  margin: 0 0 5px;
  font-size: 32px;
  color: #fff;
  text-shadow: none;
}

.slider-items li.active .slider-caption {
  opacity: 1;
  bottom: 20px;
}

.slider-items li:nth-child(1) {
  background: #c53929;
}

.slider-items li:nth-child(2) {
  background: #00897b;
}

.slider-items li:nth-child(3) {
  background: #6d4c41;
}

.slider-items li:nth-child(4) {
  background: #2e7d32;
}

.slider-controls {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  text-align: center;
  z-index: 10;
  transition: all 0.4s ease-in-out;
  padding: 20px;
}

.slider-controlprev,
.slider-controlnext {
  display: inline-block;
  background: rgba(255,255,255,0.7);
  color: #000;
  padding: 10px 20px;
  margin: 0 10px;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.4s ease-in-out;
  border-radius: 5px;
}

.slider-controlnext:hover,
.slider-controlprev:hover {
  background: #fff;
}

.slider-controlnext {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.slider-controlprev {
  position: absolute;
  left: 20px;
  bottom: 20px;
}

.slider-pager {
  text-align: center;
  position: absolute;
  bottom: 20px;
  left: 45%;
  transform: translateX(-50%);
}

.slider-pager a {
  display: inline-block;
  background: rgba(255,255,255,0.7);
  color: #000;
  width: 12px;
  height: 12px;
  margin: 0 10px;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.4s ease-in-out;
}

.slider-pager a.active,
.slider-pager a:hover {
  background: #fff;
}
.slider-pager a.active {
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

这里的主要区别是在轮播项的布局上,使用 display: inline-blockmin-height 实现等高布局,同时添加了轮播控制和轮播页码的样式。

3. 添加 JavaScript

最后,在进阶版的示例中需要添加更多的 JavaScript 代码,主要是实现轮播控制和轮播页码的功能。示例 JavaScript 代码如下:

let slideIndex = 1;
showSlides(slideIndex);

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("slider-items")[0].getElementsByTagName("li");
  let dots = document.getElementsByClassName("slider-pager")[0].getElementsByTagName("a");
  if (n > slides.length) { slideIndex = 1 }
  if (n < 1) { slideIndex = slides.length }
  for (i = 0; i < slides.length; i++) {
    slides[i].className = slides[i].className.replace(" active", "");
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].className += " active";
  dots[slideIndex - 1].className += " active";
}

document.getElementsByClassName("slider-controlprev")[0].onclick = function () {
  slideIndex -= 1;
  showSlides(slideIndex);
}

document.getElementsByClassName("slider-controlnext")[0].onclick = function () {
  slideIndex += 1;
  showSlides(slideIndex);
}

document.getElementsByClassName("slider-pager")[0].onclick = function (e) {
  if (e.target.tagName === "A") {
    let pagerIndex = parseInt(e.target.getAttribute("data-slide-to"));
    slideIndex = pagerIndex;
    showSlides(slideIndex);
  }
}

其中,showSlides 函数用于控制轮播效果,slideIndex 用于标识当前显示的轮播项,slideIndex -= 1slideIndex += 1 控制轮播项的切换,data-slide-to 用于标识轮播页码的位置。

以上就是使用 HTML5 和 CSS3 来实现 slider 切换效果的完整攻略,有了以上的示例代码,可以根据自己的需求来修改对应的属性和样式,来完成自己想要的轮播效果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:使用html5+css3来实现slider切换效果告别javascript+css - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • jQuery实现获取及设置CSS样式操作详解

    jQuery实现获取及设置CSS样式操作详解 获取CSS样式 可以使用jQuery的css()方法获取元素的CSS样式,语法如下: $(selector).css(property); 其中,selector为选择器,指定要获取样式的元素,property为CSS属性名称,表示要获取的样式属性。 示例1:获取元素高度 HTML代码: <div id=&…

    css 2023年6月9日
    00
  • Bootstrap组件(一)之菜单

    下面我将详细讲解Bootstrap组件中菜单的使用方法。 1. 菜单简介 Bootstrap菜单提供了一种创建导航列表的简单方法,菜单可以用于创建网站导航、页面标签、下拉列表等等。Bootstrap中的菜单通常使用无序列表(ul)和下拉列表(ul/ol)组成。 2. 静态菜单 静态菜单是最基本的菜单形式,不包括任何交互效果,只是将内容呈现出来。 2.1. 代…

    css 2023年6月10日
    00
  • 分享7个你可能不认识的CSS单位

    CSS 单位是指在 CSS 中用来表示长度、宽度、高度、字体大小等的单位。常见的 CSS 单位有 px、em、rem、vh、vw 等。除了这些常见的单位,还有一些不太常见的单位,本攻略将分享 7 个你可能不认识的 CSS 单位,包括基本概念、实现方法、注意事项和示例说明。 1. ch ch 是 CSS 中的一个相对单位,表示数字“0”的宽度。例如,如果字体大…

    css 2023年5月18日
    00
  • 详解CSS粘性定位 sticky

    详解CSS粘性定位 sticky 什么是粘性定位 sticky 粘性定位(sticky)是CSS定位(position)属性的一种值。 和相对定位(relative)、绝对定位(absolute)、固定定位(fixed)不同,粘性定位是一种比较特殊的定位方式,它介于相对定位和固定定位之间,可以理解为“相对于父容器定位,但是在滚动到预定位置时会固定在窗口中不滚…

    css 2023年6月9日
    00
  • css图标制作教程制作云图标

    下面我会详细讲解如何制作云图标的完整攻略,包含以下几个步骤: 1. 准备工作 在制作过程中,我们需要准备两个东西,一是云的SVG图标文件,二是实现动画效果的CSS代码: (1)SVG图标文件: 首先需要使用Adobe Illustrator或其他矢量图形编辑软件,设计并导出一个云的SVG图标文件,示例如下: <svg width="24px&…

    css 2023年6月10日
    00
  • 网页制作 css让页面居中对齐

    网页制作中让页面居中对齐常用的方法有以下几种: 1.使用margin属性实现居中对齐 将页面外层容器设置为绝对定位,然后利用margin属性进行居中对齐。 .container{ position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); } 可以通过设置容器的width、h…

    css 2023年6月9日
    00
  • CSS教程之CSS盒模型

    下面是关于“CSS盒模型”的完整攻略: 什么是CSS盒模型? 盒模型是一种在CSS中用来确定元素布局的框架。元素的盒子(box)由内容区域、内边距(padding)、边框(border)和外补白(margin)组成。CSS盒模型包括两种不同的结构:W3C盒模型和IE盒模型,其中W3C盒模型是CSS2.1所规定的标准盒模型,而IE盒模型则是在IE5及之前版本中…

    css 2023年6月9日
    00
  • table-cell完成左侧定宽,右侧定宽及左右定宽等布局的实现方法

    使用table-cell布局是一种简单而强大的网页布局技术,可以实现左侧定宽、右侧定宽以及左右都定宽的布局。以下是实现这些布局的步骤: 左侧定宽,右侧自适应布局 可以通过将左右两个区块设置为表格单元格,并使用CSS的width属性和display属性对区块进行设置。 HTML结构: <div class="container"&gt…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部