温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript中怎么实现纵向轮播图

发布时间:2021-08-10 14:47:23 来源:亿速云 阅读:118 作者:Leah 栏目:开发技术

JavaScript中怎么实现纵向轮播图,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

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>  <style>    #con,#bgImg,#bgImg img    {      width: 100%;      height: 500px;    }    #con    {      position: relative;      margin: auto;    }    #bgImg{      position: absolute;    }    #bgImg img{      opacity: 1;      transition: all 1s;      position: absolute;      left:0;      top:0;    }    #iconImg    {      position: absolute;      width: 120px;      right: 50px;      top:30px;    }    #iconImg img    {      margin-top: 8px;      border: 2px solid #FFA50000;      transition: all 0.5s;    }  </style>  <script src="js/Method.js"></script></head><body>  <p id="con">    <p id="bgImg">      <img src="img/a.jpeg">    </p>    <p id="iconImg">      <img src="img/icon_a.jpeg">      <img src="img/icon_b.jpeg">      <img src="img/icon_c.jpeg">      <img src="img/icon_d.jpeg">      <img src="img/icon_e.jpeg">    </p>  </p>  <script>    var bgImg,iconImg,prevImg,imgList;//定义大图 小图的盒子(5个img)    var N=0;//图像标记    var arr=["img/a.jpeg","img/b.jpeg","img/c.jpeg","img/d.jpeg","img/e.jpeg"];//图片设置为数组形式 传参    init();    function init() {      Method.loadImage(arr,loadFinishHandler)//预加载    }    function loadFinishHandler(list) {//预加载赋值      imgList=list;      bgImg=document.getElementById("bgImg");      iconImg=document.getElementById("iconImg");      for(var i=0;i<iconImg.children.length;i++){        iconImg.children[i].num=i;        iconImg.children[i].addEventListener("click",clickHandler);      }      changeBorder(iconImg.firstElementChild);    }    setInterval(autoImg,3000);    function autoImg() {//自动轮播效果      N++;  //全局变量 用于控制当前轮播顺序      if (N>4) N=0;      changeImg(N);//大图轮播      changeBorder(iconImg.children[N]);//小图外边框轮播 设置第几个 弄懂参数代表含义    }    function clickHandler(e) {      e =e || window.event;      changeBorder(this);      N=this.num;      changeImg(this.num);    }    function changeBorder(elem) {      if(prevImg){        prevImg.style.border="2px solid #FFA50000";      }      prevImg=elem;      prevImg.style.border="2px solid #FFA500";    }    function changeImg(index) {      if(bgImg.children.length>1){        bgImg.lastElementChild.remove();      }      bgImg.lastElementChild.style.opacity="0";      imgList[index].style.opacity="1";      bgImg.insertBefore(imgList[index],bgImg.firstElementChild);    }  </script></body></html>

关于JavaScript中怎么实现纵向轮播图问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI