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技术站