轮播图是一种如此美丽的存
——来自一只小白的一次记录
··· 有人说，知道的越多，生活也就越没意思？就像你学了html/css/js等等以后，当你看到网页，你首先想到的是它的结构，用什么样的方法敲出来的，而不再是细细感受它的美，也就失去很多乐趣。我却不这样想。
··· 一直以来都觉得轮播图是一种多么美丽的存在，或清新或萌宠，总能一下子吸引到我。 学了几天轮播图，有点爱上它。有迷一样的自信觉得不久的将来自己也能写一波轮播图，让自己成为那种为创造美的并具有技能的人。未来也有曾经似我一般的迷妹迷弟深深迷恋我的作品（哇咔咔~）
···好了言归正传：
总体结构
首先是一个大的框架，用相对定位、绝对定位把它们的位置都固定下来，注意前后关系，可以在样式中设置z-index值
<div> 大的div
<div>左右按钮</div>
<div>图片</div>
<div>小圆圈</div>
</div>
这里要说一下，轮播图里主要用到的知识。
（1）动画：轮播主要肯定就是动，这里用到的是左右线性移动，可以通过数学公式控制，我们把动画过程封装成函数，操作起来就很方便了。
（2）定时器：用于自动轮播，想你在逛某宝首页的时候见得最多啦 不需要人为操作他会给你自动播放，时间多长你说了算。
（3）鼠标事件：实现鼠标点击，离开等等一系列操作时，页面按照你的想法来操作，比如某宝首页自动轮播你看到感兴趣的可以鼠标放上去让它停下，不想看了放开让它继续轮播等等。
各部分简单说明
1.主题图片
这是轮播图比较难也是最重要的部分，我们轮播的就是图片嘛。主要通过控制图片div的 left值，来移动，一次性移动的距离即一张图片的宽度。为了实现无缝轮播，我们会把最后一张克隆放到末尾。要注意，动画时间应该小于定时器的时间间隔，防止出现混轮，这又称为间歇轮播，有一个停顿的时间
2.左右按钮
实现点击事件，点击之后，先让原来的图片淡出，下一张图片淡入（淡入淡出用透明度控制），与此同时让小圆圈也左（右）移一个，实现同步。这里需要注意的是，点击之后先用函数截流做判断 如 if(lis[idx].isanimated) return; 防止出现混乱。
小圆圈
小圆圈的实现则通过遍历每一个 li 节点，每一次点击，先用排他模型，将所有的圆圈变暗，再将点击的圈圈变亮即可。这里我们通过css样式控制比较方便。在css中设置2个class名对应2种样式，一个隐藏，一个显示。排他的将class名更改就轻松很多啦。这里同样需要用函数截流。
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/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);
}
.carousel ul li.first{
opacity: 1;
filter:alpha(opacity = 0);
}
.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;
}
</style>
</head>
<body>
<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>
</ul>
</div>
<div class="circles" id="circles">
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<script type="text/javascript" src="animate-2.0.1.js"></script>
<script type="text/javascript">
//得到carousel
var carousel = document.getElementById("carousel");
//得到li
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;
//自动轮播
var timer = setInterval(rightBtnHandler,interval);
//鼠标进入停止
carousel.onmouseover = function(){
clearInterval(timer);
}
//鼠标离开开始
carousel.onmouseout = function(){
timer = setInterval(rightBtnHandler,interval);
}
//右按钮的监听
rightBtn.onclick = rightBtnHandler;
function rightBtnHandler(){
//函数截流
if(lis[idx].isanimated) return;
//原来的信号量的图片淡出
animate(lis[idx],{"opacity" : 0},1000);
//信号量改变
idx++;
if(idx > imgLength - 1){
idx = 0;//到最后一张（不包括克隆用于过渡的）时跳到第一张
}
//新信号量的图片淡入
animate(lis[idx],{"opacity" : 1},1000);
changeCircle();
}
//左按钮的监听
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 = "";
}
//第idx信号量这个小圆点加cur
circlesLi[idx].className = "cur";
}
</script>
</body>
</html>
是不是惊到了？小小的一组轮播图，居然要码这么多的代码 哈哈哈
这里也可以简化，把所以css代码也封装到css文件，那么代码可以简化。
说明：
连接css代码：
<link rel="stylesheet" type="text/css" href="allcss.css"></style>
连接js代码：
<script type="text/javascript" src="animate-2.0.1.js"></script>
<script type="text/javascript" src="all.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="allcss.css"></style>
</head>
<body>
<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>
</ul>
</div>
<div class="circles" id="circles">
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<script type="text/javascript" src="animate-2.0.1.js"></script>
<script type="text/javascript" src="all.js"></script>
</body>
</html>
这样看起来是不是简单多了？
把代码封装起来，方便管理维护，并且可以多次使用，多次使用时只需要加载一次。建立自己的一个代码库是我最近开始做，并且希望能坚持做下去的事情，用得多了，不就的将来也许就可以分分钟get的封装代码的技能！
I am coming!
网友评论