轮播图初识
轮播图，图片旋转器，滑片，无论你怎么叫这玩意，它在网络上无处不在。轮播图在电商网站主页上广泛应用，大多数电商网站的主页上都有它的身影~ 前端玩家轮播图那必然是当家技能~
首先面对需求，我们需要了解轮播图应实现的功能：
基本功能
● 自动无缝滚动
● 左右按钮控制滚动
● 点击圆点切换图片
成品案列
鼠标未触及区域时（自动滚动中）
鼠标触及区域后 （停止滚动，显示按钮）
整体构想及思路
（1）Html部分
<body>
<div id= "parent">
<div id="uls">
<div class="ull">
<img src="dragon1.png" alt="">
<img src="mofang.jpg" alt="">
<img src="xingk.jpg" alt="">
<img src="yewan.jpg" alt="">
</div>
<ul id='litCir_ul'></ul>
</div>
<div id="buttons">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</body>
四个div，最外层id为parent的大div内包含了ull、uls和buttons三个div，divuls中包含了两个列表ull（图片列表）, litCir_ul（小圆点列表），buttons里则包含了“左”， “右”两个按钮
（2）CSS部分
#parent{
position: relative;
margin: 50px auto;
padding: 0;
width: 500px;
height: 309px;
}
#uls{
position: relative;
margin: 0;
padding: 0;
width: 500px;
height: 309px;
overflow: hidden;
}
#ull{
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 3000px; /*多留出一张图片的宽度！ img的宽度应为(图片数目+1）
*每张图片的宽度。也就是要多留出一张图片的宽度（下一部分解释）。*/
list-style: none;
}
img{
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 309px;
}
#litCir_ul{
position: absolute;
margin: 0;
padding: 0;
right: 10px;
bottom: 10px;
list-style: none;
}
#litCir_ul li{
margin: 0;
padding: 0;
float: left;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
margin-left:10px ;
cursor: pointer;
}
li.active{
background-color: white;
}
li.quiet{
background-color: #1e90ff;
}
#buttons{
margin: 0;
padding: 0;
display: none;
}
#buttons span{
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: Simsun;
font-size: 30px;
border: 1px solid #fff;
opacity: 0.3;
cursor: pointer;
color: #fff;
background: black;
}
#left{
left: 5px;
}
#right{
left: 100%;
margin-left: -45px;
}
img的宽度应为(图片数目+1）*每张图片的宽度。也就是要多留出一张图片的宽度（下一部分解释）。
div uls部分使用overflow:hidden隐藏img超出的部分，确保每次该区域只能显示一张完整的图片。
（3）JS 功能实现部分
step 1: 获取我们会用到的对象和变量
/*获取HTML中的对象: */
var parent = document.getElementById("parent");
var ull = document.getElementByTagname("img");
var litCir_ul = document.getElementById("litCir_ul");
var buttons = document.getElementById("buttons");
var cLis =litCir_ul.children;
var len = ull.children.length; //图片张数
var width = parent.offsetWidth; //每张图片的宽度
var rate = 15; //一张图片的切换速度， 单位为px
var times = 1; //切换速度的倍率
var gap = 2000; //自动切换间隙， 单位为毫秒
var timer = null; //初始化一个定时器
var picN = 0; //当前显示的图片下标
var cirN = 0; //当前显示图片的小圆点下标
var temp;
step2: 通过获取的元素来实现无缝滚动：
定义一个函数Roll()来实现动画效果。
通过控制img的left值来控制显示某张图片， 为了实现“滚动”的效果，我们需要逐渐改变img的left值，而不能直接使该值变化图片宽度的倍数。
function Roll(distance){ //参数distance：滚动的目标点（必为图片宽度的倍数）
clearInterval(img_ul.timer); //每次运行该函数必须清除之前的定时器！
var speed = ull.offsetLeft < distance ? rate : (0-rate); //判断图片移动的方向
img_ul.timer = setInterval(function(){ //设置定时器，每隔10毫秒，调用一次该匿名函数
ull.style.left = ull.offsetLeft + speed + "px"; //每一次调用滚动到的地方 (速度为 speed px/10 ms)
var leave = distance - ull.offsetLeft; //距目标点剩余的px值
/*接近目标点时的处理，滚动接近目标时直接到达， 避免rate值设置不当时不能完整显示图片*/
if (Math.abs(leave) <= Math.abs(speed)) {
clearInterval(img_ul.timer);
ull.style.left = distance + "px";
}
},10);
}
☆ 注意：当图片从最后一张切换到第一张时，这时就不能通过逐渐改变img的left值来实现滚动的效果，于是克隆第一张图片至列表尾部，当滚动完最后一张图片时，继续滚动到克隆的第一张，然后将u’ll【0】（即第一张图片）的left值置为0。
/*克隆第一个li到列表末*/
ull.appendChild(ull.children[0].cloneNode(true));
step3：动态添加图片上的小圆点
for (var i=0; i<len; i++){
var a_li = document.createElement("li");
a_li.className = 'quiet';
litCir_ul.appendChild(a_li);
}
litCir_ul.children[0].className = "active";
step4:实现自动滚动
☆ 注意：小圆点和图片列表的li数目是不一样的，当滚动到最后一个克隆项时，此时小圆点实际上在第一个位置。
开始自动滚动：
timer = setInterval(autoRun, gap);
function autoRun(){
picN++;
cirN++;
if(picN > len){ //滚动完克隆项后
img_ul.style.left = 0; //改变left至真正的第一项处
picN = 1; //从第二张开始显示
}
Roll(-picN*width);
if(cirN > len-1){ //判断是否到了最后一个圆点
cirN = 0;
}
for(var i=0; i<len; i++){
cLis[i].className = "quiet";
}
cLis[cirN].className = "active";
}
step5 :使得点击原点切换图片
给每个小圆点绑定了onmouseover事件，这个方法有个细节，会根据两次小圆点的距离差调整速率为rate*times，使切换效果更自然（也就是说每次切换说花的时间基本一致，无论是第一张到第二张，还是第一张到最后一张）
for(var i=0; i<len; i++){
cLis[i].index = i;
cLis[i].onmouseover = function(){
for(var j=0; j<len; j++){
cLis[j].className = "quiet";
}
this.className = "active";
temp = cirN;
picN = cirN = this.index;
times = Math.abs(this.index - temp); //距离上个小圆点的距离
rate = rate*times; //根据距离改变切换速率
Roll(-this.index * width);
rate = 15;
}
}
step6 :触及区域，清除定时器，显示按钮.离开区域，添加定时器，隐藏按钮。
parent.onmouseover = function(){
clearInterval(timer);
buttons.style.display = 'block';
}
parent.onmouseout = function(){
timer = setInterval(autoRun, gap);
buttons.style.display = 'none';
}
step 7 :给 “<” 和“ >” 两个按钮添加onclick事件
/*上一张*/
buttons.children[0].onclick = function(){
picN--;
cirN--;
if(picN < 0){ //滚动完第一项后
img_ul.style.left = -len*width + "px"; //改变left至克隆的第一项处
picN = cirN = len-1;
}
Roll(-picN*width);
//bug处理
if(cirN < 0){
cirN = len-1;
}
for(var i=0; i<len; i++){
cLis[i].className = "quiet";
}
cLis[cirN].className = "active";
}
/*下一张*/
buttons.children[1].onclick = autoRun;
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
