前端作业-图片轮播

        学完定时器就想来做一做，然而这个并不是我想象得这么简单，我以为在自动播放的基础上添加一个if条件即可，然而我基础不好，对于left和宽度的判断都不是很准确，写法也不规范，if判断老是失败，而且offseLeft的判断好像是实时的，这样我的想法更加实现不了了。于是找了个视频跟着做的，视频里还包括有点击圆点动画运动和图片自动轮播的功能，我就一并学习并写上了，下面含有代码注释（以防自己在忘掉。。。）

html代码

css代码

*{
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
#div1 {
	width: 400px;
	height: 400px;
	position: relative;
	margin: 150px 600px;
	overflow: hidden;
}
#div1 ul {
	width: 600%;
	position: absolute;
	left: 0;
	top: 0;
}
#div1 ul li {
	float: left;
	width: 400px;
	height: 400px;
}
#div1 ol {
	position: absolute;
	top: 375px;
	left: 10px;
	float: left;
}
ol li {
	float: left;
	background-color: white;
	margin: 0 6px;
	width: 8px;
	height: 8px;
	border-radius: 10px;
	cursor: pointer;
}
.current {
	background-color: #FF0000;
}
.arrow1,.arrow2 {
	display: none;
	z-index: 100;
	position: absolute;
	width: 50px;
	height: 50px;
}
.arrow1 {
	top: 200px;
	left: 0px;
	background:url(images/jiantou_zuo.png) no-repeat;
}
.arrow2 {
	top: 200px;
	left: 350px;
	background:url(images/jiantou_you.png) no-repeat;
}

js函数animate代码+js轮播实现代码

function animate (obj,target,callback){
	clearInterval(obj.timer);//避免开启太多的定时器使得动画效果异常
	obj.timer=setInterval(function(){
		var step=(target-obj.offsetLeft)/10;//缓动动画，运动快要结束的时候缓慢结束
		step=step>0?Math.ceil(step):Math.floor(step);//这样写向左移动还是向右移动就都适用了
		if(obj.offsetLeft==target){
			clearInterval(obj.timer);
			callback&&callback();//回调函数，运动函数实行完后，运行这个回调函数
		}
		obj.style.left=obj.offsetLeft+step+'px';
	},15);
}

window.addEventListener('load',function(){
	var arrow1=document.getElementById('arrow1');
	var arrow2=document.getElementById('arrow2');
	var oDiv=document.getElementById('div1');
	var num=0;
	var circle=0;
	//触摸显示箭头，鼠标离开箭头消失
	oDiv.onmouseover=function(){
		arrow1.style.display='block';
		arrow2.style.display='block';
		clearInterval(timer);//鼠标移入，图片自动轮播结束
		timer=null;
	}
	oDiv.onmouseout=function(){
		arrow1.style.display='none';
		arrow2.style.display='none';
		timer=setInterval(function(){
			arrow2.click();
		},2500)//鼠标离开，图片自动轮播再开始
	}
	var ol=document.getElementById('ol');
	var ul=document.getElementById('ul');
	var oDivwidth=oDiv.offsetWidth;
	//添加原点并实现排他思想
	for(var i=0;i

效果