纯js轮播（二）

最新推荐文章于 2024-10-31 22:54:55 发布

chenxin90111

最新推荐文章于 2024-10-31 22:54:55 发布

阅读量121

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3382800/blog/887857

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,ul,li {
				padding: 0;
				margin: 0;
			}
			.carouselBox {
				width: 512px;
				height: 384px;
				border: 3px solid black;
				margin: 0 auto;
				position: relative;
			}
			.carouselBox ul{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 10px;
				z-index: 2;
				overflow: hidden;
			}
			.carouselBox ul li{
				list-style: none;
				cursor: pointer;
				-moz-user-select: none;
				user-select: none;
				width: 18px;
				height: 18px;
				font-size: 14px;
				line-height: 18px;
				text-align: center;
				background: #ccc;
				float: left;
				margin: 2px;
			}
			.carouselBox ul li.selected{
				background: orange;
			}
			.carouselBox ul li.normal{
				background: #ccc;
			}
			button{
				position: absolute;
				top:50%;
				transform: translateY(-50%);
				font-size: 40px;
				font-weight: 200;
				opacity: 0;
			}
			button.show{
				opacity: .7;
			}
			.btnL{
				left:10px;
			}
			.btnR{
				right:10px;
			}
		</style>
	</head>
	<body>
		<div class="carouselBox" id="carouselBox">
			<img id="carouselImg" src="images/1.jpg" alt="" />
			<ul id="carouselBtn">
				<li class="selected">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
			<button class="btnL" id="btnL">&lt;</button>
			<button class="btnR" id="btnR">&gt;</button>
		</div>
		<script type="text/javascript">
			//获取轮播盒字元素节点
			var carouselBox = document.getElementById("carouselBox");
			//获取轮播图片节点
			var carouselImg = document.getElementById("carouselImg");
			//获取到所以轮播按钮节点
			var lis = document.getElementsByTagName("li");
			var len = lis.length;
			//左点击按钮
			var btnL = document.getElementById("btnL");
			//右点击按钮
			var btnR = document.getElementById("btnR");
			//定义默认图片
			var autoImg = 1;
			//定时器
			var time = null;
			//当前li下标值
			var currIndex = null;
			//调用自动轮播
			autoCarousel();
			//调用点击轮播
			clickCarousel();
			
			
			//自动轮播
			function autoCarousel () {
				time = setInterval(autoChange,1000);
			}
			//自动切换函数
			function autoChange () {
				//如果是最后一张变成第一张
				if (autoImg == 6) {
					autoImg = 1;
				} else{
					autoImg ++;
				}
				carouselImg.src = "images/"+autoImg+".jpg";
				
				//对应得按钮背景色改变
				bgChange(autoImg-1);
			}
			
			//背景色改变函数
			function bgChange (t) {
				
				for (var i = 0; i < len; i++) {
					if (i === t) {
						//如果是和当前图片对应得下标的li则改变背景 否则变为正常的
						lis[i].className = "selected";
					} else{
						lis[i].className = "normal";
					}
				}
			}
			
			//点击轮播
			function clickCarousel () {
				for (var i = 0; i < len; i++) {
					lis[i].onclick = function () {
						currIndex = getIndex(this);
						bgChange(currIndex);
						carouselImg.src = "images/"+(currIndex+1)+".jpg";
						autoImg = currIndex;
					}
				}
			}
			
			//获取到点击li的下标
			function getIndex (t) {
				//定义个标签
				var index = -1;
				for (var i = 0; i < len; i++ ) {
					//找到当前点击对象 并记录下标值
					if (lis[i] === t) {
						index = i;
						break;
					}
				}
				return index;
			}
			//鼠标移入的时候清楚定时器
			carouselBox.onmouseenter = function () {
				clearTimeout(time);
				btnL.className = "show btnL";
				btnR.className = "show btnR";
			}
			//鼠标移出继续轮播
			carouselBox.onmouseleave = function () {
				autoCarousel();
				btnL.className = "btnL";
				btnR.className = "btnR";
			}
			//左点击按钮事件
			btnL.onclick = function () {
				currIndex = autoImg;
				if (autoImg == 1) {
						autoImg = 6;
					} else{
						autoImg --;
					}
					carouselImg.src = "images/"+autoImg+".jpg";
					
					//对应得按钮背景色改变
					bgChange(autoImg-1);
			}
			//右按钮点击事件
			btnR.onclick = function () {
				currIndex = autoImg;
				autoChange();
			}
		</script>
	</body>
</html>

转载于:https://my.oschina.net/u/3382800/blog/887857