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 相关文章推荐
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 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
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
javascript学习之json入门
2016/12/22 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
Python编程之序列操作实例详解
2017/07/22 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
python SOCKET编程基础入门
2021/02/27 Python
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
致标枪运动员广播稿
2014/02/06 职场文书
会计核算科岗位职责
2014/03/19 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
会员活动策划方案
2014/08/19 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
针对吵架老公保证书
2015/05/08 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书