版权声明：文章为原创作品，转载请注明出处 https://blog.csdn.net/weixin_43654258/article/details/85175691
好好学习 ，天天向上。Are you ready?
话不多说 代码奉上！
创建HTML文件 引用下方js 图片自行更改 简单好用
script部分
var imgList,bnList,rollImg,imgCon,ul,prevLi;
var direct;
var imgArr=["img/a.jpeg","img/b.jpeg","img/c.jpeg","img/d.jpeg","img/e.jpeg"];
var bnArr=["img/left.png","img/right.png"];
var bool=false;
var autoBool=false;
var time=180;
var position=0;
const WIDTH=960;
const HEIGHT=320;
//初始化函数
init();
function init() {
animation();
Method.loadImg(imgArr,loadFinishHandler,"img");
}
//创建容器 按钮 小圆点
function loadFinishHandler(list,type) {
if(type==="img"){
imgList=list;
Method.loadImg(bnArr,loadFinishHandler,"bn")
}else if (type==="bn"){
bnList=list;
createRoll();
createLi();
createBn();
}
}
//创建轮播图容器
function createRoll() {
var rollStyle={
width:WIDTH+"px",
height:HEIGHT+"px",
position:"relative",
margin:"auto",
overflow:"hidden"
};
var imgConStyle={
height:HEIGHT+"px",
position:"absolute"
};
var ulStyle={
listStyle:"none",
position:"absolute",
bottom:"10px"
};
rollImg=Method.createElem("div",document.body,"",rollStyle);
imgCon=Method.createElem("div",rollImg,"",imgConStyle);
ul=Method.createElem("ul",rollImg,"",ulStyle);
imgCon.appendChild(imgList[0]);
imgList[0].style.width=WIDTH+"px";
imgList[0].style.height=HEIGHT+"px";
rollImg.addEventListener("mouseleave",mouseHandler);
rollImg.addEventListener("mouseenter",mouseHandler);
}
//创建按钮
function createBn() {
var leftBnStyle={
position:"absolute",
left:"10px",
top:(HEIGHT-bnList[0].height)/2+"px"
};
var rightBnStyle={
position:"absolute",
right:"10px",
top:(HEIGHT-bnList[1].height)/2+"px"
};
for (var i=0;i<bnList.length;i++) {
rollImg.appendChild(bnList[i]);
Method.setStyle(bnList[i], i === 0 ? leftBnStyle : rightBnStyle);
bnList[i].addEventListener("click", clickHandler);
}
}
//创建li小圆点
function createLi() {
var liStyle={
width:"15px",
height:"15px",
border:"1px solid #ff0000",
backgroundColor:"rgba(255,0,0,0)",
borderRadius:"8px",
float:"left",
marginLeft:"10px"
};
for (var i=0;i<imgList.length;i++){
Method.createElem("li",ul,"",liStyle);
}
ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";
ul.addEventListener("click",liClickHandler);
changeLi();
}
function createNextImg() {
imgList[position].style.width=WIDTH+"px";
imgList[position].style.height=HEIGHT+"px";
imgCon.style.width=WIDTH*2+"px";
if(direct==="left"){
imgCon.appendChild(imgList[position]);
imgCon.style.left="0px";
}else if(direct==="right"){
imgCon.insertBefore(imgList[position],imgCon.firstElementChild);
imgCon.style.left=-WIDTH+"px";
}
changeLi();
bool=true;
}
/*
*
* 修改li样式
* 1、如果上一个li存在时，设置上一个li的样式是背景透明
* 2、设置prevli是当前定位的li
* 3、设置这个li的样式，背景是红色半透
*
* */
function changeLi() {
if(prevLi){
prevLi.style.backgroundColor="rgba(255,0,0,0)";
}
prevLi=ul.children[position];
prevLi.style.backgroundColor="rgba(255,0,0,0.6)";
}
/*
*
* 鼠标进入离开轮播图容器事件
* 1、如果鼠标进入轮播图容器，设置autoBool是false，这样就不会自动轮播了,重置
* 下一次自动轮播的间隔时间为180
* 2、如果鼠标离开了轮播图容器，设置autoBool是true，这样就会自动轮播了
*
*
* */
function mouseHandler(e) {
if(e.type==="mouseenter"){
autoBool=false;
time=180;
}else if(e.type==="mouseleave"){
autoBool=true;
}
}
/*
* 当左右按钮被点击时
* 如果bool是true，不让他继续执行，这是指当正在轮播时，我们不接受点击按钮的事件
* 1、如果点击的是左边按钮时：
* 1）、设置方向向右移动
* 2）、设置让定位值-1
* 3）、如果定位值小于0，让他为图片数组的长度-1
* 2、如果点击的是右边按钮时：
* 1）、设置方向向左移动
* 2）、设置让定位值+1
* 3）、如果定位值等于图片数组的长度，让他为0；
*
* 3、调用添加创建下一个图片的函数
*
* */
function clickHandler(e) {
if(bool) return;
if(this===bnList[0]){
direct="right";
position--;
if(position<0) position=imgList.length-1;
}else if(this===bnList[1]){
direct="left";
position++;
if(position===imgList.length) position=0;
}
createNextImg();
}
/*
* 当小圆点li被点击时
*
* 如果bool是true，不让他继续执行，这是指当正在轮播时，我们不接受点击按钮的事件
* 1、先将ul的所有子项转为数组
* 2、根据当前点击的对象获取到当前点击时数组的第几个索引li
* 3、如果当前点击的索引值是当前的定位值，跳出不执行后面的内容
* 4、如果当前点击的索引值大于定位值，将方向设为向左移动
* 5、如果当前点击的索引值小于定位值，将方向设为向右移动
* 6、定位值设置为当前点击的索引值
* 7、设置创建新的下一张图片函数
*
* */
function liClickHandler(e) {
if(bool) return;
var list=Array.from(ul.children);
var index=list.indexOf(e.target);
if(index===position)return;
if(index>position){
direct="left";
}else{
direct="right";
}
position=index;
createNextImg();
}
/*
* 动画函数
* 每帧调用一次
* 每次调用执行播放图片和自动轮播两个函数内容
*
* */
function animation() {
requestAnimationFrame(animation);
moveImg();
autoPlay();
}
/*
* 自动轮播
* 1、如果autoBool是false，不进入
* 2、每次进入time-1
* 3、如果time是0了，这时候就可以进行一组图片的轮播了
* 4、设置时间间隔回到180帧
* 5、设置方向向左。
* 6、设置定位值+1
* 7、如果定位值等于数组长度时，设置定位值是0
* 8、执行创建下一张图片的函数
*
* */
function autoPlay() {
if(!autoBool) return;
time--;
if(time===0){
time=180;
direct="left";
position++;
if(position===imgList.length) position=0;
createNextImg();
}
}
/*
* 移动图片动画函数
* 1、如果bool是false时，不进入动画
* 2、如果方向向左移动时：
* 1）、设置当前图片容器的左边位置不断减小
* 2）、如果当前图片的容器的左边位置小于等于一个图片的宽度时
* 3）、设置bool是false，这样下一帧就不会在进入动画了，就会停止
* 4）、设置方向是空字符
* 5）、删除图片容器中的第一个元素
* 6）、重修修改位置让当前图片可以显示在中间
*3、如果方向向右移动时：
* 1）、设置当前图片容器的左边位置不断增加
* 2）、如果当前图片的容器的左边位置大于等于0时
* 3）、设置bool是false，这样下一帧就不会在进入动画了，就会停止
* 4）、设置方向是空字符
* 5）、删除图片容器中的最后一个元素
*
*
* */
function moveImg() {
if(!bool) return;
if(direct==="left"){
imgCon.style.left=imgCon.offsetLeft-20+"px";
if(imgCon.offsetLeft<=-WIDTH){
bool=false;
direct="";
imgCon.firstElementChild.remove();
imgCon.style.left="0px";
}
}else if(direct==="right"){
imgCon.style.left=imgCon.offsetLeft+20+"px";
if(imgCon.offsetLeft>=0){
bool=false;
direct="";
imgCon.lastElementChild.remove();
}
}
}
外部封装js代码
var Method=(function () {
return {
// getObject:function (url) {
// if(!~url.indexOf("?")) return;//查找url中是否有？，如果没有直接跳出
// url=url.split("?")[1];//如果有？，我们取出？后面的内容重新赋给url
// var obj={};//新建一个对象
// var arr;//新建变量arr
// if(!~url.indexOf("&")){//查找url中是否有&如果没有&做下面的内容
// if(!~url.indexOf("=")) return;//在查找是否有=，如果没有=，就直接跳出
// arr=url.split("=");//如果查找到=号，我们用=号分成一个数组，两个元素
// obj[arr[0]]=isNaN(Number(arr[1])) ? arr[1] : Number(arr[1]);//用=前面的内容作为obj的属性，=后面的内容作为该属性的值
// return obj;//因为没有&，还有一个值，因此直接将对象返回
// }
// arr=url.split("&");//用&切割为数组，因为上面判断了，这里就有&符
// var arr1;//定义arr1变量
// var bool=false;//初始是false
// for(var i=0;i<arr.length;i++){//循环上面用&切割的数组
// if(!~arr[i].indexOf("=")) continue;//如果数组中那一个字符中没有=，就跳到下一个循环
// arr1=arr[i].split("=");//用=将这个字符切割两个元素的数组
// obj[arr1[0]]=isNaN(Number(arr1[1])) ? arr1[1] : Number(arr1[1]);//将这个字符的=前的值作为属性，=后作为这个属性的值
// bool=true;//如果给obj中写入一个属性和值，这时候，就让bool为true
// }
// //如果bool是true
// if(bool) return obj;//最后返回这个对象
// },
createElem:function (type,parent,content,style,eventType,eventCallBack) {
var elem=document.createElement(type);
if(parent){
parent.appendChild(elem);
}
if(type==="input"){
elem.value=content;
}else if(type==="img"){
elem.src=content;
}else{
if(content){
var text=document.createTextNode(content);
elem.appendChild(text);
}
}
if(style){
Method.setStyle(elem,style);
}
if(eventType && eventCallBack){
elem.addEventListener(eventType,eventCallBack);
}
return elem;
},
setStyle:function (elem,style) {
for(var str in style){
elem.style[str]=style[str];
}
},
// randomColor:function (alpha) {
// var color="rgba(";
// for(var i=0;i<3;i++){
// color+=Math.floor(Math.random()*256)+",";
// }
// if(!isNaN(alpha) && (alpha || alpha===0)){
// if(alpha>1) alpha=1;
// return color+alpha+")";
// }
// return color+Number(Math.random().toFixed(1))+")";
// },
// random:function (min,max) {
// return Math.floor(Math.random()*(max-min)+min);
// }
// getDistance:function (point1,point2) {
// return Math.sqrt(Math.pow(point2.x-point1.x,2)+Math.pow(point2.y-point1.y,2));
// },
// tweenTo:function (elem,begin,end,time,easing) {
// if(!begin){
// begin={left:elem.offsetLeft,top:elem.offsetTop};
// }
// begin.elem=elem;
// var tween=new TWEEN.Tween(begin);
// tween.onUpdate(Method.tweenUpdate);
// // tween.onComplete(Method.tweenComplete);
// if(easing){
// tween.easing(easing);
// }
// if(!time) time=2000;
// end.elem=elem;
// tween.to(end,time);
// tween.start();
// return tween;
// },
// tweenUpdate:function () {
// for(var str in this){
// if(str==="elem"){
// continue;
// }
// this.elem.style[str]=this[str]+"px";
// }
// },
loadImg:function (arr,callBack,type) {
var img=new Image();
img.arr=arr;
img.list=[];
img.num=0;
img.type=type;
img.callBack=callBack;
img.addEventListener("load",Method.loadHandler);
img.src=arr[img.num];
},
LOAD_IMAGE_FINISH:"load_image_finish",
loadHandler:function (e) {
// this--->img
this.list.push(this.cloneNode(false));
this.num++;
if(this.num===this.arr.length){
if(this.callBack){
this.callBack(this.list,this.type);
return;
}
var evt=new Event(Method.LOAD_IMAGE_FINISH);
evt.list=this.list;
evt.types=this.type;
document.dispatchEvent(evt);
return;
}
this.src=this.arr[this.num];
}
}
})();