js无缝轮播

最新推荐文章于 2024-08-21 14:09:37 发布

YuaKeNG

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量88

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/Yuake2/article/details/105220073

版权

<style>
			* {
				padding: 0;
				margin: 0;
				list-style: none;
				border: 0;
			}

			.all {
				width: 500px;
				height: 200px;
				padding: 7px;
				border: 1px solid #ccc;
				margin: 100px auto;
				position: relative;
			}

			.screen {
				width: 500px;
				height: 200px;
				overflow: hidden;
				position: relative;
			}

			.screen li {
				width: 500px;
				height: 200px;
				overflow: hidden;
				float: left;
			}

			.screen ul {
				position: absolute;
				left: 0;
				top: 0px;
				width: 3000px;
			}

			.all ol {
				position: absolute;
				right: 10px;
				bottom: 10px;
				line-height: 20px;
				text-align: center;
			}

			.all ol li {
				float: left;
				width: 20px;
				height: 20px;
				background: #fff;
				border: 1px solid #ccc;
				margin-left: 10px;
				cursor: pointer;
			}

			.all ol li.current {
				background: #DB192A;
			}

			#arr {
				display: none;
			}

			#arr span {
				width: 40px;
				height: 40px;
				position: absolute;
				left: 5px;
				top: 50%;
				margin-top: -20px;
				background: #000;
				cursor: pointer;
				line-height: 40px;
				text-align: center;
				font-weight: bold;
				font-family: '黑体';
				font-size: 30px;
				color: #fff;
				opacity: 0.3;
				border: 1px solid #fff;
			}

			#arr #right {
				right: 5px;
				left: auto;
			}
		</style>
	</head>
	<body>
		<div class="all" id='box'>
			<div class="screen">
				<!--相框-->
				<ul>
					<li><img src="images/1.jpg" width="500" height="200" /></li>
					<li><img src="images/2.jpg" width="500" height="200" /></li>
					<li><img src="images/3.jpg" width="500" height="200" /></li>
					<li><img src="images/4.jpg" width="500" height="200" /></li>
					<li><img src="images/5.jpg" width="500" height="200" /></li>
				</ul>
				<ol>
				</ol>
			</div>
			<div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
		</div>

<script>
			//获取最外面的div
			var box = my$("box");
			//获取相框
			var screen = box.children[0];
			//获取相框的宽度
			var imgWidth = screen.offsetWidth; //图片的宽度
			//获取ul
			var ulObj = screen.children[0];
			//获取ul中的所有的li
			var list = ulObj.children; //拿到一个伪数组
			//获取ol
			var olObj = screen.children[1];
			//获取左右焦点
			var arr = my$("arr");
			var pic = 0; //这样就变成了全局变量，下面任意地方都可以是

			//循环遍历list
			for (var i = 0; i < list.length; i++) { //
				//创建li标签,加入到ol中
				var liObj = document.createElement("li");
				//追加到父盒子的身上
				olObj.appendChild(liObj);
				//添加数字
				liObj.innerHTML = (i + 1); //规范--优秀
				//在每个ol中的li标签上添加一个自定义属性,存储索引值
				liObj.setAttribute("index", i);
				//鼠标点击事件  !!
				liObj.onclick = function() {
					//先干掉所有的ol中的li的背景颜色
					for (var j = 0; j < olObj.children.length; j++) {
						//删除所有的类-----排他思想
						olObj.children[j].removeAttribute("class");
					}
					//第二步
					this.className = "current";
					//获取上面存储，设置的索引值
					//alert(this.getAttribute("index"));
					//var pic = this.getAttribute("index");
					pic = this.getAttribute("index"); //注意，把这个pic变成全局变量，后面可以随便使用
					//调用动画函数animate
					animate(ulObj, -pic * imgWidth); //是一样的
				}
			}
			//循环外面，给第一个ol里面li添加类
			olObj.children[0].className = "current";
			//克隆一个ul中的第一个li,加入到ul中的最后====克隆
			ulObj.appendChild(ulObj.children[0].cloneNode(true)); //true表示克隆成功，再也不用手动加标签了
			//自动播放--自动播放就是计算机有一个"机器人帮你点击右侧按钮"
			var timeId = setInterval(clickHandle, 2000);
			//鼠标经过和离开
			box.onmouseover = function() {
				arr.style.display = "block";
				//清除定时器,鼠标经过的时候让用户看下，不能在跑了。
				clearInterval(timeId);
			};
			box.onmouseout = function() { //完美结束，跟淘宝一模一样
				arr.style.display = "none";
				timeId = setInterval(clickHandle, 2000); //鼠标离开开启定时器，离开再跑
			};
			//右边按钮
			my$("right").onclick = clickHandle; //我已经把右侧按钮封装成函数
			function clickHandle() {
				//判断
				if (pic == list.length - 1) { //优秀--这样就可以任意 6 - 1 = 5
					//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
					//所以,如果用户再次点击按钮,用户应该看到第二个图片
					pic = 0;
					ulObj.style.left = 0 + "px";
				}
				pic++; //立刻设置pic加1,那么此时用户就会看到第二个图片了
				animate(ulObj, -pic * imgWidth);
				//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
				if (pic == list.length - 1) { //pic = 5--特殊情况
					//第五个按钮颜色干掉
					olObj.children[olObj.children.length - 1].className = "";
					//第一个按钮颜色设置上
					olObj.children[0].className = "current";
				} else {
					//排他思想----tab思路
					//干掉所有的小按钮的背景颜色
					for (var i = 0; i < olObj.children.length; i++) {
						//干掉所有的小按钮的背景颜色
						olObj.children[i].removeAttribute("class");
					}
					//第二步
					olObj.children[pic].className = "current"; //典型排他思想
				}
			}
			//左侧按钮开始
			my$("left").onclick = function() {
				//判断
				if (pic == 0) { //此时就是第一张图片，要让用户看到第六张图，
					//pic= 5；就是第六张图
					pic = 5;
					ulObj.style.left = -pic * imgWidth + "px";
				}
				pic--;
				animate(ulObj, -pic * imgWidth);
				//典型的排它思想---tab
				for (var i = 0; i < olObj.children.length; i++) {
					//干掉所有的小按钮的背景颜色
					olObj.children[i].removeAttribute("class");
				}
				//第二步
				olObj.children[pic].className = "current";
			};
			//函数封装动画animate
			function animate(element, target) { //element--元素，target--目标
				//console.log(my$("dv").offsetLeft);
				//设置定时器：setInterval()
				//为了保证我只有一个定时器,我们给他 element.timeId
				//先清除定时器--设表先关(先清除在设置定时器，就是点击定时器的是先清理了定时器，然后在设置)
				clearInterval(element.timeId);
				element.timeId = setInterval(function() {
					//获取div的当前位置
					var current = element.offsetLeft;
					//div每次移动多少像素---步数
					var step = 10; //假设每次走10步
					//第一、判断走正数还是负数
					step = current < target ? step : -step;
					//每次移动后的距离
					current += step; //current = current + 10;
					//判断当前移动后的位置是否到达目标位置
					if (Math.abs(target - current) > Math.abs(step)) { //第二、剩下的步数不必大于10才会走
						element.style.left = current + "px";
					} else {
						//清除定时器
						clearInterval(element.timeId);
						//第三步:直接到达目标
						element.style.left = target + "px";
					}
				}, 10); //表示是20毫秒
			}
		</script>

在这里插入图片描述

YuaKeNG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js无缝轮播

<style> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 500px; height: 200px; padding: 7px; border: 1px solid #ccc; margin: ...
复制链接

扫一扫