js实现点击切换和自动播放的轮播图
本文实例为大家分享了js实现点击切换和自动播放的轮播图，供大家参考，具体内容如下
轮播图案例
<!DOCTYPE html>
<html lang="en">
<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>
效果展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现图片轮播切换效果
最近在b站上学习的时候,学到了一个用原生js实现图片轮播切换效果的实战,码下来收藏 上图是这个小实战的效果图,整个小实战所实现的功能是图片自动轮播切换.点击上下键图片切换上下图片.点击右下角圆点切换相应图片.点击主菜单显示相应子菜单内容. html页面布局 <body> <!--主区域,存放所有需要元素--> <div id="main" class="main"> <!-- 导航菜单 --> <div clas
-
原生js实现图片层叠轮播切换效果
本文实例介绍了js焦点图片层叠轮播切换滚动效果,分享给大家供大家参考,具体内容如下 效果图: 功能描述: 自定义图片尺寸: 每隔一段时间自动滚动图片: 每次动画执行的时候改变图片的位置,宽高以及其它属性也要跟随着变化: 鼠标移上图片,显示当前图片的详细信息: 点击按钮向前向后滚动: 详细代码: html代码: <!DOCTYPE html> <!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topi
-
Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）
在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件. 在这12个jQuery插件中,最常用的有图片轮播car
-
js实现轮播图自动切换
本文实例为大家分享了js实现轮播图自动切换的具体代码,供大家参考,具体内容如下 先看效果图 第一种 //点击按钮,序号变化 showIdx++; if (showIdx == imgArr.length) { showIdx = 0; } //所有盒子左移动 for (let i = 0; i <items.length; i++) { items[i].style.left = parseFloat(items[i].style.left) - lo
-
js图片轮播手动切换效果
利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示.推荐商品之类的栏目.它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果. 不需要调用jquery,初始化简单,使用非常的简单,便利. 实例效果: js代码: <script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhot
-
vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）
1.效果图如下 2.vue代码如下 <el-carousel type="card" arrow="always" :loop="false" :initial-index="1" indicator-position="none" :autoplay="false"> <el-carousel-item v-for="(items, index) in it
-
原生javascript实现图片轮播切换效果
本文实例为大家分享了javascript实现图片轮播切换效果的具体代码,供大家参考,具体内容如下 效果如下: 代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&
-
JS实现多重选项卡切换轮播图
轮播动画来提升页面的颜值和交互性能,下面我们将一起学习利用html , css和Javascript等前端开发基础知识来制作一个简单的轮播图. 轮播图简介:在一个网站的某一特定模块,通过电脑上鼠标点击或鼠标移入.手机上手指滑动后,可以分别展示不同的图片,这个模块就叫做轮播模块. (做的不好的地方欢迎各位大佬批评指正,感觉有帮助的同学麻烦给颗星星哦~) html布局部分: <div id="box"> <div class="scenery pic"
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
-
javascript实现图片自动和可控的轮播切换特效
演示图: 需要引入的文件 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/1/css/style.css"> <script type="text/javascript" src="http://hovertree.com/texiao/js/1/js/koala.min.1