最近想自己写下轮播图,在网上发现一个网友用CSS transition属性实现的轮播,赶脚超简单哦,自己学习了后整理如下。(找不到原网址了-.-...就不贴了...)
(如果不了解transition,先去这里(点我,点我)学习下)
思路
图片淡入淡出效果是不透明度(CSS opacity属性)的变换过程。举例,让图片淡出,就是图片的opacity
属性在一段时间内逐渐从1
变为0
,淡入呢,则是图片的opacity
属性在一段时间内逐渐从0
变为1
,用transition可以轻松实现啊。
我们设置图片的CSS样式如下,先不考虑布局和宽高这些。
img{
opacity: 0;
transition: opacity 1s;
}
img.active{
opacity: 1;
}
这段CSS能实现什么呢?
一开始,img
的opacity
为0
,所以我们看不见。如果我们用JS给img
加上active
类,img
的opacity
就要变成1
对吧,由于有transition
属性,所以要等1s
,opacity
才能完全变为1
,实现了淡入。
那淡出呢?你想下,等img
淡入完了之后,我又用JS删掉img
的active
类会怎么样?这时候img
的opacity
应该从1
变为0
对吧,又由于有transition
属性,所以opacity
要等1s
才能变为0
,这就实现了淡出。
JS的setInterval(code,millisec)
(点我学习该函数)可以每隔一段时间就执行指定代码。如果我每隔1s
就更改下img
的类名,如果有active
类就删掉,如果没有就加上,这样图片就不断地淡入 → 淡出 → 淡入 → 淡出。
怎么实现多张图片轮流淡入淡出呢?
你每次删掉当前图片的active
类(淡出),然后给下一张图片加上active
类(淡入),这样就实现了图片的切换。
剩下的就是每隔固定时间间隔,执行切换图片函数就行了。
先上两个效果图。
点我跳转CodePen看本文代码最终效果,打开可能有点慢,耐心等等。这个是图片自动轮播,也可以通过图片底部的页码选择图片。
点我跳转看稍微变动后的另一种效果(这是仿的京东首页轮播图效果,鼠标滑到图片上时会显示左右按钮框,点击左右按钮框也可实现图片切换。)
只有图片的轮播
HTML比较简单,就是一个<div>
里面扔三个<img>
(假设是三张轮播图哈)。第一张图片已经加上了active
类,这样网页加载的时候就会有图片,通过JS来添加active
类初始化比较慢,要等JS加载。
<div id="slideshow">
<!-- 插入轮播的图片们 -->
<img class="active" src="http://img.kumi.cn/photo/01/69/30/016930f03d2e34cc.jpg" />
<img src="http://image2.sina.com.cn/dongman/pic/chshidzrcji/U1595P55T4D115697F50DT20070406083109.jpeg" />
<img src="http://t1.mmonly.cc/uploads/tu/201602/198/qh1spjs3guk.jpg" />
</div>
CSS如下。设置好<div id="slideshow">
和<img>
的尺寸,让<img>
重叠在一起,并且opacity
为0
。而具有active
类的<img>
的opacity
为1
。当然,别忘了设置transition: opacity 1s linear;
。
*{
padding: 0;
margin: 0;
}
#slideshow{
width: 800px;
height: 350px;
margin: 0 auto; /*设置在页面水平居中*/
overflow: hidden;
position: relative;
}
#slideshow img{
width: 800px;
position: absolute; /*图片采取绝对定位,均位于左上角,重叠在一起*/
top: 0;
left: 0;
opacity: 0; /*初始不透明度为0,图片都看不见*/
transition: opacity 1s linear; /*--重点--定义一个关于透明度的transition*/
}
#slideshow img.active{
opacity: 1; /*有active类的图片不透明度为1,即显示图片*/
}
JS如下。在轮播函数slideshow()
里,定义了图片淡出函数slideOff()
,图片淡入函数slideOn()
和切换图片函数changeSlide()
。
//---------主角:轮播图函数-------------
function slideshow() {
var slideshow=document.getElementById("slideshow"),
imgs=slideshow.getElementsByTagName("img"), //得到图片们
current=0; //current为当前活跃的图片编号
function slideOff() {
imgs[current].className=""; //图片淡出
}
function slideOn() {
imgs[current].className="active"; //图片淡入
}
function changeSlide() { //切换图片的函数
slideOff(); //图片淡出
current++; //自增1
if(current>=3) current=0;
slideOn(); //图片淡入
}
//每2s调用changeSlide函数进行图片轮播
var slideon=setInterval(changeSlide,2000);
}
slideshow();
这里有个问题哦,轮播图一般鼠标移入图片后,轮播就停止了,当鼠标移出后,轮播又开始对吧。我们用JS的onmouseover
和onmouseout
来实现。
在JS的slideshow()
函数中加入以下代码即可。
slideshow.onmouseover=function () {
clearInterval(slideon); //当鼠标移入时清除轮播事件
}
slideshow.onmouseout=function () {
slideon=setInterval(changeSlide,2000); //当鼠标移出时重新开始轮播事件
}
具体效果见CodePen链接。
加上页码
恩,然后我们加上和每张图片相对应的页码,并实现鼠标移上去就会显示相应图片这个功能。
在HTML的<div id="slideshow">
中要添加如下。
<!-- 插入轮播的页码们 -->
<div>
<span class="active">1</span>
<span>2</span>
<span>3</span>
</div>
第一个<span>
我也是已经添加了active
类。
然后设置页码的样式,让它们位于图片的底部,一字排开。
/* 设置页码的样式 */
#slideshow div{
width: 100%;
position: absolute;
bottom: 10px;
text-align: center;
}
#slideshow span{
display: inline-block;
width: 25px;
line-height: 25px; /*当只有一行文本时height等于line-height*/
border-radius: 25px; /*设置页码为圆形*/
margin: 0 15px;
background: white;
font-size: 16px;
}
#slideshow span.active{
color: white;
background: #FFDD55;
}
在JS中,slideOff()
和slideOn()
函数都要更新下,因为淡入淡出时<span>
的类名也要进行变更。
function slideOff() {
imgs[current].className=""; //图片淡出
pages[current].className="";
}
function slideOn() {
imgs[current].className="active"; //图片淡入
pages[current].className="active";
}
再就是鼠标移入<span>
时,需要显示对应的图片对吧。我们先把当前图片淡出,然后得到当前<span>
对应的current
,再让图片淡入就好啦。
for(var i=0; i<pages.length; i++) { //定义鼠标移入和移出页码事件
pages[i].onmouseover=function(){
slideOff(); //图片淡出
current=this.innerHTML-1; //得到鼠标停留的页码对应的current
slideOn(); //图片淡出
}
}
具体效果见CodePen链接。
加上图片描述
描述文字我设成了横着进入横着出去效果。怎么实现的呢?有点像滑动式的轮播图其实。
文本我设成position: absolute;
,然后是不是可以通过更改left
值来进行横向移位呢,再结合transition
形成动画效果就好啦。
HTML需要增加如下。
<!-- 插入图片的描述们 -->
<p class="active">这是第一幅图片哈哈哈</p>
<p>这是第二幅图片咩</p>
<p>到第三幅了!</p>
对文本设置样式。注意看left
和transition
。left
为负值是什么意思呢?left
为0
就是紧挨着#slideshow
左侧对吧,为负的话就是继续往左移越过左侧啦。
/*-- 设置图片描述文本的样式 --*/
#slideshow p{
position: absolute;
top: 30px;
left: -400px; /*相对于轮播图左侧左移400px*/
line-height: 30px;
padding: 5px 30px;
font-size: 20px;
color: white;
background-color: rgba(100,100,100,0.6); /*用rgba设置一个带透明度的背景颜色*/
opacity: 0;
transition: all 0.5s;
}
#slideshow p.active{
left: 0;
opacity: 1;
}
JS很简单,更新下slideOff()
和slideOn()
函数。
function slideOff() {
imgs[current].className=""; //图片淡出
pages[current].className="";
descrips[current].className="";
}
function slideOn() {
imgs[current].className="active"; //图片淡入
pages[current].className="active";
descrips[current].className="active";
}
具体效果见CodePen链接。
还可以完善的几点
一是,轮播图一般是可以点的链接,所以<img>
应该是嵌套在<a>
里面的,这里我偷懒了。二是,当鼠标移到<span>
的文字上时,光标变成了工字型(cursor: text;
),因为光标是默认设置,在文本上时就变了,我们可以在<span>
的CSS中设置cursor: Default;
,这样就一直是普通的鼠标样式了。三是,<span>
的文字如果双击是可以选中的,比较丑,我们加上下面的代码让文本不能被选取就好了。
/*设置不能选择文本*/
-ms-user-select:none;/*IE10*/
-webkit-user-select:none;/*webkit浏览器*/
user-select:none;
完。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。