js实现轮播图效果

1.select.js文件

function $(select){
if (typeof select != 'string') {
console.log('传入的参数有误');			
return null;
}
var firstChar = select.charAt(0);
switch(firstChar){
case '#':
	return document.getElementById(select.substr(1));
break;
case '.':
	if (document.getElementsByClassName){
		return document.getElementsByClassName(select.substr(1));
	} else {
		var result = [];
		var allElemnts = document.getElementsByTagName('*');
		console.log(allElemnts);
		for (var i = 0; i < allElemnts.length; i++){
			var e = allElemnts[i];
			var className = e.className;
			var classArr = className.split(' ');
			for (var j = 0; j < classArr.length; j++){
				var c = classArr[j];
				if (c == select.substr(1)) {
					result.push(e);
					break;
				}
			}
		}
		return result;
	}
break;
default :
	return document.getElementsByTagName(select);
}
}

2.animate.js文件

function getStyle(element, styleName) {
if (element.currentStyle) {
   return element.currentStyle[styleName];
} else {
   return window.getComputedStyle(element, null)[styleName];
}
}

function animate(element, json, fun) {

clearInterval(element.timer);
var isStop = false;
element.timer = setInterval(function() {
   isStop = true;
   for (var key in json) {
       var target = json[key];

       var current;
       if (key == 'opacity') {
           //当动画的类型为透明度时  获取的值应该是浮点类型
           current = parseFloat(getStyle(element, key)) || 1;
       } else {
           //其他情况  用整数类型
           current = parseInt(getStyle(element, key)) || 0;
       }

       var step = (target - current) / 10;
       if (key != 'opacity') {
           step = step > 0 ? Math.ceil(step) : Math.floor(step);
       }
       current += step;


       if (key == 'opacity') {
           if (Math.abs(target - current) > 0.01) {
               isStop = false;
           } else {
               current = target;
           }

           element.style.opacity = current + '';
       } else {
           if (Math.abs(target - current) > Math.abs(step)) {
               isStop = false;
           } else {
               current = target;
           }
           if (key == 'zIndex') {
               element.style.zIndex = Math.round(current);
           } else {
               element.style[key] = current + 'px';
           }

       }


   }
   if (isStop) {
       clearInterval(element.timer);
       if (typeof fun == 'function') {
           fun();
       }
   }
}, 30);
}

3.demo.js文件

