<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 1200px;
height: 500px;
position: relative;
margin: 0 auto;
overflow: hidden;
border: 1px solid;
}
ul,ol{
list-style: none;
margin: 0;
padding: 0;
}
.box ul{
/* height: 500px;父元素有绝对浮动的话不用设高清除浮动 */
/*width: 1000000px;*/
position: absolute;
left: 0;
}
ul li{
width: 1200px;
height: 500px;
float: left;
}
.dot ol{
position:relative;
display: inline-block;
*display:inline;
*zoom:1;
z-index:1;
}
ol li{
width: 10px;
height: 10px;
border: 1px solid;
border-radius:50%;
float: left;
margin:0 10px ;
}
ol li.active{
background:black;
}
.dot{
width: 100%;
text-align: center;
position: absolute;
z-index:1;
bottom: 40px;
}
#prev,#next{
position: absolute;
height: 100px;
width:45px;
top: 200px;
outline:0;
border: 0;
opacity:.3;
filter:alpha(opacity=30);
z-index: 2;
}
.box #prev:hover,.box #next:hover{
opacity:.8;
filter:alpha(opacity=80);
}
.box #prev{
background: url(img/left.png) no-repeat;
}
.box #next{
right: 0;
background: url(img/right.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="img/1.png" alt=""></li>
<li><img src="img/2.png" alt=""></li>
<li><img src="img/3.png" alt=""></li>
<li><img src="img/4.png" alt=""></li>
<li><img src="img/5.png" alt=""></li>
</ul>
<div class="dot">
<ol></ol><!-- 里面的li不是固定的,要跟着上边的改变 -->
</div>
<button id="prev"></button>
<button id="next"></button>
</div>
<script>
/*
轮播里的核心是 下标
但是对应的DOM没有下标
可以使用count次数来表示对应下标
通过 -下标*宽度+"px" 设置ul的left值来达到显示对应页的目的
animate函数中有两个参数
第一个参数哪个对象动画
第二个参数为动画到的位置
只支持left值的动画
从0运动到-1200
animate(obj,-1200)
*/
var ul = document.getElementsByTagName('ul')[0];
var li = ul.children;//获取到所有的li
//深度复制克隆节点
var cLi = li[0].cloneNode(true);
ul.appendChild(cLi);
var LI_WIDTH = parseInt(getStyle(li[0]).width);
var LI_LENGTH = li.length;
//js设置ul的宽度 li的宽度 * li的数量
ul.style.width = LI_WIDTH * LI_LENGTH + "px";
//获取ol的宽度，给ol添加所需要的li
var ol=document.getElementsByTagName('ol')[0];
//创建文档碎片，减少回流和重绘
var fr=document.createDocumentFragment();
for(var i=0;i<LI_LENGTH-1;i++){
var xjli =document.createElement('li');
if(i==0){
xjli.className='active';
}
fr.appendChild(xjli);
xjli.index=i;
}
ol.appendChild(fr);
//封装一个函数
function disdot(index){
var lis=ol.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
if(lis[i].className=="active"){
lis[i].className="";
}
}
if(index==LI_LENGTH-1){
lis[0].className="active";
}else{
lis[index].className="active";
}
}
//时间委托冒泡
ol.onclick=function(e){
var e=e||window.event;
var target=e.target||e.srcElement;
if(target.nodeName=="LI"){
count=target.index;
animate(ul,-count* LI_WIDTH);
disdot(count);
}
}
//ul的left值计算公式 - 下标 * 宽度 + "px"
//给下一页按钮添加事件
var count = 0;
var next = document.getElementById('next');
var TIME = 2000;
next.t = setTimeout(function(){
next.click()
},TIME)
next.onclick = function(){
var _this = this;
clearTimeout(this.t);
// 判断count值是否在最后一页 length-1
if(count == LI_LENGTH - 1){
//如果条件成立，说明在最后一页
count = 0;
//立刻跳到第一页
// ul.style.left = -count * LI_WIDTH + "px";
ul.style.left = 0;
}
count++;
// ul.style.left = -count * LI_WIDTH + "px";
animate(ul,-count * LI_WIDTH,function(){
_this.t = setTimeout(function(){
next.click();
},TIME)
});
disdot(count);
}
//给上一页按钮添加事件
var prev = document.getElementById('prev');
prev.onclick = function(){
clearTimeout(next.t);
if(count == 0){
count = LI_LENGTH - 1;
ul.style.left = -count * LI_WIDTH + "px";
}
count--;
animate(ul,-count * LI_WIDTH,function(){
next.t = setTimeout(function(){
next.click();
},TIME)
});
disdot(count);
}
function getStyle(obj){
return getComputedStyle?getComputedStyle(obj,null) : obj.currentStyle;
}
function animate(obj,target,callback){
//type以后可以作为方位名词形参传比如把下面的left换成type就是这意思
clearInterval(obj.t);
//清除计时器事件防止点击两次产生两个计时器加快速度
obj.t = setInterval(function(){
var left = parseInt(getStyle(obj).left);
//获取当前left值记得转换类型消去px
if(target<left){
//这是向左走，点击下一页就是向左走后面才出来的
//step是负值-0.几的时候不会变成0,只有走完距离才会变成0
var step = Math.floor((target-left)/10);
//设置会变化的步长为剩下距离的十分之一floor是下舍入，返回小于或等于它的最小整数
}else{
//这是向右走，点击上一页就是向右走前面才出来的
//step是正值0.几的时候不会变成0,只有走完距离才会变成0
var step = Math.ceil((target-left)/10);
//设置会变化的步长为剩下距离的十分之一ceil是上舍入，返回大于或等于它的最小整数
}
obj.style.left = left + step + "px";
if(step==0){
//0判断是否到达
clearInterval(obj.t)
if(callback){
callback();
}
}
},16)
}
/*function animate(obj,target,type){
clearInterval(obj.t);
obj.t = setInterval(function(){
var left = parseInt(getStyle(obj).left);
var step = Math.ceil((target-left)/10);
if(Math.abs(step)<=1){
obj.style.left = target + "px";
clearInterval(obj.t)
}else{
obj.style.left = left + step + "px";
}
},16)
}
*/
</script>
</body>
</html>
浙公网安备 33010602011771号