您正在使用IPV4(3.236.138.35)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头       悟空收录网      

【腾讯云】云服务器等爆品抢先购,低至4.2元/月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2023年 元宵节 8
2023年 情人节 17
2024年 元 旦 338
2024年 春 节 378
 
您现在的位置:首页 >> 脚本程序 >> 内容
本类新增
本类热门文章
js实现点击切换和自动播放的轮播图
内容摘要: 轮播图案例!DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'metaname='viewport'content='width=device-width,initial-scale=1.0'titleDocument/title/headbodyscript//1、布局//2、定义当前第几张图片和应该向什么方向运......
轮播图案例

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="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图片地址数组

varimgCon,ul,preDot;

varpos=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;

constWIDTH=1500;

constHEIGHT=500;

constLEFT=Symbol();

constRIGHT=Symbol();

constSPEED=40;

init();

/*

init()初始化函数

1、创建轮播图外层容器

2、创建轮播图图片容器

3、创建按钮列表

4、创建小圆点列表

5、将轮播图容器放在body中

6、切换小圆点,因为当前是第0张,所以让第一个小圆点背景为红色

7、将小圆点容器设置水平居中

8、设置时间间隔,每16毫秒执行animation函数一次,因为一秒是1000毫秒

一秒中执行60次,就是60帧频,每次花费的时间是16.6666毫秒

9、给最外层的轮播图增加事件侦听,一个是鼠标进入,一个是鼠标离开

*/

functioninit(){

varcarousel=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,就会自动轮播了

*/

functionmouseHandler(e){

if(e.type==="mouseenter"){

autoBool=false;

time=300;

}elseif(e.type==="mouseleave"){

autoBool=true;

}

}

/*

创建元素

参数:

type创建元素的类型,字符串

style创建元素的样式,对象,使用对象方式给出该容器的样式

1、根据类型创建元素

2、将给入的样式设置给元素的行内样式

3、返回创建好的元素

*/

functionce(type,style){

varelem=document.createElement(type);

//ES6的方法,将后面的对象中的属性复制到前面对象中

Object.assign(elem.style,style);//等同于下面写法

/*for(varpropinstyle){

elem.style[prop]=style[prop];

}*/

returnelem;

}

/*

创建轮播图容器和图片

参数:

parent父容器,将创建好的容器和图片放在父容器内

1、创建图片容器,容器宽度是两张图片的宽度

2、根据所有轮播图地址数组,创建所有图片并且放在数组imgList中

3、将第0张图片放在创建图片容器imgCon中

4、将图片容器放在整个轮播图容器中

*/

functioncreateImgCon(parent){

imgCon=ce("div",{

position:"absolute",

width:2*WIDTH+"px",

height:HEIGHT+"px",

left:0

});

for(vari=0;i<imgSrcList.length;i++){

varimg=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

*/

functioncreateButton(parent){

//局部变量

vararr=["left","right"];

for(vari=0;i<arr.length;i++){

varimg=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增加点击事件,实际是点击小圆点,事件委托

*/

functioncreateDotList(parent){

ul=ce("ul",{

listStyle:"none",

margin:0,

padding:0,

position:"absolute",

bottom:"50px"

});

for(vari=0;i<imgSrcList.length;i++){

vardot=ce("li",{

width:"28px",

height:"28px",

borderRadius:"50%",

border:"2pxsolid#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张图片,并且设置方向是向右运动

*/

functionbnClickHander(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、将当前点击的下标设为当前应展现图片的下标

*/

functiondotClickHandler(e){

if(bool)return;

//if(e.target.nodeName!="LI")return;

if(e.target.constructor!==HTMLLIElement)return;

varindex=dotList.indexOf(e.target);

if(index===pos)return;

direction=index>pos?LEFT:RIGHT;

pos=index;

createNextImg();

}

/*

创建下一张需要显示的图片

当点击左右按钮和当点击小圆点时,触发该函数

1、如果方向想左运动,给图片容器尾部添加新的图片

2、如果方向向有运动,给图片容器的最头部添加新图片

但是这个时候原图被挤到最后,然后将整个容器向左移动一个图片宽度

3、设置完成后,设置bool是true,这时候就打开了动画的播放开关

动画就可以完成播放了

4、切换当前小圆点

*/

functioncreateNextImg(){

//console.log(direction,pos,imgList[pos]);

if(direction===LEFT){

imgCon.appendChild(imgList[pos]);

x=0;

}elseif(direction===RIGHT){

//insertBefore要插入的元素,插入在谁的前面

imgCon.insertBefore(imgList[pos],imgCon.firstElementChild);

imgCon.style.left=-WIDTH+"px";

x=-WIDTH;

}

bool=true;

changeDot();

}

/*

切换小圆点

preDot是对上一次小圆点的引用变量

刚开始第一次时,没有引用,因此不执行,并且设置第一次设置了第0个萧远山

更改了第0个小圆点的背景色

第二次进来上次小圆点的引用时第0个,所以就将上次的小圆点修改背景透明

将本次小圆点设置给这个引用,并且修改背景色

再次进入就可以修改原来的,设置新的

*/

functionchangeDot(){

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、执行自动轮播

*/

functionanimation(){

imgConMove();

autoplay();

}

/*

每16毫秒让图片移动一次

开始的时候就一直运行,因为有一个bool值判断,如果false时,一直不能进入

如果可以进入

1、如果方向为左

不断让变量x递减,每16毫秒减40像素,设置图片容器位置,图片容器就可以移动了

当图片容器的第一张图完全移动到最左侧以后,也就是x小于等于负的图片宽度

设置bool值false,16毫秒后进入时直接跳出

删除掉移到最左侧的图片,后面的图片会补充到最前面,设置将x为0,让整个容器向后挪回初始位置

2、如果方向向右

x不断增加40像素

如果x大于0,表示左侧的图片已经移到中间位置,原图片移到了右侧

这个时候停止运动,bool设为false,x设为初始的0,删除右侧的图片

*/

functionimgConMove(){

if(!bool)return;

if(direction===LEFT){

x-=SPEED;

if(x<=-WIDTH){

imgCon.firstElementChild.remove();

x=0;

bool=false;

}

imgCon.style.left=x+"px";

}elseif(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、向右侧按钮抛发这个点击事件

*/

functionautoplay(){

if(!autoBool)return;

time--;

if(time>0)return;

time=300;

varevt=newMouseEvent("click");

bnList[1].dispatchEvent(evt);

}

</script>

</body>

</html>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:js实现数字拼图 下一篇:JS脚本实现网页自动秒杀点击
发布日期:2022/11/1
手机扫二维码直达本页
发布时间:16:31:14
点  击:12
录  入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.3.5.220928(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2023