window.onload = function () {

	var box = $('.box')[0];	//父盒子
	var contentBox = $('.slider-content')[0];
	var controlBox = $('.slider-control')[0];
	var imageDivArr = contentBox.getElementsByTagName('div');
	console.log(imageDivArr);
	var currentIndex = 0;

	//盒子的宽度
	var boxWidth = box.offsetWidth;
	//动态创建下面的控制条
	for (var i = 0; i < imageDivArr.length; i++){
		var span = document.createElement('span');
		if (i == 0) {
			span.className =  'slider-control-bar current';
		} else {
			span.className = 'slider-control-bar';
		}
		//给span 加编号
		span.index = i;

		controlBox.appendChild(span);

		//控制条的点击事件
		span.onclick = function(){
			console.log(this);
			//如果当前点击的按钮  就是当前的按钮  则不作操作
			if (currentIndex != this.index) {

				//点击的图片，在当前图片的右边
				if (this.index > currentIndex){
					//当前图片左移
					animate(imageDivArr[currentIndex], {
						left : -boxWidth
					});
					//被点击的图片 先放到最右边，然后再左移
					currentIndex = this.index;
					imageDivArr[currentIndex].style.left = boxWidth; 


				} else {
					//点击的图片 在当前图片的左边
					//当前图片右移
					animate(imageDivArr[currentIndex], {
						left : boxWidth
					});


					//被点击的图片 先放到最左边，然后再右移
					currentIndex = this.index;
					imageDivArr[currentIndex].style.left = -boxWidth; 
				}
				animate(imageDivArr[currentIndex], {
					left : 0
				})
				//刷新控制条
				refreshControlBar();
			}

		};
	}

	// console.log(boxWidth);
	//当前第一个盒子放在left=0的位置， 其余所有盒子放在left=310的位置(右边)
	for (var i = 0; i < imageDivArr.length; i++){
		var imgDiv = imageDivArr[i];
		imgDiv.style.left = boxWidth + 'px';
	}
	imageDivArr[0].style.left = '0';

	// 第一个图片向左滑出  第二个图片从右边滑入
	// document.onclick = function (){
	// 	animate(imageDivArr[0], {
	// 		left : -310
	// 	});
	// 	animate(imageDivArr[1], {
	// 		left : 0
	// 	})

	// }

	// var currentIndex = 0;
	//自动显示下一个图片
	function nextImage(){
		//当前图片向左边滑出
		animate(imageDivArr[currentIndex], {
			left : -boxWidth
		});
		//下一个图片从右边滑入
		currentIndex++;
		if (currentIndex >= imageDivArr.length) {
			currentIndex = 0;
		}
		//先将下一个图片放到最右边
		imageDivArr[currentIndex].style.left = boxWidth + 'px';
		//向左移动的动画
		animate(imageDivArr[currentIndex], {
			left : 0
		});


		//刷新控制条显示
		refreshControlBar();
	}

	function prevImage(){
		//当前图片向右边滑出
		animate(imageDivArr[currentIndex], {
			left : boxWidth
		});
		//下一个图片从右边滑入
		currentIndex--;
		if (currentIndex < 0) {
			currentIndex = imageDivArr.length - 1;
		}
		//先将下一个图片放到最左边
		imageDivArr[currentIndex].style.left = -boxWidth + 'px';
		//向左移动的动画
		animate(imageDivArr[currentIndex], {
			left : 0
		});


		//刷新控制条显示
		refreshControlBar();
	}

	function refreshControlBar(){
		//刷新当前的控制条
		//所有控制条 取消current类
		for (var i = 0; i < controlBox.children.length; i++){
			var bar = controlBox.children[i];
			bar.className = 'slider-control-bar';
		}
		//当前的控制条添加current类
		controlBox.children[currentIndex].className = 'slider-control-bar current';
	}


	//通过左右按钮切换
	$('#next').onclick = nextImage;
	$('#prev').onclick = prevImage;



	//开启自动播放
	var timer = setInterval(nextImage ,5000);
	//当鼠标移动到轮播图中， 停止自动播放
	box.onmouseover = function (){
		clearInterval(timer);
	}
	//移出时，重新开始定时器
	box.onmouseout = function (){
		timer = setInterval(nextImage ,5000);	
	}

}

4. index.html文件

<!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>
 <title>轮播图</title>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <link rel="stylesheet" type="text/css" href="./main.css">
 <script type="text/javascript" src="./js/select.js"></script>
 <script type="text/javascript" src="./js/animate.js"></script>
 ,<script type="text/javascript" src="./demo.js"></script>
</head>
<body>
 <div class="box">
     <div class="content">
         <div><img src="./img/1.jpg" /></div>
         <div><img src="./img/2.jpg" /></div>
         <div><img src="./img/3.jpg" /></div>
         <div><img src="./img/4.jpg" /></div>
         <div><img src="./img/5.jpg" /></div>
         <div><img src="./img/6.jpg" /></div>
         <div><img src="./img/7.jpg" /></div>
     </div>
     <div class="slide"></div>
     <span id="s1"></span>
     <span id="s2"></span>
 </div>
</body>

</html>

5.main.css文件

*{margin: 0;padding: 0;}
.box{
	width: 310px;
	height: 250px;
	overflow: hidden;
	position: relative;
	margin: 100px auto;
}
.content{
	width: 310px;
	height: 220px;
	overflow: hidden;
	position: relative;
}
.content div{
	width: 310px;
	height: 220px;
	position: absolute;
	left: 0;
	top: 0;
}
.content div img{
	width: 100%;
}
#s1,#s2{
	width: 20px;
	height: 34px;
	display:inline-block;
	position: absolute;
	top: 50%;
	margin-top:-17px; 
}
.box span#s1 {
	background:url(./img/icon.png) no-repeat;
	left: 3px;
}
.box span#s2 {
	background:url(./img/icon.png) -9px -45px no-repeat;
	right: 3px;
}



.box .slide{
	width: 310px;
	height: 30px;
	text-align: center;
}
.box .slide .span{	
	display: inline-block;
	width: 24px;
	height: 5px;
	margin: 12px 5px 0 5px;
	cursor:pointer; 
	background:url(./img/icon.png) -24px -790px no-repeat;
}
.box .slide .span:hover{
	background:url(./img/icon.png) -24px -770px no-repeat;
}
.box .slide .span.active{
	background:url(./img/icon.png)  0 -770px no-repeat;
}