JS实现纵向轮播图(初级版)


Posted in Javascript onJanuary 18, 2020

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

描述:

纵向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的透明度达到效果。

效果:

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>
  <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>
  <div id="con">
    <div id="bgImg">
      <img src="img/a.jpeg">
    </div>
    <div 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">
    </div>
  </div>
  <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 相关文章推荐
jqPlot 基于jquery的画图插件
Apr 26 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
JS数组方法reverse()用法实例分析
Jan 18 #Javascript
JS实现横向轮播图(初级版)
Jun 24 #Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 #Javascript
微信小程序开发中var that =this的用法详解
Jan 18 #Javascript
JavaScript实现滑动门效果
Jan 18 #Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 #Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 #Javascript
You might like
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
Django的session中对于用户验证的支持
2015/07/23 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
使用Python来开发微信功能
2018/06/13 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
家长会学生家长演讲稿
2013/12/29 职场文书
学校后勤岗位职责
2014/02/19 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
2014年纠风工作总结
2014/12/08 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
基于angular实现树形二级表格
2021/10/16 Javascript
python数字类型和占位符详情
2022/03/13 Python
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js