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 相关文章推荐
jQuery 浮动广告实现代码
Dec 25 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
PHP PDO操作总结
Nov 17 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
javascript实现简单留言板案例
Feb 09 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
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
node.js入门教程
2014/06/01 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
自己封装的常用javascript函数分享
2015/01/07 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
python+opencv实现动态物体识别
2018/01/09 Python
python实现聚类算法原理
2018/02/12 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
wxpython布局的实现方法
2019/11/01 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
会务接待方案
2014/02/27 职场文书
厨师长岗位职责
2014/03/02 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python