JS实现横向轮播图(中级版)


Posted in Javascript onJanuary 18, 2020

本文实例为大家分享了JS实现横向轮播图的具体代码,供大家参考,具体内容如下

描述:

轮播图,中级,横向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),解决了初级版本的点1再点5时多张图片滑动的问题,核心只有两张图在切换,加入了图片加载。

效果:

JS实现横向轮播图(中级版)

代码:

js文件:

/*
* 工厂模式
* */
 
var Method=(function () {
 return {
  loadImage:function (arr,callback) {
   var img=new Image();
   img.arr=arr;
   img.list=[];
   img.num=0;
   img.callback=callback;
//   如果DOM对象下的事件侦听没有被删除掉,将会常驻堆中
//   一旦触发了这个事件需要的条件,就会继续执行事件函数
   img.addEventListener("load",this.loadHandler);
   img.self=this;
   img.src=arr[img.num];
  },
 
  loadHandler:function (e) {
   this.list.push(this.cloneNode(false));
   this.num++;
   if(this.num>this.arr.length-1){
    this.removeEventListener("load",this.self.loadHandler);
    this.callback(this.list);
    return;
   }
   this.src=this.arr[this.num];
  },
 
  $c:function (type,parent,style) {
   var elem=document.createElement(type);
   if(parent) parent.appendChild(elem);
   for(var key in style){
    elem.style[key]=style[key];
   }
   return elem;
  }
 }
})();

