js轮播图小插件

已于 2022-09-01 13:31:23 修改
阅读量1k 收藏
点赞数
分类专栏： js无缝轮播图 vue无缝轮播图 移动端无缝轮播图 文章标签： javascript vue.js html css 前端
于 2021-03-27 19:07:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44208880/article/details/115269844
版权

昨天被提到无缝轮播图，当时忘记怎么做的了，回来后就自己做了个小插件。勿喷，谢谢！
废话不多说直接上代码！
html

<template>
  <div class="home">
      <div ref="box" style="margin-top:100px;width: 300px;height: 200px"></div>
  </div>
</template>

<script>
import Slideshow from '../utils/slideshow/index.js'

export default {
  name: 'Home',
  data() {
    return {

    }
  },
  mounted() {
    let imgArr = [
      require('../assets/01.jpg'),
      require('../assets/02.jpg'),
      require('../assets/03.jpg'),
      require('../assets/04.jpg'),
    ]
    let slideshow = new Slideshow({
      imgArr,
      // width:375,
      // isEleDots:true,
      // isBtn:true
    })
    slideshow.creatNode(this.$refs.box)

  },
}
</script>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Tesseract</title>
	</head>
	</head>
	<body>
		<div class="box" style="margin-top:100px;width: 300px;height: 200px"></div>
	</body>
	<script src="./slideshow/index.js"></script>
	<script type="text/javascript">
	let imgArr = [
	      './img/1.png',
	      './img/2.png',
	      './img/3.png',
	      './img/4.png',
	      './img/5.png',
	    ]
	    let slideshow = new Slideshow({
	      imgArr,
	      // width:375,
	      isEleDots:true,
	      isBtn:true
	    })
	    slideshow.creatNode(document.getElementsByClassName('box')[0])
	</script>
</html>

index.js

/**
 * option : {
   imgArr : Array , 图片数组
   width : Number||'100%' , 容器宽度
   height : Number||'100%' , 容器高度
   isEleDots : Boolean , 是否显示圆点
   isBtn : Boolean , 是否显示两侧按钮
   color : String , 颜色
}
 creatNode(node(需要插入的节点，必填))
 removeEventListener() //移除所有事件
 * */

export default class Slideshow {
    constructor(option) {
        this.imgArr = option.imgArr || []   //图片数组
        this.width = option.width || '100%'    //容器宽度
        this.height = option.height || '100%'   //容器高度
        this.isEleDots = option.isEleDots || false //是否显示圆点
        this.isBtn = option.isBtn || false //是否显示两侧按钮
        this.color = option.color || '#f17d07' //颜色
        this.TIME_DURATION = option.time || 3000   //定时器时间
        this.interval = null		//定时器
        this.index = 0			 //当前图片
        this.circle = 0			 //当前高亮圆点
        this.eleInners = null    //图片ul
        this.eleDots = null		 //圆点ul
        this.liImgs = null		 //装图片的li
        this.liDots = null		 //img节点
        this.elePrev = null		 //左边按钮
        this.eleNext = null	     //右边边按钮
        this.container = null      //容器
        this.LI_WIDTH = null	 //li宽度每次移动的距离
        this.isMobile = navigator.userAgent.match(/(iPhone|iPad|Android|ios)/i) //是否位移动端
    }

    // 创建节点
    creatNode(node) {
        if (this.imgArr.length == 0) return
        this.creatStyle()
        this.width = this.width > node.clientWidth && this.width !== '100%' ? node.clientWidth : this.width
        this.height = this.height > node.clientHeight ? node.clientHeight && this.height !== '100%' : this.height
        let width = this.width != '100%' ? this.width + 'px' : node.clientWidth + 'px'
        let height = this.height != '100%' ? this.height + 'px' : node.clientHeight + 'px'
        let imgLis = ``
        this.imgArr.forEach(item => {
            imgLis += `<li style="height:${height};width:${width}">
                          <img src="${item}" alt="" >
                       </li>
                      `
        })
        let btn = `
                    <div id="btn-prev" class="btn-ctrl">&lt;</div>
				    <div id="btn-next" class="btn-ctrl">&gt;</div>
                 `
        let div = `
                    <div class="container" id="container" style="height:${height};width:${width}">
                        ${this.isBtn ? btn : ''}
                        <ul id="inner-list" style="width: ${this.imgArr.length + 1}00%">
                             ${imgLis}
                        </ul>
                        ${this.isEleDots ? '<ul id="dot-list"></ul>' : ''}
                    </div>
		        `
        node.innerHTML = div
        this.getNode()
        //首先是克隆
        this.eleInners.appendChild(this.liImgs[0].cloneNode(true));
        if (this.isEleDots) this.creatEleDots()
        //接着定时器
        this.interval = setInterval(this.autoplay.bind(this), this.TIME_DURATION)
        this.bindEvent()

    }

