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实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
iphone刘海屏页面适配方法
May 07 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
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
星际中的相关伤害
2020/03/04 星际争霸
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
python的mysqldb安装步骤详解
2017/08/14 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Python类中self参数用法详解
2020/02/13 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
python 下载文件的多种方法汇总
2020/11/17 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
生物技术毕业生自荐信
2013/10/23 职场文书
应届毕业生求职信范文
2013/12/18 职场文书
小班开学寄语
2014/04/04 职场文书
护士实习求职信
2014/06/22 职场文书
感恩教育月活动总结
2014/07/07 职场文书
公司感谢信范文
2015/01/22 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
浅析Python OpenCV三种滤镜效果
2022/04/11 Python
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL
Spring Boot实现文件上传下载
2022/08/14 Java/Android