使用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-block 和 min-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 -= 1 和 slideIndex += 1 控制轮播项的切换，data-slide-to 用于标识轮播页码的位置。

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

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