    //创建样式
    creatStyle() {
        let styleContent = `
					* {
						margin: 0px;
						padding: 0px
					}
					
					#container {
						margin: auto;
						width: 500px;
						height: 500px;
						position: relative;
						overflow: hidden;
						border-radius: 5px;
					}
					
					#inner-list {
						width: 400%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
					}
					
					#inner-list li {
						width: 500px;
						height: 100%;
						float: left;
					}
					
					#inner-list li img {
						width: 100%;
						height: 100%;
					}
					
					#dot-list {
						position: absolute;
						bottom: 20px;
						left: 50%;
						transform: translateX(-50%);
					}
					
					#dot-list li {
						float: left;
						display: inline-block;
						width: 20px;
						height: 20px;
						border-radius: 50%;
						line-height: 20px;
						text-align: center;
						background: #ccc;
						cursor: pointer;
						margin-right: 10px;
					}
					
					#dot-list li.cur {
						background:${this.color};
					}
					
					.btn-ctrl {
						position: absolute;
						cursor: pointer;
						top: 50%;
						font-size: 36px;
						color: ${this.color};
						font-weight: 500;
						z-index: 2;
					}
					
					#btn-prev {
						left: 0px;
					}
					
					#btn-next {
						right: 0px;
					}
		`
        let style = document.createElement('style')
        style.innerHTML = styleContent
        document.getElementsByTagName('head')[0].appendChild(style)
    }

    //接着是动画，用差值和offsetLeft值和移动的值，给一个speed让它移动
    animate(obj, targetPlace) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            //判断移动的位置是向左移动还是向右移动
            var speed = obj.offsetLeft > targetPlace ? -15 : 15;
            var result = targetPlace - obj.offsetLeft;
            //只要移动的差值大于speed，那么就一直让obj.style.left 改变
            if (Math.abs(result) > Math.abs(speed)) {
                obj.style.left = obj.offsetLeft + speed + 'px'
            } else {
                //否则如果已经移动的，obj.offsetleft与要移动的位置十分接近了，
                obj.style.left = targetPlace + 'px';
                clearInterval(obj.timer);
            }
        }, 10)

    }

    //向左的autoplay
    autoplay() {
        this.index++;
        if (this.index > this.liImgs.length - 1) {
            this.eleInners.style.left = 0; //赶快跳回第一张的位置
            this.index = 1; //找到第二张图片
        }
        this.animate(this.eleInners, -this.index * this.LI_WIDTH);
        if (!this.isEleDots) return
        this.circle++;

        if (this.circle >= this.liImgs.length - 1) {
            this.circle = 0; //circle回到第一个点
        }
        for (var i = 0, len = this.liDots.length; i < len; i++) {
            this.liDots[i].className = '';

        }
        this.liDots[this.circle].className = 'cur'
    }

    //向右移动
    moveRight() {
        this.index--;
        if (this.index < 0) {
            //赶快跳回第最后一张的位置
            this.eleInners.style.left = -(this.liImgs.length - 1) * this.LI_WIDTH + 'px';
            this.index = this.liImgs.length - 2; //找到倒数第二张图片
        }
        this.animate(this.eleInners, -this.index * this.LI_WIDTH);
        if (!this.isEleDots) return
        this.circle--;
        if (this.circle < 0) {
            this.circle = this.liImgs.length - 2; //circle回到最后一个点
        }
        for (var i = 0, len = this.liDots.length; i < len; i++) {
            this.liDots[i].className = '';
        }
        this.liDots[this.circle].className = 'cur'
    }

    getNode() {
        this.eleInners = document.getElementById('inner-list')
        this.container = document.getElementById('container')
        if (this.isEleDots) {
            this.eleDots = document.getElementById('dot-list')
            this.liDots = this.eleDots.children
        }
        this.liImgs = this.eleInners.getElementsByTagName('li')
        this.elePrev = document.getElementById('btn-prev')
        this.eleNext = document.getElementById('btn-next')
        this.LI_WIDTH = this.liImgs[0].offsetWidth
    }

    //绑定事件
    bindEvent() {
        //鼠标移入，清除定时器
        this.eleInners.onmouseenter = (e) => clearInterval(this.interval)
        //鼠标移出，开启定时器
        this.eleInners.onmouseleave = (e) => {
            this.interval = setInterval(this.autoplay.bind(this), this.TIME_DURATION)
        }
        //圆点
        if (this.isEleDots) this.eleDotsBtn()
        //两侧按钮
        if (this.isBtn) this.bilateralBtn()
        else this.pcSlidingEvent()
        if (this.isMobile) this.mobileSlidingEvent()
    }

    //生成小点点
    creatEleDots() {
        for (var i = 0, len = this.liImgs.length - 1; i < len; i++) {
            var li = document.createElement('li');
            this.eleDots.appendChild(li)
        }
        //第一个点高亮
        this.liDots[0].className = 'cur'
    }

    //圆点事件
    eleDotsBtn() {
        this.eleDots.onclick = (event) => {
            clearInterval(this.interval);
            var target = event.target;
            for (var i = 0, len = this.liDots.length; i < len; i++) {
                this.liDots[i].className = '';
                if (target == this.liDots[i]) {
                    this.circle = this.index = i
                    this.liDots[this.circle].className = 'cur'
                }
            }
            this.animate(this.eleInners, -this.index * this.LI_WIDTH);
        }
    }

    //两侧按钮
    bilateralBtn() {
        this.elePrev.onclick = () => {
            clearInterval(this.interval)
            this.moveRight();
            this.interval = setInterval(this.autoplay.bind(this), this.TIME_DURATION)
        }
        this.eleNext.onclick = () => {
            clearInterval(this.interval)
            this.autoplay();
            this.interval = setInterval(this.autoplay.bind(this), this.TIME_DURATION)
        }
    }

    //移动端滑动事件
    mobileSlidingEvent() {
        let start, end
        this.container.ontouchstart = (e) => start = e.touches[0].pageX
        this.container.ontouchend = (e) => {
            end = e.changedTouches[0].pageX
            let direction = end - start
            clearInterval(this.interval)
            if (direction > 80) {
                this.moveRight();
            } else if (direction < -80) {
                this.autoplay();
            }
            this.interval = setInterval(this.autoplay.bind(this), this.TIME_DURATION)
        }
    }

    //pc滑动事件
    pcSlidingEvent() {
        this.container.onmousedown = (e) => {
            let start = e.clientX
            this.container.onmouseup = (e) => {
                let end = e.clientX
                let direction = end - start
                clearInterval(this.interval)
                if (direction > 80) {
                    this.moveRight();
                } else if (direction < -80) {
                    this.autoplay();
                }
                //这里不能加定时器了因为鼠标离开的时候会在启动定时器
                // this.interval = setInterval(this.autoplay.bind(this), this.TIME_DURATION)
            }
            //去掉默认拖拽事件
            this.container.ondragstart = () => false
        }

    }

    removeEventListener() {
        clearInterval(this.interval)
        if (this.elePrev) this.elePrev.onclick = null
        if (this.eleNext) this.eleNext.onclick = null
        if (this.eleDots) this.eleDots.onclick = null
        this.eleInners.onmouseenter = null
        this.eleInners.onmouseleave = null
        this.container.ontouchstart = null
        this.container.ontouchend = null
        this.container.onmousedown = null
        this.container.onmouseup = null
        //恢复默认事件
        this.container.addEventListener('ondragstart', (e) => {
            e.returnValue = true
        })
    }
}

