<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>讲解版的自动轮播（新手福利）</title>
<style>
/*现在来写样式*/
/*公共样式*/
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
/*底层样式*/
#det{
width: 100%;
background: #fff;
}
/*轮播的总的区域的样式*/
.banner{
width: 100%;
position: relative;/*轮播区域要给按钮定位，故此给它绝对定位*/
z-index:0;/*轮播区域按钮要在图片上，故此要分层*/
}
/*大图区域样式*/
#banner{
width: 100%;
height: 563px;/*根据自己的情况设置*/
margin: 0 auto;/*可有可无，习惯呆着*/
position: relative;/*大图区域要给每张图片定位，故此它绝对定位*/
overflow: hidden;/*图片超出隐藏，这个不用解释了吧*/
}
/*大图所在UL*/
#bannerimg{
width: 400%;/*banner全屏四张*/
height: 100%;/*高度适应父级高度*/
position: absolute;/*定位到左上角*/
left:0;
top:0;
}
/*每张大图*/
#bannerimg li{
float: left;/*浮动向左*/
width: 25%;/*宽为父级的25%*/
height:100%;/*高度适应父级高度*/
}
#bannerimg li img{
width: 100%;
height: 100%;
}
/*左边按钮*/
#bannerleft{
z-index: 10;/*在顶层，高于底层高于图片*/
position: absolute;/*相对于父级的绝对定位*/
left: 0;/*距离左边为0*/
top:50%;/*距离父级顶部为父级高度的50%*/
margin-top: -23px;/*再往上移动自身高度的一半，刚好居中*/
width: 25px;/*自身宽度*/
height: 46px;/*自身高度*/
background: rgba(0,0,0,0.4);/*背景颜色为40%透明度的黑色*/
border-radius: 5px;/*设置圆角*/
margin-left: 20px;/*再往右移动个20像素*/
padding: 20px 10px;/*通过内边距将左边按钮的箭头所在区域撑大*/
}
/*右边按钮（和左边设置相同，不过left换成right）*/
#bannerright{
z-index: 10;
position: absolute;
right:0;
top:50%;
margin-top: -23px;
width: 25px;
height: 46px;
margin-right: 20px;
padding: 20px 10px;
background: rgba(0,0,0,0.4);
border-radius: 5px;
}
/*左右按钮区域的箭头图片100%填充*/
#bannerleft img,#bannerright img{
width: 100%;
height: 100%;
}
/*底部小按钮所在区域*/
.smallbuttom{
position: absolute;/*相对于父级的绝对定位*/
bottom: 30px;/*距离父级的底部30像素*/
left: 50%;/*距离左边50%*/
width: 100px;/*设置自身宽度*/
margin-left: -50px;/*50%+“-自身宽度的一半”=相对于父级的绝对定位的居中*/
z-index: 10;/*和左右按钮在同一层，高于底层高于图片*/
}
/*底部小按钮的样式*/
#smallimg li{
float: left;/*浮动向左*/
padding: 6px;/*内边距6像素*/
border-radius: 50%;/*设置成为圆形*/
margin-left:3px;/*距离左边为3像素*/
}
.fff{
background:#fff;/*默认设置第一个为白色*/
}
.d6000f{
background:#d6000f;/*默认设置其他为红色*/
}
</style>
</head>
<body>
<!--通常写网站都有个banner轮播现在写个banner轮播-->
<!--写代码先给底层-->
<div id="det">
<!--轮播开始（这个区域包含左右按钮+大图区域+小按钮区域）-->
<div class="banner">
<!--这个是大图区域-->
<div id="banner">
<ul id="bannerimg">
<li class="i1"><a href="#"> <img src="http://pic.90sjimg.com/back_pic/00/00/52/00/444e0feebdb0040ff0f020c6a0954eb4.jpg" title="" alt=""/></a></li>
<li class="i1"><a href="#"> <img src="http://pic.90sjimg.com/back_pic/00/00/69/40/fee699a5cddea0d569dc996e097365d3.jpg" title="" alt=""/></a></li>
<li class="i1"><a href="#"> <img src="http://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/01/94/3776f58b6e6386fd60de8a349ec4b966.jpg" title="" alt=""/></a></li>
<li class="i1"><a href="#"> <img src="http://pic.90sjimg.com/back_pic/00/00/69/40/2c928e73f7aa4746b4600e3f0190e535.jpg" title="" alt=""/></a></li>
</ul>
</div>
<!--这个是左边按钮-->
<div id="bannerleft">
<img src="http://thumbnail0.baidupcs.com/thumbnail/9ec3636cd55b6ed532673a67425a4e15?fid=2838135596-250528-989737401132161&time=1481526000&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-QFOE4uMM6PWpnM8ej38bjGF7qF0%3d&expires=8h&chkbd=0&chkv=0&dp-logid=8039323154389339445&dp-callid=0&size=c10000_u10000&quality=90"/>
</div>
<!--这个是右边按钮-->
<div id="bannerright">
<img src="http://thumbnail0.baidupcs.com/thumbnail/d4bd30e50ed014d1c25d26c4a7c194fa?fid=2838135596-250528-813959071055462&time=1481526000&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-YsNe2xa%2bPelVK2rL8fozsDan4G0%3d&expires=8h&chkbd=0&chkv=0&dp-logid=8039323154389339445&dp-callid=0&size=c10000_u10000&quality=90"/>
</div>
<!--这个是地下的小按钮-->
<div class="smallbuttom">
<ul id="smallimg">
<li class="fff"></li>
<li class="d6000f"></li>
<li class="d6000f"></li>
<li class="d6000f"></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
/*加载完成后执行函数队列(封装一个加载完成后执行的函数)*/
function addLoadEvent(func) {
/*创建一个变量，接收加载完成*/
var oldonload = window.onload;
/* 判断如果检测到的类型不是是function，则将传的函数赋给加载完成后执行*/
if(typeof window.onload != 'function') {
window.onload = func;
} else {/*若是function，则先执行*/
window.onload = function(){
oldonload();
func();
}
}
}
/*看完上面的是不是迷迷糊糊的好吧，那用一句话来说就是：
*先用oldonload变量把现有的window.onload存下来
*然后应该先执行现有函数（oldonload）再执行自己的新的func
*或者也可以理解为:window.onload = function () {};
*/
/*第二个写运动函数（封装好的运动函数）*/
/*运动函数（传参数：元素，属性，结束位置）*/
function motion(obj, att, end) {
/*清除定时器*/
clearInterval(obj.time);
/*创建定时器*/
obj.time = setInterval(function() {
/*创建变量用来接收元素对应的值*/
var curr = 0;
var bStop = true;
/*判断属性为“opacity”时，利用getStyle函数获取元素的值，然后返回浮点数，再取整*/
if(att == 'opacity') {
curr = parseInt(parseFloat(getStyle(obj, att)));
} else {
/*直接获取值后取整*/
curr = parseInt(getStyle(obj, att));
}
/*声明变量seed接收速度，（结束位置-当前位置）/4，得到的速度为缓冲运动速度速度匀减速*/
var seed = (end-curr)/4;
/*解决不能到达目标的bug，速度>0时，上取整，速度小于0时下取整*/
seed = seed > 0 ? Math.ceil(seed) : Math.floor(seed);
/*如果达到终止位置则清除定时器*/
if( curr == end ) {
clearInterval(obj.time);
} else {
/*没有达到终点的话接着计算*/
/*如果样式为opacity则计算付样式得出结果除以10*/
if(att == 'opacity'){
obj.style.opacity = (seed + curr)/10;
} else {
/*其他样式直接计算，赋值*/
obj.style[att] = seed + curr + 'px';
}
}
},30);
}
/*通过属性获取元素对应的值*/
function getStyle(obj, att) {
/*获取外部（使用<link>）和内部（使用<style>）样式表中的样式（判断兼容IE）*/
if (obj.currentStyle) {
return obj.currentStyle[att];
} else {
return getComputedStyle(obj,false)[att];
}
}
/*banner轮播（创建banner轮播函数）*/
function banner() {
/*声明变量index*/
var index = 0;
/*声明变量接收大图所在区域*/
var banner = document.getElementById('banner');
/*声明变量接收左边按钮*/
var bannerleft = document.getElementById('bannerleft');
/*声明变量接收右边按钮*/
var bannerright = document.getElementById('bannerright');
/*声明变量接收大图所在ul*/
var bigimg = document.getElementById('bannerimg');
/*声明变量接收底部按钮所在ul*/
var smallimg = document.getElementById("smallimg");
/*声明变量接收大图所在的每个li*/
var bigimgli = bigimg.getElementsByTagName('li');
/*声明变量接收小按钮所在的每个li*/
var smallimgli = smallimg.getElementsByTagName('li');
/*点击按钮（小图）显示对应大图*/
/*因为大图和小按钮数量一致，故此用小的作为基准遍历*/
for(var i = 0;i < smallimgli.length;i++){
/*将当前索引值赋予小按钮对应的每个*/
smallimgli[i].index = i;
/*当点击当前按钮的时候:将当前的索引赋值给变量index并执行函数tab()*/
smallimgli[i].onclick = function() {
index = this.index;
tab();
}
}
/*鼠标悬停到大图所在区域停止运动，移开继续运动*/
var timer = setInterval(free, 3000);
banner.onmousemove = function() {
clearInterval(timer);
};
banner.onmouseout = function() {
timer = setInterval(free, 3000);
};
/*左右按钮点击事件*/
bannerleft.onclick = function() {
index--;
if (index == -1) {
index = smallimgli.length - 1;
}
tab();
};
bannerright.onclick = function() {
index++;
if (index == smallimgli.length) {
index = 0;
}
tab();
};
/*小图（小按钮）与大图（banner）联动*/
function tab() {
/*按钮自动运动对应样式*/
/*当前对应按钮添加一个内部样式为背景白色*/
smallimgli[index].style.background = '#fff';
/*声明一个变量来接收父节点*/
var par = smallimgli[index].parentNode;
/*通过父节点找到所有的子节点*/
var lis=par.children;
/*遍历同级包括自身的每个元素*/
for(var i=0;i<lis.length;i++){
/*判断同级下非本身的所有元素，给他添加一个样式为红色*/
if(lis[i]!=smallimgli[index]){
lis[i].style.background = "red";
}
}
/*传值给运动函数：大图所在ul,属性为left,终止位置为：-((index) * bigimgli[0].offsetWidth)
* 第一张：index=0,终止位置为0
* 第二张：index=1,终止位置为第一张图片的宽度即为：-100%
* 第三张：index=2,终止位置为第一张图片的宽度即为：-200%
* 第四张：index=3,终止位置为第一张图片的宽度即为：-300%
* */
motion(bigimg, 'left', -((index) * bigimgli[0].offsetWidth));
/*第一张*/
if (index == 0) {
motion(smallimg, 'left', 0);
}
/*第二张开始*/
else if (index == smallimgli.length - 1) {
motion(smallimg,'left', -((index-2) * smallimgli[0].offsetWidth));
}
/*最后一张*/
else {
motion(smallimg,'left', -((index-1) * smallimgli[0].offsetWidth));
}
}
/*图片自行运动函数*/
function free() {
/*index初始等于0，自动每次自加1*/
index++;
/*如果索引等于图片的数量的时候将0赋给它
* index=0,
* index=1,
* index=2,
* index=3,
* index=4=bigimgli.length--->index=0,
* index=2,
* ...
* */
if (index == bigimgli.length) {
index = 0;
}
tab();
}
}
/*调用函数addLoadEvent*/
addLoadEvent(banner);
</script>
</body>
</html>
