文档章节

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
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
10/29
0
0
8种Javascript过渡特效

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

晨曦之光
2012/03/09
0
0
记一个JavaScript图片轮播思路与代码

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

柚子先生
08/06
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

没有更多内容

加载失败,请刷新页面

加载更多

工作中如何做好技术积累

参考:https://tech.meituan.com/study_vs_work.html 看了这篇文章,觉得总结得非常好,因此摘抄了一些关键点,以便自己经常翻阅。 引言 在繁忙的工作中做好技术积累,构建个人核心竞争力. 在...

grace_233
28分钟前
4
0
day146-2018-11-13-英语流利阅读-待学习

5 岁“牛娃”简历给 985 精英一个暴击 Lala 2018-11-13 1.今日导读 “不要让孩子输在起跑线上”,似乎已成为了当下最流行的名句,每个身为家长或还未成为家长的人都不得不思考这句话的分量。...

飞鱼说编程
41分钟前
4
0
Mariadb二进制包安装,Apache安装

安装mariadb 下载二进制包并解压 [root@test-a src]# wget https://downloads.mariadb.com/MariaDB/mariadb-10.2.6/bintar-linux-glibc_214-x86_64/mariadb-10.2.6-linux-glibc_214-x86_64.t......

野雪球
今天
4
0
ConcurrentHashMap 高并发性的实现机制

ConcurrentHashMap 的结构分析 为了更好的理解 ConcurrentHashMap 高并发的具体实现,让我们先探索它的结构模型。 ConcurrentHashMap 类中包含两个静态内部类 HashEntry 和 Segment。HashEnt...

TonyStarkSir
今天
5
0
大数据教程(7.4)HDFS的java客户端API(流处理方式)

博主上一篇博客分享了namenode和datanode的工作原理,本章节将继前面的HDFS的java客户端简单API后深度讲述HDFS流处理API。 场景:博主前面的文章介绍过HDFS上存的大文件会成不同的块存储在不...

em_aaron
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部