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 相关文章推荐
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
JS面向对象编程浅析
Aug 28 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
微信小程序 标签传入数据
May 08 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
Vue 去除路径中的#号
Apr 19 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
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
phpinfo的知识点总结
2019/10/10 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
Python psutil模块简单使用实例
2015/04/28 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python流程控制 while循环实现解析
2019/09/02 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
应届毕业生就业自荐信
2013/10/26 职场文书
工程项目经理岗位职责
2013/12/15 职场文书
西式婚礼证婚词
2014/01/12 职场文书
服务行业口号
2014/06/11 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
《鲸》教学反思
2016/02/23 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