一键生成轮播图
这是我做的一个小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"
}
}
}
}
