这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现的相册图片左右滚动效果, 结合完整实例形式分析了 javascript 事件触发与页面元素属性动态变换的相关操作技巧, 需要的朋友可以参考下
本文实例讲述了 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0531/330240.html