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

最新推荐文章于 2024-09-13 22:30:42 发布

苟盛

最新推荐文章于 2024-09-13 22:30:42 发布

阅读量954

点赞数 2

分类专栏：插件文章标签： javascript js html css

本文链接：https://blog.csdn.net/function_zzc/article/details/104490432

版权

这是一个使用JavaScript制作的轮播图小demo，具备自动轮播、左右切换、大小适配和切换点点功能。代码可直接引用，支持无限张图片和每张图片链接，但可能有bug，适合技术新人学习。

摘要由CSDN通过智能技术生成

突然发现他好像只能用一次在一个页面[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)