交流群: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>

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


    广而告之:
    热门推荐:
    vue中添加mp3音频文件的方法

    有的时候我们需要在vue中添加音频文件,但是直接将音频文件放置了assets目录下的时候,会发现并不能正常播放,下面是两种常用的配置方法: 方法一、将音频文件放置在static目录中,然后进行调用,如下所示 <audio class="success" src="/static/audios/do_wrong.mp3"&···

    Vue.js中组件中的slot实例详解

    Vue组件中的slot slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> &···

    JavaScript之HTMLCollection接口代码

    复制代码 代码如下: interface HTMLCollection { //包含结点的个数 readonly attribute unsigned long length; //根据指定的索引index,返回相应的结点 //HTMLCollection中的结点呈树形结构,索引值index是结点深度优先方式排序的序号 Node item (in unsigned long index···

    mysql sql语句隐藏手机号码中间四位的方法

    第一查询表结构(sys_users): SELECT * from sys_users; 第一种方式:将手机号码中间四位隐藏 select REPLACE(mobile, SUBSTR(mobile,4,4), 'XXXX') from sys_users  第二种方式:将手机号码中间四位隐藏(推荐使用) select insert(mobile, 4, 4, 'XXXX') from sys_···

    Javascript 跨域访问解决方案

    这里分两类情况:一、基于同一父域的子域之间页面的访问;参见如下3个domain域:taobao.com、jipiao.taobao.com、promotion.taobao.com;它们有相同的父域taobao.com。二、基于不同父域页面之间的访问;参见如下3个domain域:taobao.com、baidu.com、sina.com.cn;它们具···

    JS中Attr的用法详解

    具体代码如下所示: <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ //使用attr(name)获取属性值: alert($("p")···

    浅析PHP substr,mb

    PHP substr()函数可以 分割文字,但要分割的文字如果包括中文字符往往会遇到问题,这时可以用mb_substr()/mb_strcut这个函数,mb_substr() /mb_strcut的用法与substr()相似,只是在mb_substr()/mb_strcut最后要加入多一个参数,以设定字符串的编码,但是 一般的服务器都···

    destoon实现调用热门关键字的方法

    本文所述的destoon调用热门关键字的方法是根据数据库里面的保存的搜索的关键字来显示的。 每个模块下面都有各自的关键字 下面是调用的标签: <!--{tag("moduleid=$searchid&table=keyword&condition=moduleid=$searchid and status=3&pagesize=9&order=tot···

    js拼接html字符串的注意事项

    +加好拼接如果不换行,是不会出现执行一段一段执行的情况,但是字符串太长了,换行之后会出现一段一段执行的情况,这样页面生成的div等就不是想要的结果了。 换行要这样拼接 var s='<li class="todetail" data-id="'+ one.id+'"><p class="dd_time">'+ one.leas···

    MySQL两种表存储结构MyISAM和InnoDB的性能比较测试

    MySQL支持的两种主要表存储格式MyISAM,InnoDB,上个月做个项目时,先使用了InnoDB,结果速度特别慢,1秒钟只能插入10几条。后来换成MyISAM格式,一秒钟插入上万条。当时决定这两个表的性能也差别太大了吧。后来自己推测,不应该差别这么慢,估计是写的插入语句有问题,···