一键生成轮播图 banner 插件 代码

突然发现他好像只能用一次在一个页面[dog][dog]，大家看看就行

一键生成轮播图

这是我做的一个小demo还不是特别完善输入图片路径生成轮播图其他的样式选填

实现功能：

• 自动轮播
• 左右按钮交互可切换
• 自动适配大小（根据目标div）
• 一键生成下面的切换的点点0.0（可切换轮播图）
• 在切换时不可点击
• 外层div可设置大小会根据目标div自动适配，同时可设置圆角、居中等样式默认溢出隐藏
• 一张图片也可以进行左右轮播
• 插入图片无上限
• 每张图片都可插入网址
• 可以直接复制下来放到js里直接引用（js注释里有详细的例子，哪里不懂可直接评论）
• 可能会有bug请多多包含
• 欢迎随时指正

可以写速度、和每张图片链接的网址根据相应的格式
图片路径和网址都得以数组的形式插入
可能会有bug技术新人多多包涵
东西非常简单就用到了JavaScript
原理是将生成的内容添加到目标元素
有什么问题可以直接评论

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div class="oDiv"></div>
	<script src="./banner.js"></script>
	<script>
		rotationChart('.oDiv', ['1.jpg'], 2000,['http://www.zzccccc.cn']);
	</script>
</body>
</html>

JavaScript

// 编辑人：苟盛
// 日期：2020/2/5
// 名称：一键生成轮播图
// 样式：rotationChart('选择器¸任何格式', ['路径','基于index的路径', 2000 速度最小不能低于2000ms 默认2000 不用写也可以， ['网址','中间没有的写#' 不用写也可以默认没有]);
// 例： rotationChart('.oDiv', ['./images/1.png'], 2000,['http://www.zzccccc.cn']);

// 复制：rotationChart('', ['', ''], 2000,['','']);
// 				   	选择器   路径    速度   网址


Object.prototype.rotationChart = function(demo, target, time, href, style) {
	
	// demo = document.querySelector(demo)

	//选择器兼容 
	if (demo.substring(0,1) == '.') {
		demo = demo.substr(1);
		demo = document.getElementsByClassName(demo)[0];
	}else if (demo.substring(0, 1) == '#') {
		demo = demo.substr(1);
		demo = document.getElementById(demo);
	}else{
		demo = document.getElementsByTagName(demo)[0];
	}

	if (time == undefined || time < 2000) {
			time = 2000;
	}
	
	// 创建大div
	oDiv_box = document.createElement('div');
	demo.appendChild(oDiv_box);
		// 创建小div 和 a
		function oDiv_content_box () {
			
			var oDiv_content = document.createElement('div');
			oDiv_box.appendChild(oDiv_content);
			oDiv_content.appendChild(oDiv_a);

			oDiv_a.appendChild(oDiv_img);
			oDiv_content.style.float = 'left';
			oDiv_content.style.width = 100 / (target.length + 2) + '%';
			oDiv_img.style.width = '100%';


		};

		// 在最前面加上div 和a
		var oDiv_a = document.createElement('a');
		if (href != undefined) {
			oDiv_a.setAttribute('href', href[target.length - 1]);
		}
		var oDiv_img = document.createElement('img');
		oDiv_content_box();
		oDiv_img.setAttribute('src', target[target.length - 1]);

	// 创建a 和小div 总
	for (var i = 0; i < target.length; i ++) {	

		var oDiv_a = document.createElement('a');
		var oDiv_content = document.createElement('div');
		oDiv_box.appendChild(oDiv_content);
		oDiv_content.appendChild(oDiv_a);
		var oDiv_img = document.createElement('img');
		oDiv_a.appendChild(oDiv_img);
		oDiv_img.setAttribute('src', target[i]);
		
		// 给a添加网址 容错
		if (href != undefined) {
			oDiv_a.setAttribute('href', href[i]);
		}

		oDiv_box.style.width = (target.length + 2) * 100 + '%';
		oDiv_content.style.float = 'left';
		oDiv_img.style.width = '100%';
		oDiv_content.style.width = 100 / (target.length + 2) + '%';

	};
		// 给长div加效果
		oDiv_box.style.position = "relative";
		oDiv_box.style.left = '0';
		oDiv_box.style.transition = 'all 1s'
		oDiv_box.style.overflow = 'hidden';
		oDiv_box.style.left = "-100%"
		var oDiv_a = document.createElement('a');
		var oDiv_img = document.createElement('img');
		if (href != undefined) {
			oDiv_a.setAttribute('href', href[0]);
		}
		oDiv_content_box();
		oDiv_img.setAttribute('src', target[0]);
	// 创建左右切换按钮
	var oDiv_left = document.createElement('div');	
	var oDiv_right = document.createElement('div');	
	demo.appendChild(oDiv_left);
	demo.appendChild(oDiv_right);
	oDiv_left.setAttribute('id', 'oDiv_left');
	oDiv_right.setAttribute('id', 'oDiv_right');
	oDiv_right.setAttribute('style', 'width:70px;height:100px;background:rgba(0,0,0,.3);position:absolute;top:calc(50% - 50px);left:20px;font-size:70px;line-hight:70px;text-align:center;color:#fff;cursor: pointer;transition:all .5s;');
	oDiv_left.setAttribute('style', 'width:70px;height:100px;background:rgba(0,0,0,.3);position:absolute;top:calc(50% - 50px);right:20px;font-size:70px;line-hight:70px;text-align:center;color:#fff;cursor: pointer;transition:all .5s;');
	if (screen.width < 800) {
		oDiv_right.style.opacity = "1";
		oDiv_left.style.opacity = "1";
		oDiv_left.style.width = "50px";
		oDiv_left.style.height = "60px";
		oDiv_left.style.lineHeight = "60px";
		oDiv_left.style.fontSize = "35px";
		oDiv_left.style.top = "calc(50% - 30px)";
		oDiv_right.style.width = "50px";
		oDiv_right.style.height = "60px";
		oDiv_right.style.lineHeight = "60px";
		oDiv_right.style.fontSize = "35px";
		oDiv_right.style.top = "calc(50% - 30px)";
	}else {
		oDiv_right.style.opacity = "0";
		oDiv_left.style.opacity = "0";
	}
	oDiv_left.innerHTML = ">"; 
	oDiv_right.innerHTML = "<";
	// 进行点击切换按钮绑定事件
	var keep = 100;
	var spot_number = 0;
	var	spot_number_two = 0;
	var key = 0;
	var time;
		oDiv_left.onclick = function () {
				
				if (key == 0) {
						spot_number_two ++;
					if (spot_number_two == target.length + 1) {
						spot_number --;
						spot_number_two = 0;
						
					}
					if (spot_number == target.length - 1) {
						spot_number = -1;
					}
					
					
					if (keep == (target.length + 1) * 100) {
						oDiv_box.style.transition = 'all 0s'
						keep = 0;
						oDiv_box.style.left = -keep + '%';
						
						setTimeout(function () {
							oDiv_box.style.transition = 'all 1s'
						}, 5)
						
						
						setTimeout('oDiv_left.onclick()', 5)

					}
					
					spot_number ++;
					keep += 100;
					oDiv_box.style.left = -keep + '%';

					for (var i = 0;i < target.length; i ++) {
						spot[i].style.background = "#17A7CD";
						spot[spot_number].style.background = "#00305d";
					}

					key = 0;
					setTimeout(function () {
							key = 1
						}, 10)
					setTimeout(function () {
						key = 0
					}, 1000);
				}
				
		}

		oDiv_right.onclick = function () {
				
				if (key == 0) {
					spot_number_two --;
					spot_number --;
					if (spot_number == -1) {
						spot_number = target.length - 1;
					}
					for (var i = 0;i < target.length; i ++) {
						spot[i].style.background = "#17A7CD";
						spot[spot_number].style.background = "#00305d";
					}
					if (spot_number_two == -1) {
						spot_number ++;
						spot_number_two = target.length;
					}

					if (keep == 0) {
						oDiv_box.style.transition = 'all 0s'
						keep = (target.length + 1) * 100;
						oDiv_box.style.left = -keep + '%';
						
						setTimeout(function () {
							oDiv_box.style.transition = 'all 1s'
						}, 5)
						setTimeout('oDiv_right.onclick()', 10)
					}
					
					keep -= 100;
					oDiv_box.style.left = -keep + '%';

					key = 0;
					setTimeout(function () {
							key = 1
						}, 10)
					setTimeout(function () {
						key = 0
					}, 1000);
				}

		}

		clearInterval(roll)
		var roll = setInterval('oDiv_right.onclick()', time);

		// 鼠标移入移出时左右按钮隐藏出现
		demo.onmousemove = function () {
			clearInterval(roll);
			oDiv_left.style.opacity = "1";
			oDiv_right.style.opacity = "1";
		}
		demo.onmouseout = function () {
			roll = setInterval('oDiv_left.onclick()', time);
			
			if (screen.width > 500) {
				oDiv_left.style.opacity = "0";
				oDiv_right.style.opacity = "0";
			}
		}

		// 给源div加效果
		demo.style.overflow = 'hidden';
		demo.style.position = 'relative';

		//创建小点点 
		var oDiv_spots = document.createElement('div'); 
		demo.appendChild(oDiv_spots);

		// 设置样式
			
		
		if (screen.width < 800) {
			var oDiv_number = (54 * target.length / 2) + 'px';	
			oDiv_spots.setAttribute('style', 'position:absolute;top:80%;left:calc(50% - ' + oDiv_number + ');')
		}else {
			var oDiv_number = (24 * target.length / 2) + 'px';	
			oDiv_spots.setAttribute('style', 'position:absolute;top:93%;left:calc(50% - ' + oDiv_number + ');')
		}

		var spot = document.getElementsByClassName('spot')
		setTimeout(function () {
			spot[0].style.background = "#00305d";
		}, 5)
		// 创建小点点并附给他样式
		for (var i = 0; i < target.length; i ++) {

			var oDiv_spot = document.createElement('div')
			oDiv_spots.appendChild(oDiv_spot);
			// oDiv_spot.setAttribute('style', 'float:left;margin: 0px 10px;width:10px;height:10px;background:#17A7CD;border:2px solid #fff;border-radius:20px;position:relative;cursor:pointer')
			oDiv_spot.setAttribute('class', 'spot');
			if (screen.width < 500) {
				oDiv_spot.setAttribute('style', 'float:left;margin: 0px 10px;width:30px;height:15px;background:#17A7CD;border:2px solid #fff;border-radius:20px;position:relative;cursor:pointer')
			}else {
				oDiv_spot.setAttribute('style', 'float:left;margin: 0px 10px;width:10px;height:10px;background:#17A7CD;border:2px solid #fff;border-radius:20px;position:relative;cursor:pointer')
			}

			spot[i].index = i;
			spot[i].onclick = function (index) {
				keep = (this.index + 1) * 100;
				oDiv_box.style.left = -keep + '%';
				for (var j = 0; j < target.length; j ++) {
					spot[j].style.background = "#17A7CD";
					this.style.background = "#00305d"
				}	
			}
		}
		

}