JavaScript随手笔记---轮播图(点击切换)

简介: JavaScript随手笔记---轮播图(点击切换)



一、方法一:点击切换

1.实现原理

  基本上摸透了实现原理,实现起来难度就不会很大啦;

  • Step 1、创建一个对象来保存图片资源的路径和数量,如下:
var albumImageList = {
  length: 3,  //图片数量
  1: {id: 1, uri: "images/BO_09.png"}, 
  2: {id: 2, uri: "images/HRbackground.png"}, 
  3: {id: 3, uri: "images/local_MUSIC_00010.png"}
};
var albumImageCurrent = 1;      // 当前图片选择序列号

其中length表示图片数量,{id: 1, uri: "images/BO_09.png"}表示当前图片位置和路径,其实不用id也可以的,读者可以进行优化。albumImageCurrent 变量后面切换图片的会用上。

  • Step 2、(📢 📢 📢 最重要的一步!!!)通过点击产生回调事件,这时候判断当前显示图片位置是否超过length,没有则会对象下标加1显示下一张图片,反之显示第一张图片。从而实现图片显示循环。
  • Step 3、注册按钮事件,在回调函数中加入图片切换函数(可自己封装);

2.实现过程

  建立变量:

var albumImageList = {
  length: 3, //图片数量
  1: {id: 1, uri: "images/BO_09.png"}, 
  2: {id: 2, uri: "images/HRbackground.png"}, 
  3: {id: 3, uri: "images/local_MUSIC_00010.png"}
};
var albumImageCurrent = 1;      // 当前图片选择序列号

  图片切换函数:

/**
 * @author CSH
 * @function 函数功能:图片轮播
 * @param {Object} imageName [控件名称,用于实现多控件使用]
 * @param {Object} event [当前对象指针]
 */
function albumWheelImage(imageName, event){
  var imageURI = {};
  if(albumImageCurrent < albumImageList.length){
    // 构建对象 imageURI
    imageURI[imageName] = albumImageList[++albumImageCurrent].uri;
    // 对控件进行赋值
    page.setData(imageURI,uri);
  }else{
    // 构建对象 imageURI
    imageURI[imageName] = albumImageList[1].uri;
    // 对控件进行赋值
    page.setData(imageURI,uri);
    // 当前显示图片位置
    albumImageCurrent = 1;
  }
};

  按钮回调事件,AlbumStyle1为按钮控件名,albumImage1为图片显示控件名,这里要实现三个按钮切换图片。

/**
   * @author CSH
   * @function 函数功能: 按钮触发回调事件
   * @param {Object} event [当前对象指针]
   */
  ontouchCallback: function (event) {
    var that = this;
    switch(event.target.id){
      case "AlbumStyle1":
        albumWheelImage("albumImage1",that);
        break;
      case "AlbumStyle2":
        albumWheelImage("albumImage2",that);
        break;
      case "AlbumStyle3":
        albumWheelImage("albumImage3",that);
        break;
    }
  },
  .
  .
  .
// 按钮回调事件的注册
   item.AlbumStyle1 = {ontap : that.ontouchCallback};
   item.AlbumStyle2 = {ontap : that.ontouchCallback};
   item.AlbumStyle3 = {ontap : that.ontouchCallback};

3.实现效果

  这次实现是在手表上进行操作的;⌚ ⌚ ⌚

二、方法二:定时切换

  方法一讲解了点击切换图片,想要自动切换的话,可以使用js中的setInterval定时函数来实现。

1.实现原理

  • Step 1、由于前面方法一已经封装了图片切换的函数albumWheelImage(),只要setInterval()设置定时间隔,然后把albumWheelImage()放入定时回调中即可;

setInterval(func, time)函数参数介绍:

  • func : 回调函数,该函数会每隔一段时间被调用一次;
  • time: 每次调用间隔的时间,单位是毫秒;
  • 返回值:返回一个Number类型的数据,这个数字用来作为定时器的唯一标识;

  注意:停止轮播图的时候记得清空定时器clearInterval();

2.实现过程

  实现定时轮播比较简单,给定回调函数跟时间间隔即可;

this.showTips = setInterval(function () {
      albumWheelImage("albumImage1",that);
    }, 1000);

3.实现效果

  这次实现是在手表上进行操作的;⌚ ⌚ ⌚


总结

  感谢观看,如果有帮助到你,请给文章点个赞和收藏,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!


相关文章
|
10天前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
10天前
|
JavaScript 前端开发
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
|
10天前
|
JavaScript 前端开发
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
|
10天前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
13 0
|
10天前
|
JavaScript
JS实现一键点击按钮复制文本
【5月更文挑战第6天】JS实现一键点击按钮复制文本
|
10天前
|
JavaScript
js生成二维码点击可放大
js生成二维码点击可放大
|
10天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(六)
JavaScript高级笔记-coderwhy版本
76 0
|
10天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(一)
JavaScript高级笔记-coderwhy版本
37 0
JavaScript高级笔记-coderwhy版本(一)
|
10天前
|
JSON JavaScript 前端开发
Node.JS第二讲笔记
Node.JS第二讲笔记
33 0
|
10天前
|
JavaScript
JS+CSS3点击粒子烟花动画js特效
JS+CSS3点击粒子烟花动画js特效
20 0
JS+CSS3点击粒子烟花动画js特效