文档章节

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

码农般的学良
 码农般的学良
发布于 2016/11/24 10:08
字数 1123
阅读 5
收藏 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
react在安卓下输入框被手机键盘遮挡问题

问题概述 今天遇到了一个问题,在安卓手机上,当我要点击输入“店铺名称”时,手机软键盘弹出来刚好把输入框挡住了;挡住就算了,关键是页面还不能向上滑动,整个手机窗口被压为原来的二分之...

秋収冬藏
08/30
0
0
记一个JavaScript图片轮播思路与代码

说在前头 喜欢并学习前端,一路摸爬滚打过来,现在算算也快满一年的,每天或多或少都会来“拜读”大家的写的文章,学习与感悟了不少,作为一名要变的更强的前端小哥哥,在这个节点上,也想写...

柚子先生
08/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Mac OS X下Maven的安装与配置

Mac OS X 安装Maven: 下载 Maven, 并解压到某个目录。例如/Users/robbie/apache-maven-3.3.3 打开Terminal,输入以下命令,设置Maven classpath $ vi ~/.bash_profile 添加下列两行代码,之后...

TonyStarkSir
今天
3
0
关于编程,你的练习是不是有效的?

最近由于工作及Solution项目的影响,我在重新学习DDD和领域建模的一些知识。然后,我突然就想到了这个问题,以及我是怎么做的? 对于我来说,提升技能的项目会有四种: 纯兴趣驱动的项目。即...

问题终结者
今天
3
0
打开eclipse出现an error has occurred see the log file

解决方法: 1,打开eclipse安装目录下的eclipse.ini文件; 2,打开的文本文件最后添加一行 --add-modules=ALL-SYSTEM 3,保存重新打开Eclipse。...

任梁荣
昨天
4
0
搞定Northwind示例数据库,无论哪个版本的SQLServer都受用

Northwind数据库 从这里可以找到突破口: http://social.msdn.microsoft.com/Forums/zh-CN/Vsexpressvb/thread/8490a1c6-9018-40c9-aafb-df9f79d29cde 下面是MSDN: http://msdn2.microsoft......

QQZZFT
昨天
1
0
mysql主从同步,安装配置操作

准备 两台mysql服务,我这里准备了如下: 主库:192.168.176.128 从库:192.168.176.131 如何在Linux上安装mysql服务,请看https://blog.csdn.net/qq_18860653/article/details/80250499 操作...

小致dad
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部