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 建设银行登陆键盘
Jun 10 Javascript
Javascript document.referrer判断访客来源网址
May 15 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 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
2019十大人气国漫
2020/03/13 国漫
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
JS 字符串连接[性能比较]
2009/05/10 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
python文件写入实例分析
2015/04/08 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
群胜软件Java笔试题
2012/09/29 面试题
服务标语大全
2014/06/18 职场文书
2015年推普周活动方案
2015/05/06 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL