自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图，面向对象思路，支持移动端手指触屏滑动。分页器圆点可以选择click点击或mouseover鼠标移入时触发。图片滚动用的setInterval，感觉setInterval不太适合做动画、图片滚动这类，不平滑。还是setTimeout或requestAnimateFrame函数做动画效果好。
文档做了移动端兼容，按照7.5rem的视口宽。HTML这个元素的font-size是document.documentElement.clientWidth / 7.5 得出来的，所以rem是动态的。
菜鸟一枚，高手看了别笑话，请多多指正哈。上源码：
先JavaScript：
function carouselFunc(obj){
var list=obj.listPar.getElementsByTagName(obj.btnName);
var len=list.length,lim=len-1,i=0;
var oriTarget=list[0];
var jg=obj.globalT/obj.step;
var timer,autoTimer,timerTo,outWaitT;
var t=4000;
var luoji=true,flag=false;
var startX,startY,endX,endY,nowX,nowY;
var offX,offY;
if(obj.bow>0){
obj.bow=-obj.bow;
}
function onceScrollFunc(target){
var j=Number(target.getAttribute("data-index"));
var k=Number(oriTarget.getAttribute("data-index"));
if(target.className!="active"){
oriTarget.className="";
target.className="active";
oriTarget=target;
i=j-1;
var oriLoc=obj.parent.offsetLeft;
var targetLoc=obj.bow*j;
clearInterval(timer);
clearInterval(autoTimer);
if(targetLoc<oriLoc){
var py=(targetLoc-oriLoc)/obj.step;
timer=setInterval(function(){
if(oriLoc>targetLoc){
oriLoc+=py;
obj.parent.style.left=oriLoc+"px";
} else{
clearInterval(timer);
obj.parent.style.left=targetLoc+"px";
}
},jg);
}else if(targetLoc>oriLoc){
var py=(targetLoc-oriLoc)/obj.step;
timer=setInterval(function(){
if(oriLoc<targetLoc){
oriLoc+=py;
obj.parent.style.left=oriLoc+"px";
} else{
clearInterval(timer);
obj.parent.style.left=targetLoc+"px";
}
},jg);
}
}
}
if(obj.c_Or_Mo=="mouseover"){
obj.listPar.onmouseover=function(event){
timerTo=setTimeout(function(){
var e=event||window.event;
var target=e.target||e.srcElement;
if(target.tagName.toLowerCase()==obj.btnName){
onceScrollFunc(target);
}
},120);
};
obj.listPar.onmouseout=function(event){
var e=event||window.event;
var target=e.target||e.srcElement;
if(target.tagName.toLowerCase()==obj.btnName){
clearTimeout(timerTo);
}
};
} else if(obj.c_Or_Mo=="click"){
obj.listPar.onclick=function(event){
var e=event||window.event;
var target=e.target||e.srcElement;
if(target.tagName.toLowerCase()==obj.btnName){
onceScrollFunc(target);
}
}
}
obj.prev.onclick=function(){
if(luoji&&!flag){
luoji=false;
clearInterval(autoTimer);
clearInterval(timer);
clearTimeout(outWaitT);
ScrollWidthFunc(0);
}
}
obj.next.onclick=function(){
if(luoji&&!flag){
luoji=false;
clearInterval(autoTimer);
clearInterval(timer);
clearTimeout(outWaitT);
ScrollWidthFunc(1);
}
}
function ScrollWidthFunc(dir){
if(dir==1){
list[i].className="";
if(i<lim){
i+=1;
}else{
i=0;
obj.parent.style.left="0px";
}
list[i].className="active";
oriTarget=list[i];
var nowScroll=obj.parent.offsetLeft;
var objScroll=nowScroll+obj.bow;
var py=obj.bow/obj.step;
timer=setInterval(function(){
if(nowScroll>objScroll){
nowScroll+=py;
obj.parent.style.left=nowScroll+"px";
} else{
clearInterval(timer);
obj.parent.style.left=objScroll+"px";
luoji=true;
}
},jg);
} else{
list[i].className="";
if(i>0){
i-=1;
}else{
i=lim;
obj.parent.style.left=obj.bow*(len+1)+"px";
}
list[i].className="active";
oriTarget=list[i];
var nowScroll=obj.parent.offsetLeft;
var objScroll=nowScroll-obj.bow;
var py=obj.bow/obj.step;
timer=setInterval(function(){
if(nowScroll<objScroll){
nowScroll-=py;
obj.parent.style.left=nowScroll+"px";
} else{
clearInterval(timer);
obj.parent.style.left=objScroll+"px";
luoji=true;
}
},jg);
}
}
if(document.documentElement.clientWidth<751){
obj.parent.addEventListener('touchstart',function(event){
if(!flag){
flag=true;
clearInterval(autoTimer);
clearInterval(timer);
clearTimeout(outWaitT);
var e=event||window.event;
tStart(e);
}
},false);
obj.parent.addEventListener('touchmove',function(event){
var e=event||window.event;
e.preventDefault();
tMove(e);
},false);
obj.parent.addEventListener('touchend',function(event){
var e=event||window.event;
tEnd(e);
},false);
} else{
if(obj.parent.addEventListener){
obj.parent.addEventListener('mousedown',function(event){
if(!flag){
flag=true;
clearInterval(autoTimer);
clearInterval(timer);
clearTimeout(outWaitT);
var e=event||window.event;
tStart(e);
}
},false);
obj.parent.addEventListener('mousemove',function(event){
var e=event||window.event;
e.preventDefault();
tMove(e);
},false);
obj.parent.addEventListener('mouseup',function(event){
var e=event||window.event;
tEnd(e);
},false);
}else{
obj.parent.attachEvent('onmousedown',function(event){
if(!flag){
flag=true;
clearInterval(autoTimer);
clearInterval(timer);
clearTimeout(outWaitT);
var e=event||window.event;
tStart(e);
}
});
obj.parent.attachEvent('onmousemove',function(event){
var e=event||window.event;
e.preventDefault();
tMove(e);
});
obj.parent.attachEvent('onmouseup',function(event){
var e=event||window.event;
tEnd(e);
});
}
}
function tStart(e){
var touch;
if(e.type=='touchstart'){
touch=e.targetTouches[0];
}else{
touch=e;
}
startX=touch.pageX;
startY=touch.pageY;
offX=obj.parent.offsetLeft;
offY=obj.parent.offsetTop;
}
function tMove(e){
if(flag){
var touch;
if(e.type=='touchmove'){
touch=e.targetTouches[0];
}else{
touch=e;
}
nowX=touch.pageX-startX;
nowY=touch.pageY-startY;
obj.parent.style.left=(offX+nowX)+"px";
}
}
function tEnd(e){
var touch;
if(e.type=='touchend'){
touch=e.changedTouches[0];
}else{
touch=e;
}
endX=touch.pageX;
var distance=obj.parent.offsetLeft;
var s=Math.abs(endX-startX);
var judge=Math.abs(obj.bow*0.2);
var lu=Math.abs(obj.bow)-s;
var py=Math.abs(obj.bow/obj.step);
if(luoji){
luoji=false;
if(s>judge){
if(distance<offX){
list[i].className="";
if(i<lim){
i+=1;
var objDis=obj.bow*(Math.floor(Math.abs(distance)/Math.abs(obj.bow))+1);
}else{
obj.parent.style.left=-s+"px";
distance=-s;
var objDis=obj.bow;
i=0;
}
list[i].className="active";
oriTarget=list[i];
flag=false;
timer=setInterval(function(){
if(distance>objDis){
distance-=py;
obj.parent.style.left=distance+"px";
}else{
clearInterval(timer);
obj.parent.style.left=objDis+"px";
luoji=true;
if(e.type=='touchend'){
clearInterval(autoTimer);
play(4000,1);
}
}
},jg);
}else{
list[i].className="";
if(i>0){
i-=1;
var objDis=obj.bow*(Math.floor(Math.abs(distance)/Math.abs(obj.bow)));
}else{
obj.parent.style.left=(obj.bow*(len+1)+s)+"px";
distance=obj.bow*(len+1)+s;
var objDis=obj.bow*len;
i=lim;
}
list[i].className="active";
oriTarget=list[i];
flag=false;
timer=setInterval(function(){
if(distance<objDis){
distance+=py;
obj.parent.style.left=distance+"px";
}else{
clearInterval(timer);
obj.parent.style.left=objDis+"px";
luoji=true;
if(e.type=='touchend'){
clearInterval(autoTimer);
play(4000,0);
}
}
},jg);
}
}else{
var targetP=obj.bow*(Math.floor(Math.abs(offX)/Math.abs(obj.bow)));
if(distance<targetP){
timer=setInterval(function(){
if(distance<targetP){
distance+=py;
obj.parent.style.left=distance+"px";
}else{
clearInterval(timer);
obj.parent.style.left=targetP+"px";
luoji=true;
if(e.type=='touchend'){
clearInterval(autoTimer);
play(4000,1);
}
}
},jg);
}else{
timer=setInterval(function(){
if(distance>targetP){
distance-=py;
obj.parent.style.left=distance+"px";
}else{
clearInterval(timer);
obj.parent.style.left=targetP+"px";
luoji=true;
if(e.type=='touchend'){
clearInterval(autoTimer);
play(4000,1);
}
}
},jg);
}
}
} else{
var targetP2=(i+1)*obj.bow;
flag=false;
if(targetP2<distance){
timer=setInterval(function(){
if(distance>targetP2){
distance-=py;
obj.parent.style.left=distance+"px";
}else{
clearInterval(timer);
obj.parent.style.left=targetP2+"px";
luoji=true;
if(e.type=='touchend'){
clearInterval(autoTimer);
play(4000,1);
}
}
},jg)
}else{
timer=setInterval(function(){
if(targetP2>distance){
distance+=py;
obj.parent.style.left=distance+"px";
}else{
clearInterval(timer);
obj.parent.style.left=targetP2+"px";
luoji=true;
if(e.type=='touchend'){
clearInterval(autoTimer);
play(4000,0);
}
}
},jg)
}
}
}
obj.viewport.onmouseover=function(){
clearInterval(autoTimer);
clearTimeout(outWaitT);
}
obj.viewport.onmouseout=function(event){
outWaitT=setTimeout(function(){
play(4000,1);
},1000);
};
function play(t,i){
autoTimer=setInterval(function(){
if(luoji){
luoji=false;
ScrollWidthFunc(i);
}
},t);
}
play(4000,1);
}
然后上HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<script type="text/javascript">
var viWidth=document.documentElement.clientWidth;
if(viWidth<750){
document.documentElement.style.fontSize=viWidth/7.5+"px";
}else{
document.documentElement.style.fontSize="100px";
}
</script>
<title>轮播图移动端试验</title>
<style type="text/css">
html{
height:100%;
text-align: center;
}
body{
width:7.5rem;
height:100%;
margin:0 auto;
text-align: center;
}
.clearfix:after{
content:"";
display: block;
clear: both;
height:0px;
}
.clearfix{
zoom:1;
}
.myTitle{
margin:0px;
line-height:0.6rem;
height:0.6rem;
padding-top:0.2rem;
padding-bottom:0.2rem;
text-align:center;
}
.carousel1{
width:7rem;
height:3.5rem;
margin-left:auto;
margin-right:auto;
position: relative;
overflow:hidden;
}
.viewportA{
width:7rem;
height:3.5rem;
position: relative;
overflow: hidden;
z-index: 1;
}
.parentA{
width:1000%;
position: absolute;
}
.parentA .item{
float:left;
position: relative;
width:7rem;
height:3.5rem;
margin:0px;
display:inline;
cursor: pointer;
}
.parentA .item img{
display: block;
width:7rem;
height:3.5rem;
}
.carousel1 .prevA{
position:absolute;
height:10%;
width:auto;
left:0;
top:45%;
z-index:3;
opacity:0.4;
cursor: pointer;
}
.carousel1 .nextA{
position:absolute;
height:10%;
width:auto;
right:0;
top:45%;
z-index:3;
opacity:0.4;
cursor: pointer;
}
.carousel1 .prevA:hover {
opacity:0.9;
}
.carousel1 .nextA:hover {
opacity:0.9;
}
.circleListA{
position:absolute;
z-index: 3;
bottom:0.2rem;
width:1.05rem;
height:0.15rem;
left:50%;
margin-left:-0.525rem;
padding-top:0.03rem;
padding-bottom:0.03rem;
zoom:1;
background-color:rgba(255,255,255,0.5);
border-radius:0.1rem;
}
.circleListA span{
float:left;
height:0.15rem;
width:0.15rem;
border-radius:70%;
margin-right:0.05rem;
background-color:white;
cursor: pointer;
}
.circleListA span:hover{
background:#ffd700;
}
.circleListA .active{
background:#ff4500!important;
}
</style>
</head>
<body>
<h1 class="myTitle"></h1>
<div class="carousel1" id="carousel1">
<div class="viewportA" id="viewportA">
<div id="parentA" class="parentA clearfix" style="left:-7rem">
<div class="item"><img src="data:image/5.jpg" width="100%"></div>
<div class="item"><img src="data:image/1.jpg" width="100%"></div>
<div class="item"><img src="data:image/2.jpg" width="100%"></div>
<div class="item"><img src="data:image/3.jpg" width="100%"></div>
<div class="item"><img src="data:image/4.jpg" width="100%"></div>
<div class="item"><img src="data:image/5.jpg" width="100%"></div>
<div class="item"><img src="data:image/1.jpg" width="100%"></div>
</div>
</div>
<img src="data:image/btn-left.png" id="prevA" class="prevA" alt="点击->上一张">
<img src="data:image/btn-right.png" id="nextA" class="nextA" alt="点击->下一张">
<div id="circleListA" class="circleListA clearfix">
<span data-index="1" class="active" style="margin-left:0.05rem"></span>
<span data-index="2" class=""></span>
<span data-index="3" class=""></span>
<span data-index="4" class=""></span>
<span data-index="5" class=""></span>
</div>
</div>
<script type="text/javascript" src="carousel-oop.js" charset="UTF-8"></script>
<script type="text/javascript">
if(window.addEventListener){
window.addEventListener("load",function(){
var carouselObj1={};
carouselObj1.carouselCon=document.getElementById("carousel1");
carouselObj1.viewport=document.getElementById("viewportA");
carouselObj1.parent=document.getElementById("parentA");
carouselObj1.listPar=document.getElementById("circleListA");
carouselObj1.btnName="span";
carouselObj1.prev=document.getElementById("prevA");
carouselObj1.next=document.getElementById("nextA");
carouselObj1.globalT=500;
carouselObj1.step=50;
carouselObj1.c_Or_Mo='mouseover';
carouselObj1.bow=-viewportA.clientWidth;
carouselFunc(carouselObj1);
},false);
}else if(window.attachEvent){
window.attachEvent("onload",function(){
var carouselObj1={};
carouselObj1.carouselCon=document.getElementById("carousel1");
carouselObj1.viewport=document.getElementById("viewportA");
carouselObj1.parent=document.getElementById("parentA");
carouselObj1.listPar=document.getElementById("circleListA");
carouselObj1.btnName="span";
carouselObj1.prev=document.getElementById("prevA");
carouselObj1.next=document.getElementById("nextA");
carouselObj1.globalT=500;
carouselObj1.step=50;
carouselObj1.c_Or_Mo='mouseover';
carouselObj1.bow=-viewportA.clientWidth;
carouselFunc(carouselObj1);
});
}
</script>
</body>
</html>
自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。的更多相关文章
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- 原生js写简单轮播图方式１－从左向右滑动
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生 js 左右切换轮播图
使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
- photoSlider-html5原生js移动开发轮播图-相册滑动插件
简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...
- 用 JS 写 （轮播图 / 选项卡 / 滑动门）
页面中经常会用到各式各样的轮播图,今天贺贺为大家介绍一种常用的方法,对于JS我们需要举一反三,一种方法可以对多个轮播样式进行渲染. <head> <meta charset=&quo ...
- 【原生JS】层叠轮播图
又是轮播?没错,换个样式玩轮播. HTML: <!DOCTYPE html> <html lang="en"> <head> <meta ...
随机推荐
- July 02nd 2017 Week 27th Sunday
No safe wading in an unknown water. 未知水深浅,涉水有危险. Is this the theory that has been the guideline for ...
- June 30th 2017 Week 26th Friday
Love me little and love me long. 不求情意浓,但愿情意久. Some people say beautiful young people are the creatur ...
- easyui学习笔记7—在手风琴中显示表格
在这一篇中我们看看如何在手风琴里面显示表格数据的. 1.先看看引用的资源 <link rel="stylesheet" type="text/css" h ...
- AWK入门指南
一. AWK入门指南 Awk是一种便于使用且表达能力强的程序设计语言,可应用于各种计算和数据处理任务.本章是个入门指南,让你能够尽快地开始编写你自己的程序.第二章将描述整个语言,而剩下的章节将向你展示 ...
- 移动端适配插件（flexible.js）
;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.que ...
- 指数循环节&欧拉降幂
证明:https://www.cnblogs.com/maijing/p/5046628.html 注意使用条件(B的范围) 例题: FZU1759 HDU2837 ZOJ1674 HDU4335
- im2rec打包图片
https://mxnet.incubator.apache.org/faq/finetune.html python ~/mxnet/tools/im2rec.py --list --recursi ...
- 配置开发环境&安装sklearn
我的开发环境是Jupyter lab,所用的库和版本大家参考: Python 3.7.1(你的版本至少要3.4以上) Scikit-learn 0.20.0 (你的版本至少要0.19) Graphvi ...
- Selenium图片上传
方式1: 如果是input类型的标签则可直接赋值 部分代码: driver.find_element_by_name("file").send_keys("E:\\tes ...
- Server.xml解析
来源 本文整理自 <Tomcat内核设计剖析>.<Tomcat结构解析> 加上自己的理解.源码来自 Tomcat8.5 版本 <Server port="800 ...