js 实现轮播图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style type="text/css">
		* {
			margin:0;
			padding:0;
		}
		body {
			background:#ccc;
			overflow:hidden;
		}
		#carousel {
			width:800px;
			height:400px;
			margin:25px auto;
			position:relative;
			border:1px solid #fff;
			border-radius:5px;
			cursor:pointer;
			overflow:hidden;
		}
		#carousel ul {
			width:100%;
			height:100%;
		}
		#carousel ul li {
			display:block;
			width:100%;
			height:100%;
			list-style:none;
			position:absolute;
			top:0px;
			left:0px;
		}
		#carousel ul li:nth-child(1) {
			background:#F5F5DC;
		}
		#carousel ul li:nth-child(2) {
			background:	#F8F8FF;
		}
		#carousel ul li:nth-child(3) {
			background:	#E0FFFF;
		}
		#carousel ul li:nth-child(4) {
			background:#AFEEEE;
		}
		#carousel ul li:nth-child(5) {
			background:#98FB98;
		}
		/*#carousel ul li img {
			width:100%;
			height:100%;
		}*/
		#carousel .btnleft, #carousel .btnright {
			width:55px;
			height:80px;
			font-size:50px;
			line-height:80px;
			font-weight:bold;
			font-family:"楷体";
			text-align:center;
			cursor:pointer;
			border-radius:5px;
			outline:none;
			border:0px;
			box-shadow:0 0 55px 0 rgba(0,0,0,.6) inset;
			position:absolute;
			top:160px;
			z-index:20;
			opacity:0;
			transition:all .5s linear;
			-webkit-transition:all .5s linear;
		}
		#carousel .btnleft {
			left:15px;
		}
		#carousel .btnright {
			right:15px;
		}
		#carousel .btnleft:hover, #carousel .btnright:hover {
			color:#fff;
			box-shadow:0 0 55px 0px rgba(100,100,255,1) inset;
		}
		#carousel:hover .btnleft , #carousel:hover .btnright {
			opacity:1;
		}
		#carousel .btnpage {
			width:100%;
			height:20px;
			position:absolute;
			bottom:15px;
			z-index:20;
		}
		#carousel .btnpage > div {
			width:160px;
			height:22px;
			margin:0px auto;
		}
		#carousel .btnpage span {
			display:inline-block;
			float:left;
			width:22px;
			line-height:22px;
			margin:0px 5px;
			font-size:15px;
			font-weight:bold;
			font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
			text-align:center;
			border-radius:2px;
			box-shadow:0 0 20px 0 rgba(0,0,0,1) inset;
			cursor:pointer;
			transition:all .2s linear;
			-webkit-transition:all .2s linear;
		}
		#carousel .btnpage span:hover {
			box-shadow:0 0 25px 0 rgba(0,0,255,1) inset;
			color:#fff;
		}
		#carousel .btnpage .btnnow {
			box-shadow:0 0 25px 0 rgba(0,0,255,1) inset;
			color:#fff;
			transition:all 1.5s linear;
			-webkit-transition:all 1.5s linear;
		}
		#carousel .btnpage .btnnow:hover {
			box-shadow:0 0 25px 0 rgba(0,0,255,1) inset;
			color:#fff;
		}
	</style>
</head>
<body>
	<div id="carousel">
		<ul id="carUl">
			<li><a href="#"><img src="" alt="">1</a></li>
			<li><a href="#"><img src="" alt="">2</a></li>
			<li><a href="#"><img src="" alt="">3</a></li>
			<li><a href="#"><img src="" alt="">4</a></li>
			<li><a href="#"><img src="" alt="">5</a></li>
		</ul>
		<!-- 左按钮 -->
		<input class="btnleft" id="carBtnLeft" type="button" value="&lt;" onclick="carBtnLeft()" />
		<!-- 右按钮 -->
		<input class="btnright" id="carBtnRight" type="button" value="&gt;" onclick="carBtnRight()" />
		<!-- 数字按钮 -->
		<div class="btnpage" id="carBtnPage">
			<div>
				<span class="btnnow">1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
				<span>5</span>
			</div>
		</div>
	</div>
	<script type="text/javascript">	
		var $carousel = document.getElementById("carousel");//轮播框
		var $carBtnLeft = document.getElementById("carBtnLeft");//左按钮
		var $carBtnRight = document.getElementById("carBtnRight");//右按钮
		var $carBtnPage = document.getElementById("carBtnPage");//数字按钮框
		var $carBtnPages = $carBtnPage.getElementsByTagName("span");//数字按钮
		var $carUl = document.getElementById("carUl");//ul
		var $carLis = $carUl.getElementsByTagName("li");//li
		var lislength = $carLis.length; //li个数
		var carWidth = Number($carUl.offsetWidth);//轮播框宽度
		var nowindex = 0;//当前的下标
		var quondamindex = nowindex;//原来的下标
		

		window.onload = function(){
			//初始化样式
			$carLis[0].style.left = 0+"px";
			for(var i=1;i<lislength;i++) {
				$carLis[i].style.left = carWidth+"px";
			}

			timerFn();//自动轮播
			setCarouselListener();//轮播框监听器
			setPageListener();//数字按钮监听器
		}

		//添加数字按钮监听器 (carBtnPage)
		function setPageListener() {
			if($carBtnPage.addEventListener){//DOM
				$carBtnPage.addEventListener("click",setPageEvent,false);
			}
			if($carBtnPage.attachEvent){//IE
				$carBtnPage.attachEvent("onclick",setPageEvent);
			}
		}
		var setPageEvent = function(ev) {//event事件对象
			if(window.event) {//IE
				carBtnPage(Number(window.event.srcElement.innerHTML)-1);
			}
			else {//DOM
				carBtnPage(Number(ev.target.innerHTML)-1);
			}
		}
		//分离 数字按钮监听器
		function clearPageListener() {
			if($carBtnPage.removeEventListener){//DOM
				$carBtnPage.removeEventListener("click",setPageEvent,false);
			}
			if($carBtnPage.detachEvent){//IE
				$carBtnPage.detachEvent("onclick",setPageEvent);
			}
		}

		//左按钮
		var carBtnLeft = function() {
			clearBtn();
			quondamindex = nowindex;
			nowindex--;
			if(nowindex<0) {
				nowindex = lislength-1;
			}
			executeMover(-carWidth);

			//alert("左");
		}
		//右按钮
		var carBtnRight = function() {
			clearBtn();
			quondamindex = nowindex;
			nowindex++;
			if(nowindex>=lislength) {
				nowindex = 0;
			}
			executeMover(carWidth);
			//alert("右");
		}
		//数字按钮
		function carBtnPage(index) {
			clearBtn();
			quondamindex = nowindex;
			nowindex = index;
			if(index>quondamindex){
				executeMover(carWidth);
			}
			if(index<quondamindex) {
				executeMover(-carWidth);
			}
		}
		//执行动画
		function executeMover(num) {
			
			if(num==null) {num = 0;}
			$carLis[nowindex].style.left = num+"px";
			$carBtnPages[quondamindex].className = "";
			$carBtnPages[nowindex].className = "btnnow";

			startMover();//开始执行动画

		}
		//js匀速动画
		var timer = null;
		var sumPx= 0;//移动的总距离
		var spellPx = 2;//每秒移动几px

		function startMover(){
			clearInterval(timer);//清除上次为完成的动画

			var oldEle = $carLis[quondamindex];//原来的li节点
			var nowEle = $carLis[nowindex];//现在的li

			timer = setInterval(function(){
				var speed = 0;
				if(nowEle.offsetLeft > sumPx){
					speed = -spellPx;
				}
				else {
					speed = spellPx;
				}
				if(nowEle.offsetLeft == sumPx){
					clearInterval(timer);//清除本次动画
					//动画结束后对齐
					var lsnum = carWidth-(2*carWidth);
					if(oldEle.style.left > sumPx) {
						lsnum = sumPx+carWidth;
					}
					oldEle.style.left = lsnum+"px";
				}
				else{
					nowEle.style.left = nowEle.offsetLeft+speed+'px';
					oldEle.style.left = oldEle.offsetLeft+speed+'px';
				}
			},1);
		}
		//让按钮失效会
		function clearBtn() {
			$carBtnLeft.disabled = true;
			$carBtnRight.disabled = true;
			clearPageListener();//分离数字按钮监听
			var lstimerId = setInterval(function() {
				clearInterval(lstimerId);
				$carBtnLeft.disabled = false;
				$carBtnRight.disabled = false;
				setPageListener();
			},2000);
		}

		//定时器 自动轮播
		var timerId = null;
		function timerFn() {
			timerId = setInterval(function () {
				carBtnRight();
			}, 5000);
		}
		//轮播框监听器
		function setCarouselListener() {
			if($carousel.addEventListener){//DOM	
				$carousel.addEventListener("mouseover",function(ev){//移入
					clearInterval(timerId);
				},true);
				$carousel.addEventListener("mouseout",function(ev){//移出
					timerFn();
				},true);
			}
			if($carousel.attachEvent){//IE	
				$carousel.attachEvent("onmouseover",function(){//移入
					clearInterval(timerId);
				});	
				$carousel.attachEvent("onmouseout",function(){//移出
					timerFn();
				});
			}
		}
	</script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » js 实现轮播图

赞 (1)
分享到:更多 ()

发表评论 0