网页排版中，轮播图可以说很常见，轮播图种类有好几种，今天分享一下呼吸轮播图的制作过程。
效果展示
制作过程
html部分
HTML中的标签代码如下，包括左右按钮，5张图片以及5个小圆点。
<div class="carousel" id="carousel">
<div class="btns">
<a class="leftBtn" id="leftBtn"></a>
<a class="rightBtn" id="rightBtn"></a>
//这边对应两边按钮。
</div>
<div class="imageslist" id="imageslist">
<ul>
<li class="first"><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
//插入5张图片。
</ul>
</div>
<div class="circles" id="circles">
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
//这边是5个小圆点
</ol>
</div>
</div>
效果图如下：
image.png
css部分
css排版内容不难，代码就不多注释了。
*{
margin: 0;
padding: 0;
}
.carousel{
width: 560px;
height: 300px;
margin: 100px auto;
border: 1px solid #333;
position: relative;
}//大容器
.carousel ul{
list-style: none;
}
.carousel ul li{
position: absolute;
top: 0;
left: 0;
opacity: 0;
filter:alpha(opacity = 0);
}//设置所有图片的透明度设为0；
.carousel ul li.first{
opacity: 1;
filter:alpha(opacity = 100);
}//单独把第一张图片透明度调成1，这是初始状态。
.btns a{
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
background-color: orange;
font-size: 30px;
line-height: 40px;
text-align: center;
border-radius: 50%;
font-weight: bold;
cursor: pointer;
z-index: 999;
}//左右按钮。
.btns a:hover{
background-color: gold;
}
.leftBtn{
left: 10px;
}
.rightBtn{
right: 10px;
}
.circles{
position: absolute;
width: 150px;
height: 16px;
bottom: 10px;
right: 10px;
}
.circles ol{
list-style: none;
}
.circles ol li{
float: left;
width: 16px;
height: 16px;
background-color: orange;
margin-right: 6px;
border-radius: 50%;
cursor: pointer;
}//右下角圆点的样式。
.circles ol li.cur{
background-color: red;
}//当前圆点的颜色变红。
到这里所有的样式排版都已准备好，接下来就是重要的js实现动画的部分了。
js部分
js部分可以分为三个部分：自动呼吸轮播，左右按钮控制以及小圆点控制。
<script type="text/javascript" src="animate-2.0.1.js"></script>
//首先要用到事先准备的js动画库，主要功能是实现每张图片的淡入淡出的动画。
<script type="text/javascript">
var carousel = document.getElementById("carousel");//得到大容器
var lis = document.getElementById("imageslist").getElementsByTagName("li");//得到图片
var leftBtn = document.getElementById("leftBtn");
var rightBtn = document.getElementById("rightBtn");//得到左右按钮
var circlesLi = document.getElementById("circles").getElementsByTagName("li");//得到小圆点
var imgLength = lis.length;//图片数量
var width = 560;//图片宽度
var animatetime = 300;//滚动速度
var tween = "Linear";//缓冲描述，动画库里面一种缓冲方式，图片动画里面要用到。
var interval = 2000;//间隔时间
var idx = 0;//图片序号（信号量），这个很重要，是全局变量，3个轮播控制方式的连接点。
第一部分：自动轮播
首先写出图片切换到下一张的函数rightBtnHandler()。
function rightBtnHandler(){
if(lis[idx].isanimated) return;//函数截流
// isanimated是动画库里面设定的标记，判断当前是否在动画过程中，如果为true，说明它正在执行动画，那么这个函数就不会执行下去，这样就避免了图片还在动画中就狂点按钮造成的混乱。
animate(lis[idx],{"opacity" : 0},1000); //原来的信号量的图片淡出
idx++; //信号量改变
if(idx > imgLength - 1){
idx = 0;
}//新信号量的图片淡入
animate(lis[idx],{"opacity" : 1},1000);//下一信号量的图片淡入
changeCircle();//注意：此时也要改变右下角小圆点的变化，这个函数后面有介绍。
}
//自动轮播部分
var timer = setInterval(rightBtnHandler,interval)//rightBtnHandler是图片切换到下一张的函数。
//鼠标进入停止自动轮播。
carousel.onmouseover = function(){
clearInterval(timer);
}
//鼠标离开开始自动轮播。
carousel.onmouseout = function(){
timer = setInterval(rightBtnHandler,interval);
}
//按钮控制轮播
//右按钮的监听，点击时执行一次转到下一张图片的函数。
rightBtn.onclick = rightBtnHandler;
//左按钮的监听
leftBtn.onclick = function(){
if(lis[idx].isanimated) return;//函数截流
//原来的信号量的图片淡出
animate(lis[idx],{"opacity" : 0},1000);
//信号量改变
idx--;
if(idx < 0){
idx = imgLength - 1;
}
//新信号量的图片淡入
animate(lis[idx],{"opacity" : 1},1000);
changeCircle();//同时改变小圆点
}
//小圆点控制
//批量添加小圆点的监听
for(var i = 0 ; i <= imgLength - 1 ; i++){
circlesLi[i].index = i; //先编号
circlesLi[i].onclick = function(){
//截流
if(lis[idx].isanimated) return;//如果还在动画中，点击无效。
//原来的信号量的图片淡出
animate(lis[idx],{"opacity" : 0},1000);
//信号量改变
idx = this.index;
//新信号量的图片淡入
animate(lis[idx],{"opacity" : 1},1000);
changeCircle();//改变所有小圆点的样式
}
}
//更换小圆点函数
function changeCircle(){
//去掉所有小圆点的cur
for (var i = 0; i < circlesLi.length; i++) {
circlesLi[i].className = "";//所有小圆点样式恢复默认
}
//第信号量这个小圆点加cur
circlesLi[idx].className = "cur";//当前小圆点样式增加一个cur类别，让它变红色。
}
</script>
就这样，呼吸轮播图就大功告成了，js部分主要分成三部分来控制，还要注意的是图片的信号量是全局变量，三个部分共用一个信号量。
关于呼吸轮播图的制作分享到此，希望大家能够喜欢。
网友评论