原生JS实现轮播图效果

最新推荐文章于 2024-04-02 18:03:14 发布

福宝是修狗

最新推荐文章于 2024-04-02 18:03:14 发布

阅读量164

点赞数

分类专栏： # Js

本文链接：https://blog.csdn.net/yayedecsdn/article/details/101923031

版权

Js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rotation_chart</title>
	<style>
		*{margin: 0;padding: 0;border: 0;list-style: none;}
		#all{
			width: 490px;height: 270px;padding: 7px;margin: 60px auto;/*左右居中*/
			border:1px solid rgb(0,0,0,.4);
		}
		#screen{width: 490px;height: 270px;position: relative;overflow: hidden;}
		#all ul{width: 3000px; /*横向放图片*/position: absolute;left:0;top: 0;}
		#all ul li{width: 490px;height: 270px;float: left;}
		#screen img{width: 490px;height: 270px;}
		#all ol{position: absolute;right: 30px;bottom: 20px;}
		#all ol li{
			float: left;width: 20px;height: 20px;line-height: 20px;text-align: center;margin-left: 8px;
			border: 2px solid #fff;border-radius: 50%;background: rgb(255,250,250,.9);cursor: pointer;
		}
		/*标签后的类不能有空格？？？*/
		#all ol li.current{background: #58bc58;}
		#arr{display: none;z-index: 1;}
		#arr span{
			display: block;width: 40px;height: 40px;position: absolute;top: 50%;margin-top:-20px;line-height: 40px;
			text-align: center;
			/*font-family: "黑体"；
			font-size:40px;*/
			background-color: rgb(0,0,0,.15);color: #fff;cursor: pointer;
		}
		#arr #arr_l{left: -3px;border-top-right-radius:20px;border-bottom-right-radius:20px;}
		#arr #arr_r{right: -3px;border-top-left-radius:20px;border-bottom-left-radius:20px;}
	</style>
	<script type="text/javascript" src="animate.js"></script>
	<script type="text/javascript" src="common.js"></script>
</head>
<body>
	<div id="all" class="box">
		<div id="screen">
			<ul>
				<li><img src="images/ad1.jpg" alt=""></li>
				<li><img src="images/ad2.jpg" alt=""></li>
				<li><img src="images/ad3.jpg" alt=""></li>
				<li><img src="images/ad4.jpg" alt=""></li>
				<li><img src="images/ad5.jpg" alt=""></li>
			</ul>
			<ol></ol>
			<div id="arr">
				<!-- &gt;大于号，&lt;小于号 -->
				<span id="arr_l">&lt;</span><span id="arr_r">&gt;</span>
			</div>
		</div>
	</div>
	<script>
		//获取元素
		//类名不能用mouseover\mouseout????
		// var box = document.getElementsByClassName("box");
		var all = document.getElementById("all");
		var screen = document.getElementById("screen");

		var ul = screen.children[0];
		var ol = screen.children[1];

		//获取箭头
		var arr = document.getElementById("arr");
		var arr_l = arr.children[0];
		var arr_r = arr.children[1];

		//1.序列自动生成，点击序列，实现滚动
		var count = ul.children.length;
		for (var i = 0; i < count; i++) {
			var li = document.createElement("li");
			ol.appendChild(li);
			// li.innerHTML = i+1;
			setInnerText(li,i+1); //自定义函数，添加li的文本内容，从一开始的数字
			//记录自己的索引
			li.setAttribute("index", i);
			/*不是函数调用，将liclick赋给onclick（引用）,直接循环里写ONCLICK函数会导致每次循环都加载存储一遍，消耗内存*/
			li.onclick = liClick; 
		}
		//设置第一个li为当前li
		ol.children[0].className = "current";

		//图片宽度
		var imageWidth = screen.offsetWidth;
		
		function liClick() {
			//清空当前高亮li
			for(var i = 0; i < ol.children.length; i++){
				ol.children[i].className = '';
			}

			this.className = 'current';

			//获取的元素属性均为字符串，转为数字
			var index = parseInt(this.getAttribute("index"));
			animate(ul, -index * imageWidth);
		}


		//2.显示箭头，点击箭头实现左右滚动
		//显示箭头，mouseover、mouseenter的区别看note.md文件，或console面板感受
		all.onmouseenter = function() {
			arr.style.display = 'block';
			// console.log('block');
			// 鼠标放盒子上清楚定时器
			clearInterval(timeId);
		};
		all.onmouseleave = function() {
			arr.style.display = 'none';
			// console.log('none');
			// 鼠标离开盒子，重新开定时器
			timeId = setInterval(function(){
				arr_l.click();
			},2000);
		};

		var index = 0;//设第一张图片的索引为0
		arr_l.onclick = function(){
			//判断是否为克隆的第一张图，是的话，修改ul的值，显示真正的第一张图
			if(index === count){
				ul.style.left = '0px';
				index = 0;
			}
			index++;
			//总共有5张图片，但还有一张克隆的图，克隆的图片索引5
			if(index < count){
				// animate(ul, -index * imageWidth);
				//click();可触发按钮点击事件!!!
				ol.children[index].click();
			}
			else if(index === count){
				//如果索引为5，则以动画方式，移动到克隆的图片
				animate(ul,-index * imageWidth);
				for(var i = 0; i < ol.children.length; i++){
					ol.children[i].className = '';
				}
				ol.children[0].className = 'current';
			}
		}
		arr_r.onclick = function(){
			//如果是第一张图片，此时要偷偷切换到最后一张图片（克隆的第一张图片）
			if(index === 0){
				index = count;
				ul.style.left = -index * imageWidth + 'px';
			}
			index--;
			ol.children[index].click();
		}

		//3.实现无缝滚动
		//获取第一个li
		var firstli = ul.children[0];
		//克隆 li
		var cloneli = firstli.cloneNode(true);
		ul.appendChild(cloneli);

		//4.实现轮播图自动播放
		//自动播放引用箭头点击功能，箭头点击切换引用序号点击，序号点击引用LiClick函数。
		timeId = setInterval(function(){
				arr_l.click();
		},2000);
	</script>
</body>
</html>

福宝是修狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现轮播图效果

直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Rotation_chart</title> <style> *{margin: 0;padding: 0;border: 0;list-style: ...
复制链接

扫一扫