资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/　用js实现点击切换和自动播放的轮播图示例

　用js实现点击切换和自动播放的轮播图示例

3403771864 / 753人阅读

　　js实现点击切换和自动播放的轮播图，其实十分简单，话不多说，我们直接看示例：

　　轮播图案例

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="UTF-8">
　　<meta name="viewport"content="width=device-width,initial-scale=1.0">
　　<title>Document</title>
　　</head>
　　<body>
　　<script>
　　//1、布局
　　//2、定义当前第几张图片和应该向什么方向运动
　　//3、将需要放置的图片根据方向放在前面或者后面
　　//4、将整个容器向左或者向右移动
　　//5、完成后将上一次的图片删除
　　//imgCon放置所有图片的容器
　　//dotList放置小圆点列表
　　//bnList放置左右按钮的数组
　　//imgList放置所有图片的数组
　　//pos确认当前图片是第几张
　　//direction图片运行的方向
　　//imgSrcList图片地址数组
　　var imgCon,ul,preDot;
　　var pos=0,
　　x=0,
　　bool=false;
　　dotList=[],
　　imgList=[],
　　bnList=[],
　　time=300,
　　imgSrcList=["./img/a.png","./img/b.png","./img/c.png","./img/d.png","./img/e.png"]
　　direction=""
　　autoBool=false;
　　const WIDTH=1500;
　　const HEIGHT=500;
　　const LEFT=Symbol();
　　const RIGHT=Symbol();
　　const SPEED=40;
　　init();
　　/*
　　init()初始化函数
　　1、创建轮播图外层容器
　　2、创建轮播图图片容器
　　3、创建按钮列表
　　4、创建小圆点列表
　　5、将轮播图容器放在body中
　　6、切换小圆点，因为当前是第0张，所以让第一个小圆点背景为红色
　　7、将小圆点容器设置水平居中
　　8、设置时间间隔，每16毫秒执行animation函数一次，因为一秒是1000毫秒
　　一秒中执行60次，就是60帧频，每次花费的时间是16.6666毫秒
　　9、给最外层的轮播图增加事件侦听，一个是鼠标进入，一个是鼠标离开
　　*/
　　function init(){
　　var carousel=ce("div",{
　　width:WIDTH+"px",
　　height:HEIGHT+"px",
　　position:"relative",
　　margin:"auto",
　　overflow:"hidden"
　　});
　　createImgCon(carousel);
　　createButton(carousel);
　　createDotList(carousel);
　　document.body.appendChild(carousel);
　　changeDot();
　　ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";
　　setInterval(animation,16);
　　carousel.addEventListener("mouseenter",mouseHandler);
　　carousel.addEventListener("mouseleave",mouseHandler);
　　}
　　/*
　　轮播图进入和离开的事件函数
　　1、如果进入轮播图，设置自动轮播的开关是false，不会自动轮播
　　并且重新将计时设置为300
　　2、如果离开轮播图，设置自动轮播开关是true，就会自动轮播了
　　*/
　　function mouseHandler(e){
　　if(e.type==="mouseenter"){
　　autoBool=false;
　　time=300;
　　}else if(e.type==="mouseleave"){
　　autoBool=true;
　　}
　　}
　　/*
　　创建元素
　　参数：
　　type创建元素的类型，字符串
　　style创建元素的样式，对象，使用对象方式给出该容器的样式
　　1、根据类型创建元素
　　2、将给入的样式设置给元素的行内样式
　　3、返回创建好的元素
　　*/
　　function ce(type,style){
　　var elem=document.createElement(type);
　　//ES6的方法，将后面的对象中的属性复制到前面对象中
　　Object.assign(elem.style,style);//等同于下面写法
　　/*for(var prop in style){
　　elem.style[prop]=style[prop];
　　}*/
　　return elem;
　　}
　　/*
　　创建轮播图容器和图片
　　参数：
　　parent父容器，将创建好的容器和图片放在父容器内
　　1、创建图片容器，容器宽度是两张图片的宽度
　　2、根据所有轮播图地址数组，创建所有图片并且放在数组imgList中
　　3、将第0张图片放在创建图片容器imgCon中
　　4、将图片容器放在整个轮播图容器中
　　*/
　　function createImgCon(parent){
　　imgCon=ce("div",{
　　position:"absolute",
　　width:2*WIDTH+"px",
　　height:HEIGHT+"px",
　　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);
　　}
　　/*
　　创建左右按钮函数
　　参数：
　　parent父容器，将创建好的按钮放在父容器内
　　1、创建按钮地址数组
　　2、循环这个地址数组，创建所有图片，并且放置对应的位置
　　3、设置图片地址
　　4、将按钮图片放在轮播图容器中
　　5、给左右按钮增加点击事件执行函数bnClickHander
　　*/
　　function createButton(parent){
　　//局部变量
　　var arr=["left","right"];
　　for(var i=0;i<arr.length;i++){
　　var img=ce("img",{
　　position:"absolute",
　　//(外容器高度-当前图片高度)/2垂直居中
　　top:(HEIGHT-60)/2+"px",
　　//如果是第0张图片，左边按钮，定位居左50像素，否则none
　　left:i===0?"50px":"none",
　　//如果是第1张图片，右边按钮，定位居右50像素，否则none
　　right:i===1?"50px":"none",
　　});
　　img.src=`./img/${arr<i>}.png`;
　　bnList.push(img);
　　parent.appendChild(img);
　　img.addEventListener("click",bnClickHander);
　　}
　　}
　　/*
　　创建小圆点容器
　　参数：
　　parent父容器，将创建好的小圆点放在父容器内
　　1、创建ul设置样式
　　2、根据图片地址的数组，循环若干次，有多少图片就循环多少次创建小圆点
　　3、将每个小圆点存在数组dotList中
　　4、将小圆点放在ul中
　　5、给ul增加点击事件，实际是点击小圆点，事件委托
　　*/
　　function createDotList(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:"28px",
　　height:"28px",
　　borderRadius:"50%",
　　border:"2px solid#FF0000",
　　float:"left",
　　marginLeft:i===0?"0px":"15px"
　　});
　　dotList.push(dot);
　　ul.appendChild(dot);
　　}
　　//dotList=Array.from(ul.children);
　　parent.appendChild(ul);
　　ul.addEventListener("click",dotClickHandler);
　　}
　　/*
　　点击左右按钮事件函数
　　e点击事件MouseEvent
　　e.target是被点击的按钮图片
　　如果bool是true，也就是当前轮播图正在播放时，点击按钮跳出，不继续执行
　　1、判断被点击图片的地址里面是包含有left.png字符串
　　如果有，就是点击左侧按钮，反之就是右侧按钮
　　2、如果点击了左侧按钮，当前图片下标-1
　　如果小于0，让它为当前图片地址数量-1，最大应有的图片下标，并且设置方向是向右运动
　　3、如果点击了右侧按钮，当前图片下标+1，如果大于当前图片地址数量-1，就让它为0
　　回到最开始第0张图片，并且设置方向是向右运动
　　*/
　　function bnClickHander(e){
　　if(bool)return;
　　//查找图片的src地址中是否包含
　　if(e.target.src.includes("left.png")){
　　pos--;
　　//imgSrcList.length-1图片数组的长度减一，也就是pos根据图片数组的长度来定值
　　if(pos<0)pos=imgSrcList.length-1;
　　direction=RIGHT;
　　}else{
　　pos++;
　　if(pos>imgSrcList.length-1)pos=0;
　　direction=LEFT;
　　}
　　createNextImg();
　　}
　　/*
　　小圆点点击事件函数
　　e鼠标事件对象MouseEvent
　　e.target是鼠标点击的目标
　　因为使用是事件委托，因此判断点击目标是不是li，如果不是就跳出
　　如果bool是true，也就是当前轮播图正在播放时，点击按钮跳出，不继续执行
　　1、判断点击目标是否是li，不是跳出
　　2、获取当前点击的小圆点时数组中第几个
　　3、如果当前的点击小圆点的下标和当前展示图片的下标相同时，跳出不处理
　　4、如果大于当前展示图片的下标，方向设置为向左运动，反之向右
　　5、将当前点击的下标设为当前应展现图片的下标
　　*/
　　function dotClickHandler(e){
　　if(bool)return;
　　//if(e.target.nodeName!="LI")return;
　　if(e.target.constructor!==HTMLLIElement)return;
　　var index=dotList.indexOf(e.target);
　　if(index===pos)return;
　　direction=index>pos?LEFT:RIGHT;
　　pos=index;
　　createNextImg();
　　}
　　/*
　　创建下一张需要显示的图片
　　当点击左右按钮和当点击小圆点时，触发该函数
　　1、如果方向想左运动，给图片容器尾部添加新的图片
　　2、如果方向向有运动，给图片容器的最头部添加新图片
　　但是这个时候原图被挤到最后，然后将整个容器向左移动一个图片宽度
　　3、设置完成后，设置bool是true，这时候就打开了动画的播放开关
　　动画就可以完成播放了
　　4、切换当前小圆点
　　*/
　　function createNextImg(){
　　//console.log(direction,pos,imgList[pos]);
　　if(direction===LEFT){
　　imgCon.appendChild(imgList[pos]);
　　x=0;
　　}else if(direction===RIGHT){
　　//insertBefore要插入的元素，插入在谁的前面
　　imgCon.insertBefore(imgList[pos],imgCon.firstElementChild);
　　imgCon.style.left=-WIDTH+"px";
　　x=-WIDTH;
　　}
　　bool=true;
　　changeDot();
　　}
　　/*
　　切换小圆点
　　preDot是对上一次小圆点的引用变量
　　刚开始第一次时，没有引用，因此不执行，并且设置第一次设置了第0个萧远山
　　更改了第0个小圆点的背景色
　　第二次进来上次小圆点的引用时第0个，所以就将上次的小圆点修改背景透明
　　将本次小圆点设置给这个引用，并且修改背景色
　　再次进入就可以修改原来的，设置新的
　　*/
　　function changeDot(){
　　if(preDot){
　　preDot.style.backgroundColor="rgba(255,0,0,0)";
　　}
　　preDot=dotList[pos];
　　preDot.style.backgroundColor="rgba(255,0,0,0.5)";
　　}
　　/*
　　每16毫秒执行该函数一次
　　1、执行imgConMove这个函数，让图片移动的方法
　　2、执行自动轮播
　　*/
　　function animation(){
　　imgConMove();
　　autoplay();
　　}
　　/*
　　每16毫秒让图片移动一次
　　开始的时候就一直运行，因为有一个bool值判断，如果false时，一直不能进入
　　如果可以进入
　　1、如果方向为左
　　不断让变量x递减，每16毫秒减40像素，设置图片容器位置，图片容器就可以移动了
　　当图片容器的第一张图完全移动到最左侧以后，也就是x小于等于负的图片宽度
　　设置bool值false，16毫秒后进入时直接跳出
　　删除掉移到最左侧的图片，后面的图片会补充到最前面，设置将x为0，让整个容器向后挪回初始位置
　　2、如果方向向右
　　x不断增加40像素
　　如果x大于0，表示左侧的图片已经移到中间位置，原图片移到了右侧
　　这个时候停止运动，bool设为false，x设为初始的0，删除右侧的图片
　　*/
　　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){
　　bool=false;
　　x=0;
　　imgCon.lastElementChild.remove();
　　}
　　imgCon.style.left=x+"px";
　　}
　　}
　　/*
　　自动轮播
　　1、如果自动轮播开关是fasle时，跳出
　　2、time不断减少
　　3、如果time大于0就不继续执行跳出
　　4、time等于0，设置time初始为300
　　5、创建一个点击事件对象
　　6、向右侧按钮抛发这个点击事件
　　*/
　　function autoplay(){
　　if(!autoBool)return;
　　time--;
　　if(time>0)return;
　　time=300;
　　var evt=new MouseEvent("click");
　　bnList[1].dispatchEvent(evt);
　　}
　　</script>
　　</body>
　　</html>

