js实现无缝轮播图效果
本文实例为大家分享了js实现无缝轮播图的具体代码，供大家参考，具体内容如下
//Utils.js
//封装 预加载图片
var Utils=(function () {
return {
//SSS
loadImg:function (srcList,callBack) {//图片地址 回调函数
var img=new Image();
img.num=0;//初始化num为0 图片数
img.imgList=[];//存放图片
img.srcList=srcList;
img.callBack=callBack;//回调函数
img.addEventListener("load",this.loadHandler);//加载load
img.src="./img/"+srcList[img.num];//拼接图片地址
},
loadHandler:function (e) {
//this 指代img
/*cloneNode该方法将复制并返回调用它的节点的副本。
* 如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。
否则（也就是默认值，或者false），它只复制当前节点。*/
this.imgList.push(this.cloneNode(false));//将img图片尾插入imgList数组
this.num++;
if(this.num>=this.srcList.length){//图片数>=srcList数组(保存图片地址)的长度
this.callBack(this.imgList);//将数组传入回调函数
return;
}
//事件侦听没有被删除,只需更改src,监听加载load后触发该事件,进入该函数this.loadHandler
this.src="./img/"+this.srcList[this.num];
}
}
})();
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝轮播图</title>
<script src="js/Utils.js"></script>
</head>
<body>
<script>
//无缝轮播图,全JS
/*
* 1\轮播图大容器-->图片容器,左右按钮,小圆点
* 2\点击按钮,标志当前挪动图片索引,移动的方向
* 3\点击小圆点,标志当前挪动图片的索引,移动的方向
* 4\创建目标图片放置在当前图片的前或后
* 5\移动图片容器到目标图片位置后,删除前或后原来的图片
* */
var bnList,imgList,imgCon,ul,pre;//存储 左右按钮名 图片名 图片容器 下方圆点标签容器
var position=0,//图片的序号
direction="left",//方向
speed=30,
time=300,
autoBoolean=false,
playBoolean=false;
const WIDTH=1200,//常量定义轮播图高宽
HEIGHT=400;
init();
function init() {
//调用Utils中的loadImg方法 将图片名数组 和回调函数名传入
Utils.loadImg(["left.png","right.png","a.jpeg","b.jpeg","c.jpeg","d.jpeg","e.jpeg"],createCarousel);
}
function createCarousel(list) {//创建轮播图
bnList=list.splice(0,2);//将左右移动图标名从list数组中移除，添入bnList数组
imgList=list;//将图片名添入数组imgList
imgList.forEach(function (t) {//遍历数组，给每个img元素添加宽高
t.style.width=WIDTH+"px";
t.style.height=HEIGHT+"px";
});
var carousel=ce("div",{//调用函数ce创建div并添加样式
width:WIDTH+"px",
height:HEIGHT+"px",
position:"relative",
margin:"auto",
overflow:"hidden",
backgroundColor:"rgba(255,0,0,0.3)"
});
console.log(carousel);//carousel为最外层div容器，包括轮播图容器，圆点标签， 左右按钮
createImgCon(carousel);//调用函数createImgCon在 carousel中创建轮播图图片容器， 传入carousel为父容器
createBn(carousel);//调用函数createBn中创建左右按钮， 传入carousel为父容器
createDot(carousel);//调用函数createDot中创建下方圆点标签， 传入carousel为父容器
document.body.appendChild(carousel);//在body中插入div carousel
carousel.addEventListener("mouseenter",mouseHandler);//给div carousel添加鼠标进入事件
carousel.addEventListener("mouseleave",mouseHandler);//给div carousel添加鼠标离开事件
//下方圆点标签距左边距
ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";
changeDot();
setInterval(animation,16);//设置周期执行函数
}
function mouseHandler(e) {//鼠标停止，开始轮播图自动播放
if(e.type==="mouseenter"){//鼠标进入停止自动播放，重置time计时
autoBoolean=false;
time=300;
}else if(e.type==="mouseleave"){//鼠标离开开始自动播放
autoBoolean=true;
}
}
function createImgCon(parent) {//创建轮播图容器div
imgCon=ce("div",{//调用ce创建div
width:WIDTH+"px",
height:HEIGHT+"px",
position:"absolute",
left:"0px"
});
imgCon.appendChild(imgList[position]);//在创建的div imgCon 中添加图片
parent.appendChild(imgCon);//在传来的父元素div中添加新建的div imgCon
}
function createBn(parent) {//创建左右按钮 接受传来的父元素
bnList.forEach(function (t,index) {//遍历数组bnList
Object.assign(t.style,{
position:"absolute",
left:index===0 ? "20px" : "none",
right:index===1 ? "20px" : "none",
top:(HEIGHT-t.height)/2+"px"
});
t.addEventListener("click",bnClickHandler);//按钮添加点击监听事件
parent.appendChild(t);//在传来的父元素中添加左右按钮
})
}
function createDot(parent) {//创建下方圆点标签
ul=ce("ul",{//调用ce创建ul，添加样式
listStyle:"none",
position:"absolute",
bottom:"20px",
margin:"0px",
padding:"0px"
});
imgList.forEach(function (t,index) {//遍历imgList，有几张图创建几个li
var li=ce("li",{//新建li，添加样式
float:"left",
width:"18px",
height:"18px",
borderRadius:"9px",
border:"1px solid rgba(255,0,0,0.8)",
marginLeft: index===0 ? "0px" : "10px"
});
ul.appendChild(li);//ul中插入li
});
ul.addEventListener("click",dotClickHandler);//给ul添加监听单击时间 事件委托
parent.appendChild(ul);//在父元素中插入ul
}
function bnClickHandler(e) {//左右移点击移动图片
if(playBoolean) return;
if(bnList.indexOf(this)===0){//点击左移按钮
position--;//图片序号--
direction="right";//图片方向向右
if(position<0) position=imgList.length-1;//如果在第0张点左移，position为最后一张图的序号
}else{//点击右移按钮
position++;//图片序号++
direction="left";//图片方向向左
if(position>imgList.length-1) position=0;//如果在最后1张点右移，position为第一张图的序号
}
createNextImg();//创建下一张图片
}
function dotClickHandler(e) {//圆点标签点击移动图片
if(playBoolean) return;
if(e.target.nodeName!=="LI") return;//点击的不是li return
var arr=Array.from(this.children);//this=ul
var index=arr.indexOf(e.target);//index存点击的li在arr中的下标
if(index===position) return;//如果是当前这个位置点,不操作
if(index>position){//如果点击的大于当前
direction="left";//图片方向向左
}else{//如果点击的小于当前
direction="right";//图片方向向右
}
position=index;//position赋值为点击的li序号
createNextImg();//创建下一张图片
}
function createNextImg() {//创建下一张图片
imgCon.style.width=WIDTH*2+"px";//将轮播图容器宽度*2
if(direction==="left"){//如果图片向左运动
imgCon.appendChild(imgList[position]);//在当前图片后面添加子元素
}else if(direction==="right"){//如果图片向右运动
imgCon.insertBefore(imgList[position],imgCon.firstElementChild);//在第一张图片前面添加子元素
imgCon.style.left=-WIDTH+"px";//移动原有图片容器的位置左右一张图片宽度
}
playBoolean=true;//图片加载完设置为true
changeDot();//改变下方圆形标签的颜色
}
function changeDot() {//改变下方圆形标签的颜色
if(pre){
pre.style.backgroundColor="rgba(255,0,0,0)";//颜色初始化为透明
}
pre=ul.children[position];//获取当前轮播图对应li
pre.style.backgroundColor="rgba(255,0,0,0.5)";//显示该li的颜色
}
function animation() {
imgPlay();//图片移动
autoPlay();//自动移动
}
function imgPlay() {
if(!playBoolean) return; //为false return
if(direction==="right"){//图片右移
imgCon.style.left=imgCon.offsetLeft+speed+"px";//图片以speed的速度向右划过
if(imgCon.offsetLeft>=0){//运动到轮播图框停止移动
imgCon.style.left="0px";
playBoolean=false;
imgCon.lastElementChild.remove();//移走上一张图片
imgCon.style.width=WIDTH+"px";//重置轮播图容器宽度
}
}else if(direction==="left"){//图片左移
imgCon.style.left=imgCon.offsetLeft-speed+"px";//图片以speed的速度向左划过
if(imgCon.offsetLeft<=-WIDTH){//运动到轮播图框左一张图片的宽度处停止移动
playBoolean=false;
imgCon.firstElementChild.remove();//移走上一张图片
imgCon.style.left="0px";//重置轮播图容器位置
imgCon.style.width=WIDTH+"px";//重置轮播图容器宽度
}
}
}
function autoPlay() {//自动轮播
if(!autoBoolean) return;
time--;
if(time>0) return;
time=200;
var evt=new MouseEvent("click");
bnList[1].dispatchEvent(evt);//dispatchEvent事件触发器，触发bnList[1]的click事件
}
function ce(type,style) { //创建标签元素并添加样式 (创建元素类型 ,添加的css样式)
var elem=document.createElement(type);
/*Object.assign方法用来将源对象（source）的所有可枚举属性，
复制到目标对象（target）。它至少需要两个对象作为参数，
第一个参数是目标对象，后面的参数都是源对象。*/
Object.assign(elem.style,style);
return elem;
}
</script>
</body>
</html>
精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
-
js实现点击左右按钮轮播图片效果实例
本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un
-
js实现无缝轮播图
本文实例为大家分享了js实现轮播图的具体代码,供大家参考,具体内容如下 CSS样式: <style type="text/css"> #box{width: 1000px;height: 375px;border: 3px solid black; margin: 30px auto;position: relative;overflow: hidden;} #box .img{position: absolute;left: 0;top: 0;} #box .img im
-
JavaScript实现PC端横向轮播图
本文实例为大家分享了JavaScript实现PC端横向轮播图的具体代码,供大家参考,具体内容如下 步骤: 第一步:先实现右侧按钮点击图片动起来: 1.每次点击图片走的距离: 2.起始位置已知,计算定时器每走一小步的距离: 第二步:判断点击按钮一次图片移动的距离,停止定时器: 第三步:左边按钮逻辑和右侧按钮几乎一致: 1.因此封装函数move(flag),函数传参是Boolean则是左右按钮方向 第四步:无缝轮播:html结构修改,在当前结构分别加第一张图和最后一张图: 1.判断图片位置,设置相应
-
JS实现纵向轮播图（初级版）
本文实例为大家分享了JS实现纵向轮播图的具体代码,供大家参考,具体内容如下 描述: 纵向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的透明度达到效果. 效果: 代码: js文件: /* * 工厂模式 * */ var Method=(function () { return { loadImage:function (arr,callback) { var img=new Image(); img.arr=arr; img.list=[
-
原生js实现轮播图的示例代码
很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
-
JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu
-
JavaScript实现轮播图片完整代码
本文实例为大家分享了JavaScript实现轮播图片的具体代码,供大家参考,具体内容如下 JS代码注释清晰明了,一看就懂! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播效果</title> <style> * { margin: 0; padding: 0 } .box { w
-
JS实现横向轮播图（中级版）
本文实例为大家分享了JS实现横向轮播图的具体代码,供大家参考,具体内容如下 描述: 轮播图,中级,横向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),解决了初级版本的点1再点5时多张图片滑动的问题,核心只有两张图在切换,加入了图片加载. 效果: 代码: js文件: /* * 工厂模式 * */ var Method=(function () { return { loadImage:function (arr,callback) { var img=new Im
-
js实现轮播图的完整代码
今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->