文档章节

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

码农般的学良
 码农般的学良
发布于 2016/11/24 10:08
字数 1123
阅读 5
收藏 0
点赞 0
评论 0

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

执行左移右移函数:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

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容器:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!-- 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>

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

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

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";

  }

}

© 著作权归作者所有

共有 人打赏支持
码农般的学良
粉丝 1
博文 20
码字总数 23265
作品 0
通州
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
8种Javascript过渡特效

看过很多后,本人觉得jQuery scrollable 在其中算很优秀的。 以下转自:http://paranimage.com/8-kinds-of-transition-effects-javascript/ 8种JavaScript 过渡特效 , 涵盖淡入淡出、翻转特...

晨曦之光
2012/03/09
0
0
jQuery.lazyload详解

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script src="http://file.ithome.com/js/jquery.lazyload.js"></script>   jQuery实现图片延迟加载,不知道是......

地球家园
2014/03/05
0
0
微信开放JS-SDK,助力网页开发[转自微信官方]

微信公众平台今日面向开发者开放微信内网页开发工具包(微信JS-SDK)。 通过微信JS-SDK提供的11类接口集,开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力,还可以直...

明非_
2014/07/26
0
14
第45款插件:waterfall.js瀑布流布局单排图片自动滚动

描述:jquery仿堆糖网瀑布流图片布局,设置单排图片上下对齐图片自动上下交替滚动效果。单排图片按左右顺序上下图片自动滚动。 图片展示: 兼容浏览器:IE6+/Firefox/Google Chrome 官方链接...

子弹兄
2013/03/06
0
0
15个提高编程技巧的JavaScript工具

JavaScript脚本库是一个预先用JavaScript语言写好的库,它方便了我们开发基于JavaScript的应用程序,特别适合AJAX和其他一些以Web为中心的技术。JavaScript主要用于编写嵌入或者包含在HTML页...

IanSun
2015/03/14
0
0
Lazy Load, 延迟加载图片的 jQuery 插件

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正...

xiaoxin
2014/07/09
0
0
分享14个超酷的视差滚动效果网站

日期:2012-3-31 来源:GBin1.com Javascript视差滚动特效最早出现的时候使用多个不同的透明PNG背景图片叠放来实现,如果我们移动鼠标,将会以不同的速度移动不同层次上 的图片,产生层次感效...

gbin1
2012/03/31
0
0
Javascript浏览器兼容性

JS <noscript>标签 早期浏览器都面临一个特殊的问题,即当浏览器不支持JavaScript 时如何让页面平稳地退化。对这个问题的最终解决方案就是创造一个<noscript>元素,用以在不支持JavaScript ...

wersdffg
2015/07/23
0
1
setTimeout和setInterval中使用this

JavaScript代码 var roll = function(objid, step, direct) 其中objid为要滚动的容器ID,step为每一轮滚动的距离,direct为滚动方向。基础结构和一些方法就不去管了,直接进入关键点。 roll...

xiahuawuyu
2012/05/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式 Factory工厂模式 Singleton单例模式 Delegate委派模式 Strategy策略模式 Prototype原型模式 Template模板模式 Spring5 beans 接口实例化 代理Bean操作 ...

小致dad
4分钟前
0
0
SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
9
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
9
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
200
1
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
昨天
1
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
昨天
1
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
昨天
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
昨天
2
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部