JS实现的相册图片左右滚动完整实例
JS实现的相册图片左右滚动完整实例
码农般的学良 发表于12个月前
JS实现的相册图片左右滚动完整实例
  • 发表于 12个月前
  • 阅读 3
  • 收藏 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";

  }

}

共有 人打赏支持
粉丝 2
博文 20
码字总数 23265
×
码农般的学良
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: