js 原生轮播图插件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
#swiper{
height: 200px;
width: 200px;
border: 1px solid #cccccc;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#swiper div{
height: 200px;
width: 200px;
float: left;
text-align: center; }
#swiper div:nth-child(1){
background: pink;
}
#swiper div:nth-child(2){
height: 200px;
width: 200px;
float: left;
text-align: center;
background: gray;
}
#swiper div:nth-child(3){
height: 200px;
width: 200px;
float: left;
text-align: center;
background: yellow;
}
#swiper div:nth-child(4){
height: 200px;
width: 200px;
float: left;
text-align: center;
background: pink;
}
#swiper div:nth-child(5){
height: 200px;
width: 200px;
float: left;
text-align: center;
background: gray;
}
#left{
position: absolute;
left: 0;
top: 50%;
transform: translate3d(0,-50%,0);
z-index: 999;
}
#right{
position: absolute;
right: 0;
top: 50%;
transform: translate3d(0,-50%,0);
z-index: 999;
}
#swiperson{
position: relative;
}
</style>
<title>Document</title>
</head>
<body>
<div id="swiper">
<button id="left">左</button>
<button id="right">右</button>
<div id="swiperson">
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
</div>
</div>
<script>
// 轮播图插件 // 样式布局
let allWidth = document.getElementById('swiperson').children.length * document.getElementById('swiper').clientWidth;
let oneWidth = document.getElementById('swiper').clientWidth;
document.getElementById('swiperson').style.width = allWidth + 'px';
document.getElementById('swiperson').style.transform = 'translateX(-'+ oneWidth +'px)';
// 点击逻辑
let index = 1;
let length = document.getElementById('swiperson').children.length;
let flg = true; document.getElementById("swiperson").addEventListener("transitionend", function () {
flg = true;
if(index === length-1){
document.getElementById('swiperson').style.transition = 'none';
document.getElementById('swiperson').style.transform = 'translateX(-'+ oneWidth +'px)';
index = 1
}
if(index === 0){
document.getElementById('swiperson').style.transition = 'none';
document.getElementById('swiperson').style.transform = 'translateX(-'+ oneWidth * (length-2)+'px)';
index = length - 2
}
}); function right() {
if(flg === true){
flg = false;
index++;
document.getElementById('swiperson').style.transition = 'all 1s';
document.getElementById('swiperson').style.transform = 'translateX(-'+ oneWidth*index +'px)'
}
} function left() {
if(flg === true){
flg = false;
index--;
document.getElementById('swiperson').style.transition = 'all 1s';
document.getElementById('swiperson').style.transform = 'translateX(-'+ oneWidth*index +'px)'
}
} // 点击
document.getElementById('left').onclick = function () {
left()
};
document.getElementById('right').onclick = function () {
right();
}; // 自动轮播
var time = setInterval(function () {
right();
},2000) //手动滑动逻辑
var a;
document.getElementById('swiper').ontouchstart = function (ev) {
clearInterval(time)
a = ev.changedTouches[0].pageX;
}; document.getElementById('swiper').ontouchmove = function (ev) {
let b = ev.changedTouches[0].pageX;
console.log(b)
if(b - a > 40){
console.log('右滑动')
left()
}
if(a - b > 40){
console.log('左滑动')
right(); }
} //PC 端 滑动逻辑
var a;
document.getElementById('swiper').onmousedown = function (ev) {
clearInterval(time)
console.log(ev)
a = ev.pageX; document.getElementById('swiper').onmousemove = function (ev) {
console.log('move');
let b = ev.pageX;
if(b - a > 0){
console.log('右滑动')
left()
}
if(a - b > 0){
console.log('左滑动')
right();
}
};
} document.getElementById('swiper').onmouseup = function (ev) {
document.getElementById('swiper').onmousemove = null
} </script>
</body>
</html>
js 原生轮播图插件的更多相关文章
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- js原生轮播图
轮播图是新手学前端的必经之路! 直接上代码! <!DOCTYPE html><html lang="en"><head> <meta ch ...
- featureCarousel.js 3d轮播图插件
jQuery Feature Carousel 插件是国外的一比较优秀的旋转木马图片插件. 点击这里进入原文. 插件特点: 1.处理div的3d旋转木马效果. 2.支持一个中心,2个侧面的功能 3.中 ...
- 小白之js原生轮播图
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- 原生JavaScript（js）手把手教你写轮播图插件（banner）
---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
随机推荐
- 【@ConfigurationProperties注解】Not Found The requested URL /spring-boot/docs/2.2.2.RELEASE/reference/html/configuration-metadata.html was not found on this server.
<!-- 配置文件自动映射 --> <dependency> <groupId>org.springframework.boot</groupId> & ...
- SSM到Spring Boot-校园商铺平台：第01章 开发准备
第01章 开发准备 环境准备 创建一个Maven项目作为开始 添加一个 Server Runtime 添加maven的java编译插件 <build> <finalName>$ ...
- KVM---虚拟机网络管理
在上篇博客中我们完成了 KVM 虚机的安装,但是我发现虚机内的网络是不通的(当然了,在写这篇博客的时候已经把上篇博客中的配置文件修改好了,网络也是通的了,嘻嘻),所以这篇博客总结了一下虚机的网络连接方 ...
- echars 柱状图点击事件
drawlineCRK() { let _this = this; ///绘制echarts 柱状图 let mycharts = this.$echarts.i ...
- Django_前介
Django 1.软件框架 一个公司是由公司中的各部部门来组成的,每一个部门拥有特定的职能,部门与部门之间通过相互的配合来完成让公司运转起来. 一个软件框架是由其中各个软件模块组成的,每一个模 ...
- 前端-HTLM
前端简介: 什么是前端? 任何与用户直接打交道的操作界面都可以被称为前端,如:网页界面,手机界面.... 前端的学习历程和内容: 要学习的内容: 三大重点: 1.Web服务的本质: 浏览器中敲入网址回 ...
- mysql，主键与索引的区别和联系
关系数据库依赖于主键,它是数据库物理模式的基石.主键在物理层面上只有两个用途: 惟一地标识一行. 作为一个可以被外键有效引用的对象. 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成 ...
- 极简配置，业务上云只需 3min
为了简化账号配置环节,实现本地一键开发部署,Serverless Framework 发布了微信扫码一键登录能力,支持用户在 Serverless Framework 环境扫码注册登陆,用户无需登录控 ...
- git 学习系列（一）
目录 git 简介 git的升级 建立仓库 克隆仓库 查看主机名 查看仓库初始状态 将文件提交到暂存区 查看修改详情 提交修改 查看修改记录 查看个人配置信息(在 .gitconfig 文件中) 查看 ...
- Java常用基本类库总结2
1.File类的重要方法(Java中文件.文件夹都用File类表示) 构造函数: public File(String pathname);//根据指定的路径创建File对象. public File ...