JS完成轮播图（全部JS代码，自动轮播）

需求：
1、点击左右方向图标切换图片
2、点击图片中的小圆点切换对应图片
3、切换图片改变对应小圆点的颜色
4、鼠标离开时自动轮播，鼠标滑入停止轮播
5、不能有空白

思路：
1、先布局，创建轮播图显示区域，容器
2、创建放图片的盒子，放入容器，并创建图片放入盒子，显示第一张，并将所有图片存到数组
3、创建左右按钮，添加至容器内，将左右按钮存到数组
4、创建小圆点放入容器，将小圆点存到数组
上面4个步骤就把轮播图布局完成了（如上图），下面该加效果了
5、给左右按钮添加点击事件，点击右边按钮时，当前图片下标+1，并把方向设置为向左运动，如果大于图片地址数量-1时
让他回到第一张图片，设置下标为0
点击左边按钮时，当前图片下标-1，并把方向设置为向右运动，如果小于0，就让他为当前图片地址数量-1，也就是最后一张图片
6、给小圆点设置点击事件，先获取点击圆点的下标，如果点击元素下标大于当前显示图片下标时，设置方向向左运动，
反之设置向右运动，并且把点击元素下标赋值给当前图片下标
7、设置函数，如果方向向右运动时，在当前图片前面插入一张图片，但是还是显示当前图片，方向向左运动时，在后面
插入一张图片，还是显示当前图片，并且打开开关，让图片轮播
8、设置轮播函数，方向向左运动时，切换下一张图片，并且把第一张图片删除，方向向右运动时，切换前一张图片，删除
当前图片
9、设置小圆点切换的颜色
10、设置自动轮播，给容器添加鼠标进入离开事件，设置一个开关，鼠标进入时停止轮播，鼠标离开自动轮播

下面为JS完整代码

