使用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日

相关文章

  • CSS text-shadow属性

    CSS text-shadow属性 CSS text-shadow属性可以为文本添加阴影效果,使文本更加突出和美观。本攻略将详细讲解CSS text-shadow属性的语法、取值和示例说明。 1. 语法 CSS text-shadow属性的语法如下: text-shadow: h-shadow v-shadow blur color; 其中,h-shadow…

    css 2023年5月18日
    00
  • CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)

    CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果是一种常用的前端开发技巧。这里我们将介绍具体的操作步骤,包括: 引入阿里巴巴矢量库 选择合适的图标 添加样式到html元素上 下面展示两条具体的示例操作: 示例1:添加箭头图标 1. 引入阿里巴巴矢量库 在head标签中添加如下代码: <link rel="stylesheet&quot…

    css 2023年6月9日
    00
  • 小程序实现列表倒计时功能

    下面详细讲解“小程序实现列表倒计时功能”的完整攻略: 1. 分析需求 首先,我们需要分析需求。根据题目要求,我们需要为列表中的每个项添加倒计时功能。这个倒计时需要精确计算,每秒钟更新一次,直到倒计时结束。具体实现需要用到计时器,每秒钟减1的逻辑和重新渲染页面等功能。 2. 实现思路 实现思路如下: 获取列表中每个项的到期时间 计算当前时间距离到期时间的时间差…

    css 2023年6月10日
    00
  • js实现拖拽效果(构造函数)

    下面是JS实现拖拽效果(构造函数)的攻略: 1. 核心思路 实现拖拽效果,我们需要对拖拽目标元素进行事件监听和事件响应。具体来说,拖拽目标元素需要监听mousedown、mousemove、mouseup三个事件,并在mousedown事件发生时记录鼠标和元素的初始位置,mousemove事件发生时计算出新的目标位置,然后通过设置目标元素的style.lef…

    css 2023年6月10日
    00
  • css样式important规则的正确使用方式

    下面是“CSS样式important规则的正确使用方式”的完整攻略: 正确使用important规则 仅在必要时使用important规则 在开发网站时,有时可能会遇到无法通过其他方式覆盖特定CSS样式的情况。这时候可以考虑使用important规则来强制使用该样式。但是,important规则应该只在必要时使用。如果在大量使用important规则,将变得…

    css 2023年6月9日
    00
  • jquery实现无限分级横向导航菜单的方法

    本文将详细讲解如何使用jQuery实现无限分级横向导航菜单。 目录 准备工作 HTML结构 CSS样式 JavaScript代码 示例说明 准备工作 在开始实现无限分级横向导航菜单前,我们需要将jQuery库引入到我们的HTML文档中。具体操作如下: <script src="https://cdn.bootcss.com/jquery/3.…

    css 2023年6月11日
    00
  • DIV+CSS+JS不间断横向滚动实现代码

    DIV+CSS+JS不间断横向滚动实现代码的攻略分为以下几个步骤: HTML布局 首先需要使用div标签创建一个包含所有滚动内容的容器,并设置样式overflow: hidden;,让容器内容不可见。 <div class="scroll-container"> <div class="scroll-conte…

    css 2023年6月10日
    00
  • 基于Leaflet的VideoOverlay视频图层叠加实战教程

    下面我将详细讲解 “基于Leaflet的VideoOverlay视频图层叠加实战教程”, 首先我将通过以下标题来讲述: 一、前言 在本文中,我们将讲解如何使用基于Leaflet的VideoOverlay插件来创建可以叠加在地图上的视频图层。这些图层能够展示用于监控、导航、地理信息分析等方面的视觉数据。在本文中,我们将深入了解该插件的实现原理,并为您提供一些示…

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