交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • JS实现横向轮播图(中级版)

    北冥有鱼 教程大全 2020-01-19 ,

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

    描述:

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

    效果:

    代码:

    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>

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。


    广而告之:
    热门推荐:
    10个最常见的HTML5面试题 附答案

    本文为大家分享了最常见的10个HTML5面试题,希望大家喜欢。 问题1、新的 HTML5 文档类型和字符集是? 答:HTML5 文档类型很简单: HTML5 使用 UTF-8 编码。 问题2、HTML5 中如何嵌入音频? 答:HTML5 支持 MP3、Wav 和 Ogg 格式的音频,下面是在网页中嵌入音频。 问题3、HT···

    根据表名和索引获取需要的列名的存储过程

    复制代码 代码如下: create proc p_sword_getblcolumn ( @tblName varchar(200), @fromIndex int, @toIndex int, @columnName varchar(3000) output ) as begin declare @tempColumn varchar(3000) declare @errMsg varchar(200) declare @i int set @i=1 set @columnName='' ···

    在iframe中使bootstrap的模态框在父页面弹出问题

    这几天在写项目的中,页面使用了iframe,然而在子页面中使用bootstrap的模态框时发现:弹出的模态框位置是以子页面为标准居中的,并且遮罩层也只有子页面那一部分,整个页面简直无法直视,所以思考可以可以让模态框以父页面为标准弹出,经过在网上查找资料,总结了一种解决方法···

    在vscode里使用.vue代码模板的方法

    1.设置.vue模板 打开编辑器,点击文件 —— 首选项 —— 用户代码片段,会弹出来一个输入框。 在输入框输入vue,回车,会打开一个vue.json文件。 在里面复制以下代码: { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div cl···

    window.open被浏览器拦截后的自定义提示效果代码

    现在越来越多的浏览器有拦截弹出窗口的功能。广告弹出来给拦掉了就无所谓,要是客户在付款时给拦掉了可就不能乱算了。 Gmail的“哎呀”算是经典,可是,前天心云给出了更帅的提示=。= 记得打开浏览器拦截后 测试一下,在线阅读器里不知道代码会不会给过滤。。···

    Firefox getBoxObjectFor getBoundingClientRect联系

    在一个含有Flash的网页中插入Flash会提示: 警告: 不建议使用 getBoxObjectFor() 。 请使用 element.getBoundingClientRect()。 经本人测试,确实是Firefox在含flash的网页上提示,还不知道原因,也没找到解决办法。 Firefox版本:3.0.3 Flash: 10.0 html页面代码: 复···

    Javascript基础教程之数据类型 (数值 Number)

    javascript中想限定一个数的数值,无需限定它是整数还是浮点数型 复制代码 代码如下:     var num1 = 80 ;     var num2 = 55.51;     var num3 = -34;     var num4 = 9e5;     document.write(n···

    php线性表顺序存储实现代码(增删查改)

    复制代码 代码如下: <?php /* *文件名:linearList.php * 功能:数据结构线性表的顺序存储实现 * author:黎锦焕 * @copyright:www.drw1314.com */ class linearList { private $arr; private $length; const MAXSIZE=100; /* *构造函数,判断空表还是飞空表,并且进行···

    全面解析Angular中$Apply()及$Digest()的区别

    $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑。而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的。这篇文章旨在解释$apply()和$digest()是什么,以及在日常的编码中如何应用它们。 1、探索$apply()和$digest() 1.···

    asp.net EncryptHelper 加密帮助类

    复制代码 代码如下:/************************************************** * 版权所有: Mr_Sheng * 文 件 名: EncryptHelper.cs * 文件描述: * 类型说明: EncryptHelper 加密帮助类 * 授权声明: * 本程序为自由软件; * 您可依据自由软件基金会所发表的GPL v3授权条款,···