//定义变量
var imgCon,ul,preDot;var imgList=[],dotList=[],bnList=[],time=200,autoBool=false;bool=false,pos=0,x=0,direction="",imgSrcList=["./img/a.png","./img/b.png","./img/c.png","./img/d.png","./img/e.png"];const WIDTH=1680;const HEIGHT=560;const SPEED=50;const LEFT=Symbol();const RIGHT=Symbol();init();function init(){//创建轮播图显示区域，容器var carousel=ce("div",{width:WIDTH+"px",height:HEIGHT+"px",margin:"auto",position:"relative",overflow:"hidden"})//创建放图片的盒子，并放入容器中createImgCon(carousel);//创建左右按钮，并放入容器createBn(carousel);//创建小圆点，并放入容器createDot(carousel);document.body.appendChild(carousel);ul.style.left=(WIDTH-ul.offsetWidth)/2+"px"setInterval(animation,16);carousel.addEventListener("mouseenter",mouseHandler);carousel.addEventListener("mouseleave",mouseHandler);changeDot();}function mouseHandler(e){if(e.type==="mouseenter"){autoBool=false;time=200;}else if(e.type==="mouseleave"){autoBool=true;}}function ce(type,style){var elem=document.createElement(type);Object.assign(elem.style,style);return elem;}function createImgCon(parent){imgCon=ce("div",{width:2*WIDTH+"px",height:HEIGHT+"px",position:"absolute",left:0});for(var i=0;i<imgSrcList.length;i++){var img=ce("img",{width:WIDTH+"px",height:HEIGHT+"px"})img.src=imgSrcList[i];imgList.push(img);}imgCon.appendChild(imgList[0]);parent.appendChild(imgCon);}function createBn(parent){var arr=["left","right"];for(var i=0;i<arr.length;i++){var img=ce("img",{position:"absolute",top:(HEIGHT-60)/2+"px",left:i===0 ? "50px" : "none",right:i===1 ? "50px" : "none"})img.src=`./img/${arr[i]}.png`;bnList.push(img);parent.appendChild(img);img.addEventListener("click",bnClickHandler); }        }function bnClickHandler(e){if(bool) return;if(e.target.src.includes("left.png")){pos--;if(pos<0) pos=imgSrcList.length-1;direction=RIGHT;}else{pos++;if(pos>imgSrcList.length-1) pos=0;direction=LEFT;}changeDot();createNextImg();}function createNextImg(){if(direction===RIGHT){imgCon.insertBefore(imgList[pos],imgCon.firstElementChild);imgCon.style.left=-WIDTH+"px";x=-WIDTH;}else if(direction===LEFT){imgCon.appendChild(imgList[pos]);x=0;}bool=true;}function createDot(parent){ul=ce("ul",{listStyle:"none",margin:0,padding:0,position:"absolute",bottom:"50px",})for(var i=0;i<imgSrcList.length;i++){var dot=ce("li",{width:"40px",height:"40px",border:"2px solid red",borderRadius:"50%",float:"left",marginLeft:i===0 ? "0px" : "20px"})ul.appendChild(dot);dotList.push(dot);}parent.appendChild(ul);ul.addEventListener("click",dotClcikHandler);}function dotClcikHandler(e){if(bool) return;if(e.target.constructor!==HTMLLIElement) return;var index=dotList.indexOf(e.target);if(index===pos) return;direction=index>pos ? LEFT : RIGHT;pos=index;changeDot();createNextImg();}function animation(){imgConMove();autoPlay();}//切换小圆点颜色function changeDot(){if(preDot) preDot.style.backgroundColor="rgba(255,0,0,0)";preDot=dotList[pos];preDot.style.backgroundColor="rgba(255,0,0,0.5)";}//控制放图片盒子的移动function imgConMove(){if(!bool) return;if(direction===LEFT){x-=SPEED;if(x<=-WIDTH){imgCon.firstElementChild.remove();x=0;bool=false;}imgCon.style.left=x+"px";}else if(direction===RIGHT){x+=SPEED;if(x>=0){imgCon.lastElementChild.remove();x=0;bool=false;}imgCon.style.left=x+"px";}}//自动轮播function autoPlay(){if(!autoBool) return;time--;if(time>0) return;time=200;var evt=new MouseEvent("click");bnList[1].dispatchEvent(evt);}

JS完成轮播图（全部JS代码，自动轮播）相关推荐

定时器轮播图---（功能：自动轮播，左右箭头点击切换，点击圆点跳转图片）
定时器轮播图几个部分: 封装重复函数左右箭头点击切换效果自动轮播-定时器控制(模拟左箭头点击效果以显示出自动轮播的效果).鼠标移入停止,移出继续效果点击圆点跳转相应页面(解决了点击后不继续轮播 ...
vue写一个轮播图实例（没有自动轮播）
要点: 1.<li v-for="(item,index) in arr" v-on:click="lick(item)"><!-- 第{{i ...
快乐玩前端：无缝衔接轮播图——原生JS实现
无缝衔接轮播图--原生JS实现原理就不讲了,太麻烦了,大致原理就是两扇推拉门,始终保持推拉门处于开启-闭合状态,大致就这样吧,原理很简单,只是说实现比较麻烦,一直想要实现这样的效果,奈何水平不够,也 ...
【前端】js轮播图，简洁代码，一目了然
对于很多时候,找不到写轮播的方法,都是用框架写的比较多,虽然好用,但作为程序员来说,还是要自己写,才有成就感.废话不多说,最近写了个小小的轮播代码,下面附上代码. 一.第一步写好静态网页代码 < ...
php cms 轮播图,原生JS运动实现轮播图
原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到 ...
HTML视频能不能做成轮播图,vue.js能做轮播图吗？
vue.js能做轮播图吗?答案是:可以.下面本篇文章给大家通过实例介绍一下使用vue.js做轮播图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 最近新学习了vuejs,尝试着用v ...
用jQuery实现轮播图——超简单(代码解释)
先看效果鼠标悬浮时停止轮播,离开时自动轮播,点下一张小圆点会随着动直接上代码 <!DOCTYPE html> <html><head><meta char ...
小白怎么做一个轮播图?（思路+代码）
在页面中写好结构和样式(根据情况而定) 外层用一个$(function(){})函数包裹起来,代表等页面的内容加载完成后再去执行jquery的功能代码. 获取到包裹ul,li的大盒子元素:const ...
2.淘宝店铺轮播图装修方法代码
<!--- 1.淘宝店铺轮播图装修方法https://www.yymoban.com/tool/qp2/1.准备图片1920*500(宽为固定值1920,高度可以修改),将图片上传淘宝图片中心; ...
java图片轮播_java制作广告图片自动轮播控件
首页图片的轮播 /** * 广告图片自动轮播控件 * */ public class ImageCycleView extends LinearLayout { /** * 上下文 */ privat ...

JS完成轮播图（全部JS代码，自动轮播）

JS完成轮播图（全部JS代码，自动轮播）相关推荐

最新文章

热门文章