pc端html轮播带滑块,原生js实现移动端+pc端 轮播插件
slide.js
原生js写的轮播兼容 pc+移动端 插件,支持轮播速度,轮播内容,轮播间隔,手势灵敏度自定义,导航圆点点击跳转,手势滑动。
使用说明:slide.js文件包含小部分es6语法编写的文件,在移动端有兼容性问题,仅供于源码参考。移动端跟pc端开发引用js文件直接下载slide-es5.js进行引入使用。
html代码
必须需要设置:包裹元素的id,以及高度跟宽度
包裹元素下面需要跟随一个div,div下面是带有class属性为slide-item的任意元素
js代码:
//需要先引入插件
slide = new Slide('slide',3000,1,20);
//第一个参数是设置了轮播的包裹元素的id,是必须参数
//第二个参数是轮播间隔,非必须参数,默认为3000ms
//第三个参数是轮播速度, 非必须参数,默认为1,数值越大轮播速度越快
//第四个参数是手指滑动灵敏度,非必须参数,默认为20,数值越大需要滑动触发的距离就越大
废话不多说,下面实现代码跟注释说明
(function () {
let Slide = function (
slideId = 'slide',
timeOut = 3000,
speed = 0.1,
d = 20
) {
this.d = d;//滑动灵敏度
this.timeOut = timeOut;//轮播间隔
this.slide = document.querySelector('#slide'); //获取视窗层
this.room = this.slide.querySelector('div'); //获取内容层
this.imgs = [...this.slide.querySelectorAll('.slide-item')]; //轮播图元素组
this.slideWidth = parseInt(getComputedStyle(this.slide).width); //视窗层高度
this.slideHeight = parseInt(getComputedStyle(this.slide).height); //视窗层宽度
this.startPoint = null; //手指触摸的起点
this.navButtons = null; //获取到所有的导航圆点
this.timer = null; //定时器
this.imgIndex = 1; //当前轮播图片index
this.prev = null; //上一个
this.next = null; //下一个
this.speed = -(this.slideWidth / 10 * speed); //动画速度
this.resetCss(); //初始化css样式
this.resetAll(); //初始化设置
this.imgs.forEach((el) => {
el.style.height = `${this.slideHeight}px`;
el.style.width = `${this.slideWidth}px`;
}); //使图片的宽度跟视窗层一样
this.autoStart = setInterval(() => {
this.nextItem()
}, timeOut);
//轮播间隔定时器
for (let i = 0; i < this.navButtons.length; i++) {
this.navButtons[i].onclick = this.navButtonClick.bind(this);
} //绑定导航圆点点击事件
//绑定触摸开始事件
this.slide.addEventListener('touchstart', this.touchstart.bind(this));
//绑定触摸结束事件
this.slide.addEventListener('touchend', this.touchend.bind(this));
}
//初始化样式
Slide.prototype.resetCss = function () {
let styleEle = document.createElement('style'); //创建style标签
let navLeft = this.slideWidth / 2 - this.imgs.length * 9;
let navTop = this.slideHeight / 40;
styleEle.innerHTML += '.slide{position:relative;overflow:hidden;font-size:0;}'; //舒适化slide视窗的样式
styleEle.innerHTML += '.slide .room{position:absolute;}'; //初始化room内容层的样式
styleEle.innerHTML += '.slide .slide-item{display:inline-block;}'; //设置slide-item的样式为内联块级元素
styleEle.innerHTML += `.slide .nav{padding:0 4px;list-style:none;position:absolute;font-size:0px;bottom:${navTop}px;left:${navLeft}px;text-align:center;}`;
styleEle.innerHTML += '.navButton{display:inline-block;margin:6px 4px;background:#fff;width:8px;height:8px;-moz-border-radius:8px;border-radius:8px;cursor:pointer;box-shadow:0 0 6px #bbb;}';
document.head.appendChild(styleEle); //插入标签
}
Slide.prototype.resetAll = function () {
this.slide.setAttribute('class', 'slide'); //给slide元素增加class属性
this.room.setAttribute('class', 'room'); //给room元素增加class属性
this.room.style.left = `0px`; //设置room的初始距离
this.room.style.width = `${this.slideWidth * (this.imgs.length)}px`; //设置内容层的宽度
//创建导航圆点定位框
let nav = document.createElement('ul');
nav.id = 'nav';
nav.setAttribute('class', 'nav');
this.slide.appendChild(nav);
for (let i = 0; i < this.imgs.length; i++) {
let navButtonLi = document.createElement('li');
navButtonLi.setAttribute('class', 'navButton');
navButtonLi.index = i + 1;
nav.appendChild(navButtonLi);
}
this.navButtons = this.slide.querySelectorAll('li'); //获取所有的li节点
this.navButtons[0].style.background = '#333'; //初始化第一个圆点的颜色
}
//切换下一个的函数
Slide.prototype.nextItem = function () {
//清除过度定时器
clearInterval(this.timer);
//清除间隔播放定时器
clearInterval(this.autoStart);
this.timer = setInterval(() => {
let left = parseInt(this.room.style.left);
if (this.imgIndex < this.imgs.length) {
if (left > (-this.slideWidth * this.imgIndex)) {
this.room.style.left = `${parseInt(this.room.style.left)+this.speed}px`;
} else {
clearInterval(this.timer);
this.room.style.left = `${-this.slideWidth*this.imgIndex}px`;
this.navButtons[this.imgIndex - 1].style.background = '#fff';
this.imgIndex++;
this.navButtons[this.imgIndex - 1].style.background = '#333';
}
} else {
if (left < 0) {
this.room.style.left = `${parseInt(this.room.style.left)+(-this.speed*2)}px`;
} else {
clearInterval(this.timer);
this.room.left = '0';
this.navButtons[this.imgIndex - 1].style.background = '#fff';
this.imgIndex = 1;
this.navButtons[this.imgIndex - 1].style.background = '#333';
}
}
}, 16.7);
this.autoStart = setInterval(() => {
this.nextItem()
}, this.timeOut);
}
Slide.prototype.lastItem = function () {
clearInterval(this.timer);
clearInterval(this.autoStart);
this.timer = setInterval(() => {
let left = parseInt(this.room.style.left);
if (this.imgIndex > 1) {
if (left < (-this.slideWidth * (this.imgIndex - 2))) {
this.room.style.left = `${parseInt(this.room.style.left)-this.speed}px`;
} else {
clearInterval(this.timer);
this.room.style.left = `${-this.slideWidth*(this.imgIndex-2)}px`;
this.navButtons[this.imgIndex - 1].style.background = '#fff';
this.imgIndex--;
this.navButtons[this.imgIndex - 1].style.background = '#333';
}
} else {
if (left > -this.slideWidth * (this.imgs.length - 1)) {
this.room.style.left = `${parseInt(this.room.style.left)+(this.speed*2)}px`;
} else {
clearInterval(this.timer);
this.room.left = `${-this.slideWidth*this.imgs.length-1}px`;
this.navButtons[this.imgIndex - 1].style.background = '#fff';
this.imgIndex = this.imgs.length;
this.navButtons[this.imgIndex - 1].style.background = '#333';
}
}
}, 16.7);
this.autoStart = setInterval(() => {
this.nextItem()
}, this.timeOut);
}
Slide.prototype.navButtonClick = function ({
target
}) {
clearInterval(this.autoStart);
clearInterval(this.timer);
this.timer = setInterval(() => {
let left = parseInt(this.room.style.left);
if (target.index > this.imgIndex) {
if (left > -this.slideWidth * (target.index - 1)) {
this.room.style.left = `${parseInt(this.room.style.left)+this.speed*(target.index-this.imgIndex)}px`;
} else {
clearInterval(this.timer);
this.room.style.left = `${-(this.slideWidth)*(target.index-1)}px`;
this.navButtonStyle(target);
}
} else if (target.index < this.imgIndex) {
if (left < -this.slideWidth * (target.index - 1)) {
this.room.style.left = `${parseInt(this.room.style.left) - this.speed * (this.imgIndex - target.index)}px`;
} else {
clearInterval(this.timer);
this.room.style.left = `${(-this.slideWidth) * (target.index - 1)}px`;
this.navButtonStyle(target);
}
} else {
return false;
}
}, 16.7);
this.autoStart = setInterval(() => {
this.nextItem()
}, this.timeOut);
}
//导航圆点点击事件
Slide.prototype.navButtonStyle = function (target) {
target.style.background = '#333';
this.navButtons[this.imgIndex - 1].style.background = '#fff';
this.imgIndex = target.index;
}
//手指触摸起始触发函数
Slide.prototype.touchstart = function (e = window.event) {
this.startPoint = e.touches[0];
}
//手指触摸结束触发函数
Slide.prototype.touchend = function (e = window.event) {
let endPoint = e.changedTouches[0];
let x = endPoint.clientX - this.startPoint.clientX;
let y = endPoint.clientY - this.startPoint.clientY;
if (Math.abs(x) > this.d) {
if (x < 0) {
this.nextItem();
} else {
this.lastItem();
}
}
}
this.Slide = Slide;
})();
使用说明以及源代码后续的优化,欢迎关注我的github 插件地址slide插件
欢迎评论以及留言,同时欢迎关注我的博客定时不断地更新我的文章 陈建光的博客
pc端html轮播带滑块,原生js实现移动端+pc端 轮播插件相关推荐
- pc端html轮播带滑块,swiper.js简单快速实现轮播滑动(兼容PC端、移动端)
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端 移动端(在浏览器将设备切换为手机,这里 ...
- 移动端实现文字轮播_使用原生JS实现移动端图片轮播效果(一)
PC端上实现图片轮播效果非常简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现.话不多说,现在我们就开始移动端轮播效果的实现. 首先就是原生J ...
- html原生js实现图片轮播,如何用原生JS实现图片轮播
图片轮播大多应用在商品展示中. 实现方法:主要通过原生javascript编写. 实现原理: 上图中看到中间的图片就是要展示的图片,只要将所有图片并排放到一个div中然后再放到展示固定大少的窗口当中, ...
- html轮播图jquery,原生js和jquery实现图片轮播特效
(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以 ...
- 原生js三种选项卡效果(轮播)
第三种:定时轮播切换(我这边定时是2s) <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- 移动端html适配方案,原生js实现 兼容常规pc、大屏、移动端 适配方案
1.设计稿 1)pc设计稿为19201080的可视化大屏,16:9比例设计 2)大屏设计稿35841152的可视化大屏,28:9比例设计 3)移动端设计稿 宽750的可视化大屏 2.适配不同屏幕 1) ...
- 原生js模仿网易云音乐首页轮播图
前端初学者,最近在学习该如何写轮播图.看了一些大神的教程之后,想模仿着写一个和网易云音乐首页类似的轮播图.由于还没有学JQuery,所以自己想了个函数用来实现淡入的效果.逻辑思路借鉴了爱嘎的Front ...
- 移动端H5页面ios不支持原生js的alert方法解决办法
1.cont:要弹出的语言,millisecond:毫秒数 function Toast(cont,millisecond){ millisecond=isNaN(millisecond)?3000: ...
- 原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
最新文章
- __new__ __init__区别
- 7号团队:团队任务3-每日任务(2018-11-26)
- [Spring MVC] - JSP + Freemarker视图解释器整合(转)
- 罗兰贝格84页白皮书:一文看懂中国ICT产业新黄金十年
- 在MM32F3273上运行MicroPython,对于性能进行测试
- html页面退出用什么函数,离开网页弹窗函数onbeforeunload与onunload
- YbOJ-网格序列【拉格朗日插值】
- Java商品信息查询
- php 拖拽 上传文件 进度,在Vue中如何实现带进度条的文件拖动上传功能
- (五)Netty之Selector选择器
- ASP.NET Identity “角色-权限”管理 2
- 2021-11-17
- SQL Server 2008R2密钥
- Git-LFS:大文件也有了版本管理
- 基于asp.net固定资产管理系统设计
- python3 用socket编写ftp
- 使用ESP8266驱动TFT显示屏
- elementUI 表格合并单元格-多层级-合并行
- PDO中错误处理:errorCode方法和errorInfo方法
- linux计划任务1
热门文章
- 验证码+ redis
- SiteGround 2019 年 1 月:3 折 70% off 優惠續約折扣,台灣 WordPress 推薦主機評測
- 4搬砖和抱你,我该如何选择?
- uniapp 提示框(showToast、showModal、showLoading)
- 小程序云开发基础教程一
- python开启局域网传输
- 新手蓝牙耳机选购指南:双12不想踩雷五款高性能蓝牙耳机不妨试试
- gorm使用Clauses解决没有id导致的创建报错unterminated quoted identifier at or near ‘‘
- PyQt5的笔记(中-4)
- 使用base target=_self / IE6 cann't open the Internet site 已终止操作