支持pc端移动端左右滑动
用法
option : {
imgArr : Array , 图片数组
width : Number||‘100%’ , 容器宽度
height : Number||‘100%’ , 容器高度
isEleDots : Boolean , 是否显示圆点
isBtn : Boolean , 是否显示两侧按钮
color : String , 颜色
}

然后直接 creatNode(node)方法就可以创建轮播图了

音药
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery slideshow.js幻灯片插件_淡出淡进图片轮播
10-30
jquery slideshow.js幻灯片插件_淡出淡进图片轮播
html轮播图脚本之家,原生JS轮播图插件
weixin_33196034的博客
06-16 280
代码分两个部分：1、HTML部分，根据注释处理即可；2、play.js插件部分，引到HTML里面即可。1、HTML部分：/*style标签及其内的内容，在实际项目中可以不要*/* {margin: 0;padding: 0;}var play= new Banner('1000px', '500px');/*这两个参数分别是轮播区的宽和高，可以根据需要更改*/2、play.js插件部分functi...
pc端html轮播带滑块,原生js实现移动端+pc端 轮播插件
weixin_28730037的博客
07-08 343
slide.js原生js写的轮播兼容 pc+移动端 插件，支持轮播速度，轮播内容，轮播间隔，手势灵敏度自定义，导航圆点点击跳转,手势滑动。使用说明：slide.js文件包含小部分es6语法编写的文件，在移动端有兼容性问题，仅供于源码参考。移动端跟pc端开发引用js文件直接下载slide-es5.js进行引入使用。html代码 ...
点击左右有缝轮播html,超帅轮播插件tabstools.js教程之实现数字+箭头+多栏轮播
weixin_29716207的博客
06-15 312
摘要：前面我们讲了tabstools.js插件可实现多种轮播，如：选项卡轮播、数字轮播、缩略图轮播、卡盘轮播、等等，今天我们再来了解下多栏轮播效果......万万没想到！写这篇文章竞是在两个月之后......虽然写的有点晚，但该分享的还是要有的。两个月前，艺灵分享了自己制作的一款jquery插件-- 超帅轮播插件tabstools.js，目前已写了两篇不同的教程来挖掘此插件的功能，想了解的看官可前...
html5 swiper图片轮播,轮播图、页面动画js插件Swiper的使用方法
weixin_30306507的博客
06-07 1267
使用目的：开发中我们会需要许多动态轮播图片等，自己用js写过于麻烦，此时可以使用插件Swiper搞定轮播滑动等效果Swiper效果图绝大部分属于移动端使用步骤：1.打开Swiper官方网址2.点击在线演示中-基础演示3.找好想要的效果图记住编号4.点击左上角下载全部进入下载页面，点击下载第一个标红模块5.下载解压后进入文件夹点击package文件夹找到对应的js和css文件导入所需项目指定位置mi...
js使用swiper实现轮播图
m0_73481765的博客
06-30 1704
至此，使用Swiper实现轮播图的基本步骤已经完成。你可以按照自己的需要修改Swiper选项和CSS样式以达到更好的效果。Swiper是一个流行的轮播图插件，它可以在移动端和PC端使用。以上代码会创建一个Swiper实例，并将其绑定到。是轮播图下方的分页器。选项将轮播图循环播放，是Swiper容器，
JS常用插件 Swiper插件 实现轮播图
christmassss的博客
01-15 1166
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架中文官网地址:点击查看Swiper演示，里面的功能和样式十分丰富，根据自己的需求选择确认插件实现的功能去官网查看使用说明下载插件打开demo实例文件，查看需要引入的相关文件，并且引入复制demo实例文件中的结构html，样式css以及js代码。
swiper插件实现js轮播图
ycw_java_python的博客
10-20 304
2.下载完成后解压后获得的一个文件夹，将文件夹里名为swiper-bundle.min.css和swiper-bundle.min.js放在所写网页的根目录下，也可以新建一个文件夹，将两个文件放在文件夹里，也可将下载好后的文件夹直接放在所写网页的根目录。ps：可以在自己完成有轮播图效果页面时使用，平时学校检测啥的可能是断网检测，所以只能使用原生js进行实现。即可将轮播效果变成翻转，如果想要更多效果，可以在swiper官网上查询api文档，里面可能会有你意向不到的收获。写到这里，轮播图就可以自动轮播了。
使用原生JS和使用插件实现轮播图
Jack, what else can you do besides holding your little darling?
12-17 3278
使用原生JS和使用插件实现轮播图
js轮播图的插件化封装详解
10-19
主要为大家详细介绍了js轮播图的插件化封装，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JS实现旋转木马式图片轮播插件
11-23
本人自己写过三个图片轮播，一个是简单的原生JS实现的，没有什么动画效果的，一个是结合JQuery实现的，淡入淡出切换的。现在想做一个酷一点的放在博客或者个人网站，到时候可以展示自己的作品。逛了一下慕课网，发现...
图片轮播切换JS插件
02-07
简单图片切换效果JS插件，效果比较简单，包含源代码，若需要复杂的切换效果，请自行修改源代码。使用方法：一句代码调用，获取HTML页面中输出的UL列表内容自动生成图片轮播效果。兼容全浏览器。代码功能比较简单，...
js轮播图插件(unslider)
11-01
js轮播图插件，代码内含注释，直接使用即可
JavaScript网页轮播图插件
ICode联盟
02-05 150
一个超级小,易于使用,无限循环使的JavaScript和CSS创建的图像轮播carousel滑块。
「Swipe.js 高级教程：打造流畅触摸滑动的轮播图组件」
qq_60597540的博客
12-27 271
一、准备工作首先下载 Swipe.js 的库文件，然后引入相关文件到你的 HTML 文件中。具体代码如下： -- 更多幻灯片... --> -- 更多幻灯片... -->
基于html+js实现轮播图
一步一个脚印，踏实努力，向着目标前进
06-30 2296
通过以上修改，你现在可以通过点击小圆点来切换轮播图了。每个小圆点代表一个轮播图项，点击不同的小圆点将切换到对应的轮播图项。切换过程中，小圆点的激活状态也会相应地更新。以下是基于HTML和JavaScript实现上下轮播和左右轮播的代码和说明文档。
使用JS来实现轮播图的效果
weixin_64965154的博客
05-25 6978
第一步我们先获取三个元素，toggle()是一个方法调用，我是把左边和右边的写在一个方法，显示更加美观，，然后呢我们执行右侧按钮业务，还是先获取右侧按钮，然后定义一个信息量i=0。3，最后讲一个功能，这里我们依旧是在定时器上面声明一个变量，因为我们定时器也是有一直在懂，所以我们来这块设定一个点击事件。但是当我们轮播图到了最后一个，需要往返第一个，这时候我们需要判断，如果到了素组下标为8的时候，我们就得返回第一个。第一个是鼠标经过停止事件，第二个是开始事件，这样呢我们一个完整的轮播图就做出来了。
swiper轮播问题之二：默认显示3张图片，中间显示全部两边显示部分
weixin_30551947的博客
10-16 2385
其二：项目遇到比较有点要求的轮播图，默认显示3张图片，中间显示全部，两边显示部分。如图： 网上找了也没有找到合适的，最后经过自己摸索写了出来，贴出代码分享给大家。 CSS .swiper-container { margin-top: 20px; width: 7...
TypeScript中的函数类型注解：精确定义行为与意图
最新发布
逐星的博客
05-11 386
在TypeScript中，函数不仅是一段执行特定任务的代码块，它们还可以拥有自己的类型。函数类型注解允许开发者定义函数的参数类型和返回值类型，从而提高代码的可读性和可维护性。函数类型注解是TypeScript中定义函数时的重要特性，它有助于确保函数参数和返回值符合预期，从而提高代码的准确性和安全性。
yarn 使用轮播图插件
05-01
在使用 Yarn 的过程中，可以通过安装轮播图插件来实现网站图片轮播展示的功能。 首先，需要在项目中安装轮播图插件。可以使用命令行工具或者在 package.json 文件中添加依赖项来完成安装。一些常用的轮播图插件包括...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值