不使用js仅用CSS3能实现轮播图效果吗?

  • A+
所属分类:css3 技术文章

css3 中新增了很多有意思的功能,其中关键帧动画就是这样一个非常好用的功能。今天我就利用晚上的时间写一个纯css3实现的轮播图功能,拿出来供大家一起研究学习也希望大家批评指正。

首先我们需要一个div把所有的图片包裹在一起,然后把所有的图片横向排布,隐藏其溢出部分。对包裹图片的div做相对定位(position:relative;)。对所有的图片做绝对定位,这样我们就可以通过改变图片的左偏移量实现轮播的效果了。

html中所有图片布局结构:

<div class="wrap">    
    <ul class="images">
	<li><img src="images/1.jpg" alt="不使用js仅用CSS3能实现轮播图效果吗?" /></li>
	<li><img src="images/2.jpg" alt="不使用js仅用CSS3能实现轮播图效果吗?" /></li>
	<li><img src="images/3.jpg" alt="不使用js仅用CSS3能实现轮播图效果吗?" /></li>
	<li><img src="images/4.jpg" alt="不使用js仅用CSS3能实现轮播图效果吗?" /></li>
	<li><img src="images/5.jpg" alt="不使用js仅用CSS3能实现轮播图效果吗?" /></li>
	<li><img src="images/1.jpg" alt="不使用js仅用CSS3能实现轮播图效果吗?" /></li>    
    </ul>
</div>

这里图片的布局就是非常简单的一个轮播图常用的布局写法。不过在这里我想要先问一个问题: 为啥要把第一张图在最后又了添加了一遍呢? 当然这里肯定是没有写错的,但究竟是为什么呢?别急~~往后面看!

css对图片的样式定义:

.wrap {	
    width: 790px;	
    height: 340px;	
    margin: 20px auto;	
    border: solid 1px black;	
    position: relative;	
    overflow: hidden;
}
			
.wrap>ul {	
    margin: 0px;	
    padding: 0px;	
    list-style: none;	
    width: 4740px;	
    height: inherit;	
    position: absolute;	
    left: 0px;	
    -webkit-animation: image-auto-play 10s linear infinite;
}
			
.wrap > ul > li {	
    width: 790px;	
    float: left;	
    height: inherit;
}
			
.wrap ul img {	
    width: inherit;	
    height: inherit;	
    float: left;
}

图片轮播动画的定义

@-webkit-keyframes image-auto-play {
    0%,16.6% {left: 0px;}		
    20%,33.2% {left: -790px;}		
    36.6%,49.8% {left: -1580px;}	
    53.2%,66.4% {left: -2370px;}			
    69.8%,86% {left: -3160px;}			
    89.4%,100% {left: -3950px;}
}

轮播动画的实现原理是把图片的切换和等待看成是两个部分看待,把图片切换的时间设置的较短等待的时间设置的较长,这样就形成了我们所看到的轮播效果了。这里回答下为什么要把第一张图在最后又了添加了一遍呢的作用。

轮播中 图1->图2、图2->图3 、图3->图4 、图4->图5 这4个动画在切换过程中右边都是有图的所以会有从左往右的一个滑动效果。但 图5->图1 切换过程中图5和图1却不是连在一起的,会出现一个陡变的过程。所以我们需要把第一张图在最后多放一次。用图5->图6的切换动画当做是图5->图1的效果用。这里也就是为什么上面的动画是6个阶段而不是5个阶段的原因。

当前效果:

不使用js仅用CSS3能实现轮播图效果吗?

一般的轮播图下面都会用来显示当前图片是第几张的小圆点效果,用css3写的轮播图能实现同样的效果吗?答案是肯定的!我们现在就给它添加上一个这样的小圆点部分!

小圆点显示的HTML结构:

<div class="points">    
    <ul>
        <li class="item active"></li>
        <li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item active"></li>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>    
    </ul>
</div>

好的,这里再提一个问题:明明只有5张图需要显示为啥会有10个<li>的点呢?

小圆点css样式设置:

.points {	
    left: 50%;	
    width: 110px;	
    height: 12px;	
    bottom: 10px;	
    padding: 3px 5px;	
    margin-left: -55px;	
    position: absolute;	
    border-radius: 10px;	
    overflow: hidden;	
    background-color: hsla(0, 0%, 100%, .3);
}.points ul {	
    margin: 0px;	
    padding: 0px;	
    width: 220px;	
    list-style: none;	
    position: absolute;	
    top: 3px;	
    left: -105px;	
    -webkit-animation: points-animate 10s linear infinite;
}.points ul li {	
    float: left;	
    width: 12px;	
    height: 12px;	
    background-color: white;	
    border-radius: 50%;	margin: 0px 5px;
}.points ul li.active {	
    background-color: red;
}

点的动画效果样式:

@-webkit-keyframes points-animate {
    0%,16.6% {left: -105px;}			
    16.61%,33.2% {left: -83px;}
    33.21%,49.8% {left: -61px;}
    49.81%,66.4% {left: -39px;}
    66.41%,86% {left: -17px;}
    86.01%,100% {left: 5px;}
}

这里的动画实现原理与上面的相似,但是稍微有点不同的是点与点之间的切换动画部分的时间特别的短,这样就可以实现点与点之间的切换就不是滑动的效果而是切换的效果了。那为什么5张图需要10个<li>呢?好的,现在我把.points这个类的overflow:hidden注释掉看一下点的切换。

10个<li>的切换效果:

不使用js仅用CSS3能实现轮播图效果吗?

看明白了吗?利用这10个<li>我们可以很方便的实现利用小圆点表示当前显示的图片是第几张图片,再看一下最终效果图:

不使用js仅用CSS3能实现轮播图效果吗?

这个就是利用纯CSS3使用的轮播图效果的所有代码了。最后再留一个问题:

可以实现鼠标放到不同的点上显示不同图片的效果吗?答案是肯定的大家可以尝试着写一下看看

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: