js之轮播图-CSDN博客

本文链接：https://blog.csdn.net/ITnainiu/article/details/105174237
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				border: 0;
			}
			.all{
				width: 500px;
				height: 300px;
				padding: 10px;
				border: 1px solid red;
				position: relative;
				margin: 0 auto;
			}
			.screen {
				width: 500px;
				height: 300px;
				overflow: hidden;
				position: relative;
			}
			.screen li{
				width: 500px;
				height: 300px;
				overflow: hidden;
				float: left;
			}
			.screen ul{
				position: absolute;
				left: 0;
				top: 0;
				width: 3000px;
			}
			/*  */
			.all ol{
				position: absolute;
				right: 50px;
				bottom: 10px;
				line-height: 30px;
				text-align: center;
			}
			.all ol li{
				float: left;
				width: 30px;
				height: 30px;
				background-color: aliceblue;
				border: 1px solid #FF0000;
				cursor: pointer;
			}
			.all ol li.current{
				background-color: bisque;
			}
			
			/* #arr{
				display: none;
				z-index: 100;
			} */
			#arr span{
				width: 40px;
				height: 40px;
				position: absolute;
				left: 15px;
				top: 50%;
				transform: translateY(-50%);
				background-color: black;
				cursor: pointer;
				line-height: 40px;
				text-align: center;
				font-weight: bold;
				font-family: "宋体";
				font-size: 30px;
				color: #FF0000;
				opacity: 0.5;
				border: 1px solid #fff;
			}
			#arr #right{
				right: 15px;
				left: auto;
			}
		</style>
	</head>
	<body>
		<div id="box" class="all">
			<div class="screen">
				<ul>
					<li>
						<img src="img/1.jpg" width="500px"  height="300px" alt="">
					</li>
					<li>
						<img src="img/2.jpg" width="500px"  height="300px" alt="">
					</li>
					<li>
						<img src="img/3.jpg" width="500px"  height="300px" alt="">
					</li>
					<li>
						<img src="img/4.jpg" width="500px"  height="300px" alt="">
					</li>
					<li>
						<img src="img/5.jpg" width="500px"  height="300px" alt="">
					</li>				
				</ul>
				<ol>
					<!-- <li class="current">1</li>
					<li>1</li>
					<li>1</li> -->
				</ol>				
			</div>
			<div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
		</div>
	</body>
	<script type="text/javascript">
		
		//1.获取元素当前位置
		// function getPage(e) {
		// 	var pageX = e.pageX || e.clientX + getScroll().scrollLeft; /* X滚动条 滚动距离*/
		// 	var pageY = e.pageY || e.clientY + getScroll().scrollTop; /* Y滚动条 滚动距离*/
		// 	return {
		// 		x: pageX,
		// 		y: pageY
		// 	}
		// }
		//2.滚动距离
		/* function getScroll() {
			var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
			var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
			return {
				scrollLeft: scrollLeft,
				scrollTop: scrollTop
			}
		} */
		
		
		//3.图片移动
		/* 
		 element : 哪个元素移动
		 target : 移动位置
		 */
		function animate(element, target) {
			if(element.timerId){
				clearInterval(element.timerId);
			}
			//每次移动步长
			var step = 10;
			//定时器timerId
			element.timerId = setInterval(function() {
				//获取当前元素位置
				var current = element.offsetLeft;
				// 当前位置 > 目标位置   -step
				// 当前位置 < 目标位置   +step
				if (current > target) {
					step = -Math.abs(step);
				}
				//步长过大
				if (Math.abs(current - target) < Math.abs(step)) {
					//清除定时器
					clearInterval(element.timerId);
					element.style.left = target + "px";
					return;
				}
				//一般情况 每次移动步长的距离
				current += step;
				element.style.left = current + "px";
			}, 5);
		}
		/* 设计 */
		// 获取所有元素
		var box = document.getElementById("box");
		var screen = box.children[0];
		var ul = screen.children[0];
		var ol = screen.children[1];
		//左右箭头
		var arr = document.getElementById("arr");
		var leftArr =  document.getElementById("left");
		var rightArr = document.getElementById("right");
		imgwidth = 500; 
		index = 0;
		// ol中li的数量 由 轮播图片的数量决定
		var count = ul.children.length;
		// 动态地创建ol中的<li></li>
		for(var i = 0; i < count ; i++){
			var li = document.createElement("li");
			ol.appendChild(li);
			li.innerText = i+1;
			li.index = i;
			// 点击变色
			ol.children[0].style.backgroundColor = "bisque";
			li.onclick = liClick;
		}
		function liClick(){
			//取消其他效果
			for(var i = 0; i < count ; i++){
				var li = ol.children[i];
				li.style.backgroundColor = "";
			}
			this.style.backgroundColor = "bisque";
			//切换图片
			animate(ul, -imgwidth*this.index)
			index = this.index;
		}
		var firstLi=ul.children[0];
		var cloneFirstLi=firstLi.cloneNode(true);
		ul.appendChild(cloneFirstLi);
		//右侧箭头
		rightArr.onclick=function(){
			if(index==count){
				index=0;
				ul.style.left="0px";
			}
			index++;
			if(index<count){
				ol.children[index].click();//li触发了单机事件
			}else{
				animate(ul, -imgwidth*index)
				//取消其他效果
				for(var i = 0; i < count ; i++){
					var li = ol.children[i];
					li.style.backgroundColor = "";
				}
				ol.children[0].style.backgroundColor = "bisque";
			}
		}
		//左侧箭头点击
		leftArr.onclick=function(){
			if(index==0){
				index=count;
				ul.style.left=-count*imgwidth+"px";
			}
			index--;
			if(index!=0){
				ol.children[index].click();
			}else{
				animate(ul, -imgwidth*index);
				for(var i = 0; i < count ; i++){
					var li = ol.children[i];
					li.style.backgroundColor = "";
				}
				ol.children[0].style.backgroundColor = "bisque";
			}
		}
		//自动滚动
		var timerId=setInterval(function(){
			rightArr.click();
		},5000)
		ul.onmouseover=function(){
			clearInterval(timerId);
		}
		ul.onmouseout=function(){
			timerId=setInterval(function(){
				rightArr.click();
			},2000)
		}
	</script>