　　效果展示


GPU云服务器 云服务器 php的轮播怎么做 js实现轮播 原生JS实现轮播 js 切换视频播放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128201.html

相关文章

  • 【VIP视频网站项目v1.0.3】基于Nodejs开发的VIP视频网站项目及源码分享

    摘要：在线体验地址源码项目预览主页面登录页面注册页面会员中心电影播放页面电影弹幕功能视频网站项目已经完功能如下当前最新版本增加自动抓取功能，网站数据定期实时更新电影和电视剧数据抓取电影数据信息前端展现电影页面图片的自动抓取下载和展示代码结构调整简 在线体验地址:http://vip.52tech.tech/ GIthub源码：https://github.com/xiugangzha......

    Cympros 评论0 收藏0

  • 手把手教你用原生JavaScript造轮子（2）——轮播图（更新：ES6版本）

    摘要：绑定轮播事件然后是鼠标移入移出事件的绑定鼠标移入移出事件移入时停止轮播播放的定时器，移出后自动开始下一张的播放。 通过上一篇文章的学习，我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图，希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Lets begin! 目前项目使用 ES5及UMD 规范封装，所以在前端暂时只支持标签的引入方式...

    jasperyang 评论0 收藏0

  • task0002（四）- 练习：数据处理、轮播及交互

    摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。 转载自我的个人博客 欢迎大家批评指正 包括5部分： 小练习1-处理用户输入 小练习2-日期对象的使用 小练习3：轮播图 小练习4：输入提示框 小练习...

    cnTomato 评论0 收藏0

  • task0002（四）- 练习：数据处理、轮播及交互

    摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。 转载自我的个人博客 欢迎大家批评指正 包括5部分： 小练习1-处理用户输入 小练习2-日期对象的使用 小练习3：轮播图 小练习4：输入提示框 小练习...

    赵春朋 评论0 收藏0

发表评论

登陆后可评论

0条评论

3403771864

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<