html文件:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/Method.js"></script>
</head>
<body>
 <script>
  var imgCon,ul,prevLi;
  var arr=["img/a.jpeg","img/b.jpeg","img/c.jpeg","img/d.jpeg","img/e.jpeg"];
  var position=0;
  var direction="";
  var carouselBool=false;
  var autoBool=false;
  var time=240;
  const WIDTH=1200;
  const HEIGHT=400;
  init();
  function init() {
   createCarousel();
   createLiAndImg();
   changeLi();
   setInterval(animation,16)
  }
 
  function createCarousel() {//创建默认的div模板 用于装图片
   var carousel=Method.$c("div",document.body,{
    width: WIDTH+"px",
    height: HEIGHT+"px",
    position: "relative",
    margin: "auto",
    overflow:"hidden"
   });
   carousel.addEventListener("mouseenter",mouseHandler);
   carousel.addEventListener("mouseleave",mouseHandler);
   imgCon=Method.$c("div",carousel,{//图片轮播 div
    width: WIDTH+"px",
    height: HEIGHT+"px",
    position:"absolute",
    left: 0,
    fontSize: 0
   });
   ul=Method.$c("ul",carousel,{//装5个按钮的ul
    position: "absolute",
    bottom: "20px",
    listStyle: "none",
    margin: "auto"
   });
   var leftBn=Method.$c("img",carousel,{//左 按钮
    position: "absolute",
    left: "20px",
    top:"170px"
   });
   leftBn.src="img/left.png";
   var rightBn=Method.$c("img",carousel,{//右 按钮
    position: "absolute",
    right: "20px",
    top:"170px"
   });
   rightBn.src="img/right.png";
   leftBn.addEventListener("click",clickHandler);
   rightBn.addEventListener("click",clickHandler)
 
  }
  function createLiAndImg() {
   for(var i=0;i<arr.length;i++){//arr 事先装好了 5个图片
    var li=Method.$c("li",ul,{//每个li的数据
     width: "20px",
     height: "20px",
     border:"1px solid red",
     borderRadius:"10px",
     float:"left",
     marginLeft:"8px"
    });
    li.num=i;
    li.addEventListener("click",liClickHandler);
   }
   ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";
   var img=Method.$c("img",imgCon,{
    width: WIDTH+"px",
    height: HEIGHT+"px"
   });
   img.src=arr[position];
  }
 
  function mouseHandler(e) {
   e = e || window.event;
   if(e.type==="mouseenter"){//鼠标划上 自动暂停
    autoBool=false;
   }else if(e.type==="mouseleave"){//鼠标离开 自动开始
    autoBool=true;
   }
  }
 
  function clickHandler(e) {//左右button的键位判断 点击事件
   e = e || window.event;
   if(carouselBool) return;
   if(~this.src.indexOf("left")){
    position--;
    if(position<0) position=arr.length-1;
    direction="right";
   }else{
    position++;
    if(position>arr.length-1) position=0;
    direction="left";
   }
 
   createCarouselImg();
  }
 
  function liClickHandler(e) {
   e = e || window.event;
   if(carouselBool) return;
   if(this.num===position) return;
   if(this.num>position){
    direction="left";
   }else{
    direction="right";
   }
   position=this.num;
   createCarouselImg();
  }
  
  function createCarouselImg() {
   if(direction!=="left" && direction!=="right")return;
   var img=Method.$c("img",null,{
    width: WIDTH+"px",
    height: HEIGHT+"px"
   });
   img.src=arr[position];
   imgCon.style.width=WIDTH*2+"px";
   if(direction==="left"){
    imgCon.appendChild(img);
   }else if(direction==="right"){
    imgCon.insertBefore(img,imgCon.firstElementChild);
    imgCon.style.left=-WIDTH+"px";
   }
   changeLi();
   carouselBool=true;
  }
 
  function changeLi() {
   if(prevLi){
    prevLi.style.backgroundColor="rgba(255,0,0,0)";
   }
   prevLi=ul.children[position];
   prevLi.style.backgroundColor="rgba(255,0,0,0.5)";
  }
  
  function animation() {
   carouselMovie();
   carouselAuto();
  }
  
  function carouselMovie() {
   if(!carouselBool) return;
   if(direction==="left"){
    if(imgCon.offsetLeft<=-WIDTH){
     carouselBool=false;
     imgCon.firstElementChild.remove();
     imgCon.style.left="0px";
     return;
    }
    imgCon.style.left=imgCon.offsetLeft-40+"px";
    return;
   }
   if(imgCon.offsetLeft>=0){
    carouselBool=false;
    imgCon.lastElementChild.remove();
    return;
   }
   imgCon.style.left=imgCon.offsetLeft+30+"px";
  }
  /*
  * 自动轮播函数
  * 1、如果当前autoBool是false,就不进行自动轮播
  *  这个变量是鼠标进入轮播图时是false,离开时
  *  才会变化为false
  * 2、让time--,因为这个函数没16毫秒执行一次,如果
  * 每次进来就让time-1,然后判断time是否小于等于0,如果
  * 小于等于0,说明这个函数已经进入了240次,每次16毫米,
  * 合计就是4秒钟。这样可以控制让轮播图每4秒自动播放下张
  * 图片
  * 3、如果time小于等于0,就重新让time等于240,等待下次进入
  * 4、设置图片播放定位+1,如果大于了图片的数量,就让它为0
  * 5、设置轮播图方向是向左运动
  * 6、执行创建轮播图片,并且继续后面的任务
  *
  *
  *
  * */
  function carouselAuto() {
   if(!autoBool)return;
   time--;
   if(time>0)return;
   //当time减到0时,就不继续减了,进入下面
   time=240;
   position++;
   if(position>arr.length-1) position=0;
   direction="left";
   createCarouselImg();
  }
 </script>
</body>
</html>

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

Javascript 相关文章推荐
JS启动应用程序的一个简单例子
May 11 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 #Javascript
JS数组方法concat()用法实例分析
Jan 18 #Javascript
JS实现纵向轮播图(初级版)
Jan 18 #Javascript
JS数组方法reverse()用法实例分析
Jan 18 #Javascript
JS实现横向轮播图(初级版)
Jun 24 #Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 #Javascript
微信小程序开发中var that =this的用法详解
Jan 18 #Javascript
You might like
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
js实现星星打分效果
2020/07/05 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
Python常用正则表达式符号浅析
2014/08/13 Python
Python Property属性的2种用法
2015/06/21 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
对Python函数设计规范详解
2019/07/19 Python
python实现静态web服务器
2019/09/03 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
python 解决函数返回return的问题
2020/12/05 Python
中班开学寄语
2014/04/04 职场文书
医院标语大全
2014/06/23 职场文书
公司委托书范本5篇
2014/09/20 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python