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 相关文章推荐
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 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之第九天
2006/10/09 PHP
跟我学Laravel之路由
2014/10/15 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
小程序自定义日历效果
2018/12/29 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
手机配件第一品牌:ZAGG
2017/05/28 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
同学聚会祝酒词
2015/08/10 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
APP界面设计技巧和注意事项
2022/04/29 杂记
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang