js实现无缝轮播图效果


Posted in Javascript onMarch 09, 2020

本文实例为大家分享了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图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
OpenLayers3实现图层控件功能
Sep 25 Javascript
js实现无缝轮播图
Mar 09 #Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 #Javascript
原生js实现瀑布流效果
Mar 09 #Javascript
原生JS实现贪吃蛇小游戏
Mar 09 #Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 #Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 #Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
一个PHP+MSSQL分页的例子
2006/10/09 PHP
php部分常见问题总结
2008/03/27 PHP
PHPCMS的使用小结
2010/09/20 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
简单的js表单验证函数
2013/10/28 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
js如何验证密码强度
2020/03/18 Javascript
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
简单的Python的curses库使用教程
2015/04/11 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
公司庆典活动邀请函
2014/01/09 职场文书
六查六看剖析材料
2014/02/15 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android