2020/7/17 轮播图插件

demo ： http://dsj-666.gitee.io/swiper

源码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="index.css"><script src="index.js"></script>
</head><body><div id="banner"></div>
</body>
<script>var banner = document.getElementById('banner');createBanner(banner, [{imgUrl: 'images/1.jfif',link: 'https://www.baidu.com/'}, {imgUrl: 'images/2.jfif',link: 'https://www.baidu.com/'}, {imgUrl: 'images/3.jfif',link: 'https://www.baidu.com/'}, {imgUrl: 'images/4.jfif',link: 'https://www.baidu.com/'}])
</script></html>

    #banner {width: 600px;height: 300px;outline: 10px solid;margin: 0 auto;}

/*** @param {*} area 轮播图区域* @param {*} options  轮播图的数组* @param {*} IsArrow  是否需要左右箭头*/
function createBanner(area, options, IsArrow) {var imgArea = document.createElement('div'); //图片区域的divvar numberArea = document.createElement('div'); //圆点区域的divvar curIndex = 0; //当前的是第几长图片var changeTimer = null; //该变curIndex计时器area.style.position = 'relative';var control = true;//1.创建区域来显示图片initImgs();//2，创建圆点initNumbers();//3,设置圆圈,图片状态setStatus();//4,自动播放autoChange();//5,是否需要左右箭头if (IsArrow === undefined || IsArrow === true) {arrow(); //不传参数默认是true}/*** 下面是局部函数，为了避免用户不知道，用了同名的函数 将这个插件里面里的函数覆盖* 避免全局变量污染*/function initImgs() {imgArea.style.width = '100%';imgArea.style.height = '100%';imgArea.style.display = 'flex';//imgArea.style.overflow = 'hidden';imgArea.style.overflow = 'hidden';//初始化图片options.forEach(function(item) {//let a = document.createElement('a');// a.style.display = 'inline-block';// a.href = item.link;let img = document.createElement('img')img.src = item.imgUrl;//a.appendChild(img);img.style.width = '100%';img.style.height = '100%';img.style.marginLeft = '0';img.style.transition = "1s ease";img.addEventListener('click', function() {location.href = item.link;})imgArea.appendChild(img);})// var last = imgArea.children[0].cloneNode(true);// last.style.transition = '0s';// imgArea.appendChild(last);imgArea.addEventListener('mouseenter', function() {clearInterval(changeTimer);changeTimer = null;})imgArea.addEventListener('mouseleave', function() {autoChange();})area.appendChild(imgArea);area.appendChild(numberArea);}function initNumbers() {// numberArea.style.width = '100%';// numberArea.style.height = '100%';numberArea.style.textAlign = 'center';numberArea.style.marginTop = '-6%';let len = options.length;for (let i = 0; i < len; i++) {const span = document.createElement('span');span.style.display = 'inline-block';span.style.width = "3%";span.style.height = getWidth(3); //让不同大小的容器也不影响圆点的大小span.style.marginLeft = '3%';span.style.borderRadius = '50%';span.style.background = "gray";span.style.cursor = 'pointer';span.addEventListener('click', function() {clearInterval(changeTimer);changeTimer = null;curIndex = i; //用let的作用就在这setStatus();})numberArea.appendChild(span);}}function getWidth(index) {if (area.currentStyle) { //兼容IEreturn parseInt(window.currentStyle(area, null).width) * index / 100 + 'px';} else {//兼容其他return parseInt(window.getComputedStyle(area, false).width) * index / 100 + 'px';}}function setStatus() {if (control) {//1.设置圆圈的背景颜色control = false;for (let i = 0; i < options.length; i++) {if (i === curIndex) {numberArea.children[i].style.background = '#FFF';numberArea.children[i].style.border = "2px solid #00aadc"} else {numberArea.children[i].style.background = 'gray';numberArea.children[i].style.border = '';}}//2，图片状态//var start = parseInt(imgArea.children[0].style.marginLeft); //默认是auto所以开始设置为0var end = curIndex * -100;imgArea.children[0].style.marginLeft = end + '%';// var duration = 1000; //轮播玩一张图片时间// var distance = end - start;// var speed = distance / duration;// if (timer) {//     clearInterval(timer);// }// timer = setInterval(function() { //缓动效果//     start += speed * 20;//     imgArea.children[0].style.marginLeft = start + '%';//     if (Math.abs(end - start) < 1) {//         imgArea.children[0].style.marginLeft = end + '%';//         clearInterval(timer);//     }// }, 20);control = true;}}/*** 自动切换轮播图*/function autoChange() {changeTimer = setInterval(function() {if (curIndex === options.length - 1) {move(false);curIndex = 0;} else {move(true);curIndex++;}setStatus();}, 2000)}function move(flag) {if (!flag) {for (var i = 0; i < options.length; i++) {area.children[0].children[i].style.transition = '';}} else {for (var i = 0; i < options.length; i++) {area.children[0].children[i].style.transition = '1s ease';}}}function arrow() {//1,产生箭头,并设置状态var l_arrow = document.createElement('div');l_arrow.innerHTML = '&lt';arrow_status(l_arrow);var r_arrow = document.createElement('div');r_arrow.innerHTML = '&gt';r_arrow.style.right = '0';arrow_status(r_arrow);//2，箭头的点击事件l_arrow.addEventListener('click', function() {clearInterval(changeTimer);changeTimer = null;if (curIndex == 0) {move(false);curIndex = options.length - 1;} else {move(true);curIndex--;}setStatus();})r_arrow.addEventListener('click', function() {clearInterval(changeTimer);changeTimer = null;if (curIndex == options.length - 1) {move(false);curIndex = 0;} else {move(true);curIndex++;}setStatus();})function arrow_status(item) {//设置俩个箭头的公共样式item.style.width = '8%';item.style.height = getWidth(8);item.style.background = 'rgba(0,0,0,.3)';item.style.top = '50%';item.style.borderRadius = '50%';item.style.border = '2px solid #fff'item.style.transform = 'translateY(-50%)';item.style.position = 'absolute';item.style.color = '#FFF';item.style.textAlign = 'center';item.style.lineHeight = getWidth(8);item.style.fontSize = '25px';item.style.cursor = 'pointer';item.style.display = 'none';item.style.userSelect = 'none';area.addEventListener('mouseenter', function() {item.style.display = 'block';});area.addEventListener('mouseleave', function() {item.style.display = 'none';});item.addEventListener('mouseenter', function() {item.style.border = '2px solid #00aadc'item.style.color = '#00aadc';})item.addEventListener('mouseleave', function() {item.style.border = '2px solid #fff'item.style.color = '#FFF';})area.appendChild(item);}}}

案列要点：

既然是轮播图插件，尽可能多的去简化用户使用，更多的由js完成，可以看出html,css模块的内容是非常少的
createBanner()函数参数一：需要使用改插件的DOM对象参数二：图片相对路径+地址参数三：是否需要左右箭头，默认需要
按百分比布局，在使用这个插件的时候，可以随便设置放置轮播图插件的宽高，不影响布局
主要围绕curIndex参数来实现，要值得注意的是，在手动点击左右箭头按钮还是下面的小点的时候，都要停止计时器，否则自己点击的事件和自动轮播的事件同时进行，就会乱，点击完了再重启计时器
为了不让轮播图到在最后一张到第一张出现后退效果，在最后一张的时候，停止清空过度效果，闪现到第一张图片的位置，再开启过度效果

2020/7/17 轮播图插件相关推荐

动漫轮播html,带17种内置过渡动画的jquery轮播图插件
bsc-slider是一款带17种内置过渡动画的jquery轮播图插件.该jquery轮播图插件可以制作最基本的轮播图效果,并内置17种过渡动画效果,还可以自定义动画的easing效果. 使用方法在 ...
jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
简易jQuery轮播图插件
轮播图插件为简易的jQuery轮播图,实现点击无缝轮播,可用在移动端. 样式有问题,叠加修改即可. 下载地址:https://github.com/Summer-Lin/carousel HTML代码 ...
Vue轮播图插件---Vue-Awesome-Swiper
轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...
自已动手写的轮播图插件，功能不断增加中，可以下载
前,平时总是使用别人的轮播图插件,这次决定自已写一个,功能越多越好.实际现起来,发现并不容易.先实现基本的功能,下两周要丰富起来. 图是别人的图,心是自已的心.直接上代码: 一:结构 <!-- ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
来给你20个优秀的......前端轮播图插件
上期入口:24个 CSS 高级技巧合集这20个,可都是咱们村最好的,年龄都不超过25,一个比一个长的好看.你加人家微信先聊,总有一个你喜欢的.老大不小的人了,别太挑,遇到合适的,就去Github搬过 ...
非常好用的轮播图插件
http://www.htmleaf.com/jQuery/Slideshow-Scroller/201709204749.html ma5slider轮播图插件的github地址为:https:// ...
html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法在页面中引入jquery. ...

2020/7/17 轮播图插件

2020/7/17 轮播图插件相关推荐

最新文章

热门文章