JS实现的相册图片左右滚动完整实例


Posted in Javascript onNovember 23, 2016

本文实例讲述了JS实现的相册图片左右滚动效果。分享给大家供大家参考,具体如下:

执行左移右移函数:

var $get = function(id) {
  return "string" == typeof id ? document.getElementById(id) : id;
};
var Extend = function(destination, source) {
  for (var property in source) {
    destination[property] = source[property];
  }
  return destination;
}
var CurrentStyle = function(element) {
  return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
var Bind = function(object, fun) {
  var args = Array.prototype.slice.call(arguments).slice(2);
  return function() {
    return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
  }
}
var Tween = {
  Quart: {
    easeOut: function(t, b, c, d) {
      return -c * ((t = t / d - 1) * t * t * t - 1) + b;
    }
  },
  Back: {
    easeOut: function(t, b, c, d, s) {
      if (s == undefined) s = 1.70158;
      return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
    }
  },
  Bounce: {
    easeOut: function(t, b, c, d) {
      if ((t /= d) < (1 / 2.75)) {
        return c * (7.5625 * t * t) + b;
      } else if (t < (2 / 2.75)) {
        return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
      } else if (t < (2.5 / 2.75)) {
        return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
      } else {
        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
      }
    }
  }
}
//容器对象,滑动对象,切换数量
var SlideTrans = function(container, slider, count, options) {
  this._slider = $get(slider);
  this._container = $get(container); //容器对象
  this._timer = null; //定时器
  this._count = Math.abs(count); //切换数量
  this._target = 0; //目标值
  this._t = this._b = this._c = 0; //tween参数
  this.Index = 0; //当前索引
  this.SetOptions(options);
  this.Auto = !!this.options.Auto;
  this.Duration = Math.abs(this.options.Duration);
  this.Time = Math.abs(this.options.Time);
  this.Pause = Math.abs(this.options.Pause);
  this.Tween = this.options.Tween;
  this.onStart = this.options.onStart;
  this.onFinish = this.options.onFinish;
  var bVertical = !!this.options.Vertical;
  this._css = bVertical ? "top" : "left"; //方向
  //样式设置
  var p = CurrentStyle(this._container).position;
  p == "relative" || p == "absolute" || (this._container.style.position = "relative");
  this._container.style.overflow = "hidden";
  this._slider.style.position = "absolute";
  this.Change = this.options.Change ? this.options.Change :
    this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;
};
SlideTrans.prototype = {
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
    Vertical: true, //是否垂直方向(方向不能改)
      Auto: false, //是否自动
      Change: 0, //改变量
      Duration: 50, //滑动持续时间
      Time: 10, //滑动延时
      Pause: 2000, //停顿时间(Auto为true时有效)
      onStart: function() { }, //开始转换时执行
      onFinish: function() { }, //完成转换时执行
      Tween: Tween.Quart.easeOut//tween算子
    };
    Extend(this.options, options || {});
  },
  //开始切换
  Run: function(index) {
    //修正index
    index == undefined && (index = this.Index);
    index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
    //设置参数
    this._target = -Math.abs(this.Change) * (this.Index = index);
    this._t = 0;
    this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);
    this._c = this._target - this._b;
    this.onStart();
    this.Move();
  },
  //移动
  Move: function() {
    clearTimeout(this._timer);
    //未到达目标继续移动否则进行下一次滑动
    if (this._c && this._t < this.Duration) {
      this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));
      this._timer = setTimeout(Bind(this, this.Move), this.Time);
    } else {
      this.MoveTo(this._target);
      this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
    }
  },
  //移动到
  MoveTo: function(i) {
    this._slider.style[this._css] = i + "px";
  },
  //下一个
  Next: function() {
    this.Run(++this.Index);
  },
  //上一个
  Previous: function() {
    this.Run(--this.Index);
  },
  //停止
  Stop: function() {
    clearTimeout(this._timer); this.MoveTo(this._target);
  }
};

在前天html加入div容器:

<!-- Icon scroll begin -->
<div style="text-align:center; width:100%; margin:auto auto">
  <div class="container" id="idContainer" runat="server" >
  </div>
</div>
<!--end-->
<!--左右滚动按钮-->
<div class="defaultprenext">
<table cellpadding=0 cellspacing=0 style="width:100%">
 <tr>
   <td style="width:40%; text-align:left; padding-left:6px">
   <img id="ImgPre" alt="" src="ImageV3/Default/pre-gray.png" />
   <span class="pager" id="Pre" style="color:Gray">Pre</span></td>
   <td style="width:20%; text-align:center">
     <div class="defaultprenextmid">
      <div style="height:10px; vertical-align:middle; line-height:10px">
       <img src="ImageV3/Default/greendot.png" id="Img1" /> 
        <img src="ImageV3/Default/graydot.png" id="Img2" /> 
        <img src="ImageV3/Default/graydot.png" id="Img3" />
      </div>
    </div>
   </td>
   <td style="width:40%; text-align:right; padding-right:6px">
    <span class="pager" id="Next" style="color:#2f6417">Next</span>
    <img id="ImgNext" alt="" src="ImageV3/Default/next-green.png" />
   </td>
 </tr>
</table>
</div>

下面是改变左右按钮可用状态

var imgNum = $get("idContainer").getElementsByTagName("img").length;
var pre = $get("Pre");
var next = $get("Next");
var i = 0;
if (imgNum > 0) {
  var st = new SlideTrans("idContainer", "idSlider", 3, { Vertical: false });
  if (i < 2) {
    $get("Next").onclick = function() {
      if (i < 2) {
        st.Next();
        i++;
        if (i == 1) {
          $get("ImgPre").src = "ImageV3/Default/pre-green.png";
          pre.style.color = "#2f6417";
        }
        if (i == 2) {
          $get("ImgNext").src = "ImageV3/Default/next-gray.png";
          next.style.color = "Gray";
        }
        ChangePicIndex(i);
      }
    }
  }
  $get("Pre").onclick = function() {
    if (i > 0) {
      st.Previous();
      $get("ImgNext").src = "ImageV3/Default/next-green.png";
      next.style.color = "#2f6417";
      i--;
      if (i == 0) {
        $get("ImgPre").src = "ImageV3/Default/pre-gray.png";
        pre.style.color = "Gray";
      }
      ChangePicIndex(i);
    }
  }
  st.Run();
}
function ChangePicIndex(index) {
  switch (index) {
    case 1:
      $get("Img1").src = "ImageV3/Default/graydot.png";
      $get("Img2").src = "ImageV3/Default/greendot.png";
      $get("Img3").src = "ImageV3/Default/graydot.png";
      break
    case 2:
      $get("Img1").src = "ImageV3/Default/graydot.png";
      $get("Img2").src = "ImageV3/Default/graydot.png";
      $get("Img3").src = "ImageV3/Default/greendot.png";
      break
    default:
      $get("Img1").src = "ImageV3/Default/greendot.png";
      $get("Img2").src = "ImageV3/Default/graydot.png";
      $get("Img3").src = "ImageV3/Default/graydot.png";
  }
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
webpack 模块热替换原理
Apr 09 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 #Javascript
jquery-mobile表单的创建方法详解
Nov 23 #Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 #Javascript
浅析Node.js:DNS模块的使用
Nov 23 #Javascript
jquery-mobile基础属性与用法详解
Nov 23 #Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 #Javascript
利用jquery获取select下拉框的值
Nov 23 #Javascript
You might like
discuz安全提问算法
2007/06/06 PHP
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
python 重命名轴索引的方法
2018/11/10 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
个人查摆问题自查报告
2014/10/16 职场文书
管理失职检讨书
2015/05/05 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
开学随笔
2015/08/15 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
《角的度量》教学反思
2016/02/18 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
Python中第三方库Faker的使用详解
2022/04/02 Python