js实现无缝轮播图效果
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了js实现无缝轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现无缝轮播图的具体代码，供大家参考，具体内容如下
//Utils.js
//封装 预加载图片
var Utils=(function () {
return {
//SSS
loadImg:function (srcList,callBack) {//图片地址 回调函数
var img=new Image();
img.num=0;//初始化num为0 图片数
img.imgList=[];//存放图片
img.srcList=srcList;
img.callBack=callBack;//回调函数
img.addEventListener("load",this.loadHandler);//加载load
img.src="./img/"+srcList[img.num];//拼接图片地址
},
loadHandler:function (e) {
//this 指代img
/*cloneNode该方法将复制并返回调用它的节点的副本。
* 如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。
否则（也就是默认值，或者false），它只复制当前节点。*/
this.imgList.push(this.cloneNode(false));//将img图片尾插入imgList数组
this.num++;
if(this.num>=this.srcList.length){//图片数>=srcList数组(保存图片地址)的长度
this.callBack(this.imgList);//将数组传入回调函数
return;
}
//事件侦听没有被删除,只需更改src,监听加载load后触发该事件,进入该函数this.loadHandler
this.src="./img/"+this.srcList[this.num];
}
}
})();
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝轮播图</title>
<script src="js/Utils.js"></script>
</head>
<body>
<script>
//无缝轮播图,全JS
/*
* 1\轮播图大容器-->图片容器,左右按钮,小圆点
* 2\点击按钮,标志当前挪动图片索引,移动的方向
* 3\点击小圆点,标志当前挪动图片的索引,移动的方向
* 4\创建目标图片放置在当前图片的前或后
* 5\移动图片容器到目标图片位置后,删除前或后原来的图片
* */
var bnList,imgList,imgCon,ul,pre;//存储 左右按钮名 图片名 图片容器 下方圆点标签容器
var position=0,//图片的序号
direction="left",//方向
speed=30,
time=300,
autoBoolean=false,
playBoolean=false;
const WIDTH=1200,//常量定义轮播图高宽
HEIGHT=400;
init();
function init() {
//调用Utils中的loadImg方法 将图片名数组 和回调函数名传入
Utils.loadImg(["left.png","right.png","a.jpeg","b.jpeg","c.jpeg","d.jpeg","e.jpeg"],createCarousel);
}
function createCarousel(list) {//创建轮播图
bnList=list.splice(0,2);//将左右移动图标名从list数组中移除，添入bnList数组
imgList=list;//将图片名添入数组imgList
imgList.forEach(function (t) {//遍历数组，给每个img元素添加宽高
t.style.width=WIDTH+"px";
t.style.height=HEIGHT+"px";
});
var carousel=ce("div",{//调用函数ce创建div并添加样式
width:WIDTH+"px",
height:HEIGHT+"px",
position:"relative",
margin:"auto",
overflow:"hidden",
backgroundColor:"rgba(255,0,0,0.3)"
});
console.log(carousel);//carousel为最外层div容器，包括轮播图容器，圆点标签， 左右按钮
createImgCon(carousel);//调用函数createImgCon在 carousel中创建轮播图图片容器， 传入carousel为父容器
createBn(carousel);//调用函数createBn中创建左右按钮， 传入carousel为父容器
createDot(carousel);//调用函数createDot中创建下方圆点标签， 传入carousel为父容器
document.body.appendChild(carousel);//在body中插入div carousel
carousel.addEventListener("mouseenter",mouseHandler);//给div carousel添加鼠标进入事件
carousel.addEventListener("mouseleave",mouseHandler);//给div carousel添加鼠标离开事件
//下方圆点标签距左边距
ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";
changeDot();
setInterval(animation,16);//设置周期执行函数
}
function mouseHandler(e) {//鼠标停止，开始轮播图自动播放
if(e.type==="mouseenter"){//鼠标进入停止自动播放，重置time计时
autoBoolean=false;
time=300;
}else if(e.type==="mouseleave"){//鼠标离开开始自动播放
autoBoolean=true;
}
}
function createImgCon(parent) {//创建轮播图容器div
imgCon=ce("div",{//调用ce创建div
width:WIDTH+"px",
height:HEIGHT+"px",
position:"absolute",
left:"0px"
});
imgCon.appendChild(imgList[position]);//在创建的div imgCon 中添加图片
parent.appendChild(imgCon);//在传来的父元素div中添加新建的div imgCon
}
function createBn(parent) {//创建左右按钮 接受传来的父元素
bnList.forEach(function (t,index) {//遍历数组bnList
Object.assign(t.style,{
position:"absolute",
left:index===0 ? "20px" : "none",
right:index===1 ? "20px" : "none",
top:(HEIGHT-t.height)/2+"px"
});
t.addEventListener("click",bnClickHandler);//按钮添加点击监听事件
parent.appendChild(t);//在传来的父元素中添加左右按钮
})
}
function createDot(parent) {//创建下方圆点标签
ul=ce("ul",{//调用ce创建ul，添加样式
listStyle:"none",
position:"absolute",
bottom:"20px",
margin:"0px",
padding:"0px"
});
imgList.forEach(function (t,index) {//遍历imgList，有几张图创建几个li
var li=ce("li",{//新建li，添加样式
float:"left",
width:"18px",
height:"18px",
borderRadius:"9px",
border:"1px solid rgba(255,0,0,0.8)",
marginLeft: index===0 ? "0px" : "10px"
});
ul.appendChild(li);//ul中插入li
});
ul.addEventListener("click",dotClickHandler);//给ul添加监听单击时间 事件委托
parent.appendChild(ul);//在父元素中插入ul
}
function bnClickHandler(e) {//左右移点击移动图片
if(playBoolean) return;
if(bnList.indexOf(this)===0){//点击左移按钮
position--;//图片序号--
direction="right";//图片方向向右
if(position<0) position=imgList.length-1;//如果在第0张点左移，position为最后一张图的序号
}else{//点击右移按钮
position++;//图片序号++
direction="left";//图片方向向左
if(position>imgList.length-1) position=0;//如果在最后1张点右移，position为第一张图的序号
}
createNextImg();//创建下一张图片
}
function dotClickHandler(e) {//圆点标签点击移动图片
if(playBoolean) return;
if(e.target.nodeName!=="LI") return;//点击的不是li return
var arr=Array.from(this.children);//this=ul
var index=arr.indexOf(e.target);//index存点击的li在arr中的下标
if(index===position) return;//如果是当前这个位置点,不操作
if(index>position){//如果点击的大于当前
direction="left";//图片方向向左
}else{//如果点击的小于当前
direction="right";//图片方向向右
}
position=index;//position赋值为点击的li序号
createNextImg();//创建下一张图片
}
function createNextImg() {//创建下一张图片
imgCon.style.width=WIDTH*2+"px";//将轮播图容器宽度*2
if(direction==="left"){//如果图片向左运动
imgCon.appendChild(imgList[position]);//在当前图片后面添加子元素
}else if(direction==="right"){//如果图片向右运动
imgCon.insertBefore(imgList[position],imgCon.firstElementChild);//在第一张图片前面添加子元素
imgCon.style.left=-WIDTH+"px";//移动原有图片容器的位置左右一张图片宽度
}
playBoolean=true;//图片加载完设置为true
changeDot();//改变下方圆形标签的颜色
}
function changeDot() {//改变下方圆形标签的颜色
if(pre){
pre.style.backgroundColor="rgba(255,0,0,0)";//颜色初始化为透明
}
pre=ul.children[position];//获取当前轮播图对应li
pre.style.backgroundColor="rgba(255,0,0,0.5)";//显示该li的颜色
}
function animation() {
imgPlay();//图片移动
autoPlay();//自动移动
}
function imgPlay() {
if(!playBoolean) return; //为false return
if(direction==="right"){//图片右移
imgCon.style.left=imgCon.offsetLeft+speed+"px";//图片以speed的速度向右划过
if(imgCon.offsetLeft>=0){//运动到轮播图框停止移动
imgCon.style.left="0px";
playBoolean=false;
imgCon.lastElementChild.remove();//移走上一张图片
imgCon.style.width=WIDTH+"px";//重置轮播图容器宽度
}
}else if(direction==="left"){//图片左移
imgCon.style.left=imgCon.offsetLeft-speed+"px";//图片以speed的速度向左划过
if(imgCon.offsetLeft<=-WIDTH){//运动到轮播图框左一张图片的宽度处停止移动
playBoolean=false;
imgCon.firstElementChild.remove();//移走上一张图片
imgCon.style.left="0px";//重置轮播图容器位置
imgCon.style.width=WIDTH+"px";//重置轮播图容器宽度
}
}
}
function autoPlay() {//自动轮播
if(!autoBoolean) return;
time--;
if(time>0) return;
time=200;
var evt=new MouseEvent("click");
bnList[1].dispatchEvent(evt);//dispatchEvent事件触发器，触发bnList[1]的click事件
}
function ce(type,style) { //创建标签元素并添加样式 (创建元素类型 ,添加的css样式)
var elem=document.createElement(type);
/*Object.assign方法用来将源对象（source）的所有可枚举属性，
复制到目标对象（target）。它至少需要两个对象作为参数，
第一个参数是目标对象，后面的参数都是源对象。*/
Object.assign(elem.style,style);
return elem;
}
</script>
</body>
</html>
精彩专题分享：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：前端深入理解Typescript泛型概念
下一篇：js实现无缝轮播图