首頁 web前端 js教程 使用jQuery製作基礎的Web圖片輪播效果_jquery

使用jQuery製作基礎的Web圖片輪播效果_jquery

May 16, 2016 pm 03:04 PM
javascript jquery js 圖片 圖片輪播 輪播

先看一下效果:

2016422151213221.jpg (651×415)

就這麼意思,沒截動圖哈~

輪播效果分析:
輪播效果大致可以分為3個部分:輪播圖片(圖片或是包含容器),控制輪播圖顯示的按鈕(向左、向右按鈕,索引按鈕(例如上面效果圖的頂部的數字按鈕) ),每隔一段時間輪流顯示輪播圖片。
輪播圖的顯示:要顯示的輪播圖顯示,不需要顯示的輪播圖隱藏;通常將這些輪播圖片以定位的方式重疊在一起,每次顯示一張輪播圖片。
控制按鈕:滑鼠點擊或移到索引按鈕上面時,顯示對應索引位置的輪播圖;向上、向下按鈕負責控制顯示上一張、下一張輪播圖片。
其它:一般索引按鈕有啟動狀態和未啟動狀態共2種狀態;滑鼠移到輪播圖片上面時應該停止自動輪播,滑鼠離開時開始自動輪播。

輪播效果實現筆記:
jquery提供了豐富的選擇器以及用來挑選元素的方法,這極大的簡化了我們的開發,例如$(".slider-item").filter(".slider-item-selected")選擇了當前處於啟動狀態的索引按鈕。
兩張輪播圖的切換顯示效果是透過jquery的fadeOut()和fadeIn()方法來實現的,具體的使用參考jquery的api;
CSS透明背景的實作:  background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); (可以參考 CSS,相容大部分主流瀏覽器包括IE;為什麼不使用opacity呢?因為opacity會讓文字也透明(子元素也會透明)。
HTML骨架很重要,你寫的html的結果應該是好的。

程式碼部分:

HTML:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<pre name="code" class="html"><div class="slider">

 

 <div class="slider-extra">

 <ul class="slider-nav">

  <li class="slider-item">1</li>

  <li class="slider-item">2</li>

  <li class="slider-item">3</li>

  <li class="slider-item">4</li>

 </ul>

 <div class="slider-page">

  <a class="slider-pre" href="javascript:;;"><</a>

  <a class="slider-next" href="javascript:;;">></a>

 </div>

 </div>

</div>

登入後複製

CSS:

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

* {

 padding: 0px;

 margin: 0px;

}

a {

 text-decoration: none;

}

ul {

 list-style: outside none none;

}

.slider, .slider-panel img, .slider-extra {

 width: 650px;

 height: 413px;

}

.slider {

 text-align: center;

 margin: 30px auto;

 position: relative;

}

.slider-panel, .slider-nav, .slider-pre, .slider-next {

 position: absolute;

 z-index: 8;

}

.slider-panel {

 position: absolute;

}

.slider-panel img {

 border: none;

}

.slider-extra {

 position: relative;

}

.slider-nav {

 margin-left: -51px;

 position: absolute;

 left: 50%;

 bottom: 4px;

}

.slider-nav li {

 background: #3e3e3e;

 border-radius: 50%;

 color: #fff;

 cursor: pointer;

 margin: 0 2px;

 overflow: hidden;

 text-align: center;

 display: inline-block;

 height: 18px;

 line-height: 18px;

 width: 18px;

}

.slider-nav .slider-item-selected {

 background: blue;

}

.slider-page a{

 background: rgba(0, 0, 0, 0.2);

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);

 color: #fff;

 text-align: center;

 display: block;

 font-family: "simsun";

 font-size: 22px;

 width: 28px;

 height: 62px;

 line-height: 62px;

 margin-top: -31px;

 position: absolute;

 top: 50%;

}

.slider-page a:HOVER {

 background: rgba(0, 0, 0, 0.4);

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);

}

.slider-next {

 left: 100%;

 margin-left: -28px;

}

登入後複製

JavaScript:

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

$(document).ready(function() {

 var length,

 currentIndex = 0,

 interval,

 hasStarted = false, //是否已经开始轮播

 t = 3000; //轮播时间间隔

 length = $('.slider-panel').length;

  

 //将除了第一张图片隐藏

 $('.slider-panel:not(:first)').hide();

 //将第一个slider-item设为激活状态

 $('.slider-item:first').addClass('slider-item-selected');

 //隐藏向前、向后翻按钮

 $('.slider-page').hide();

  

 //鼠标上悬时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动

 $('.slider-panel, .slider-pre, .slider-next').hover(function() {

 stop();

 $('.slider-page').show();

 }, function() {

 $('.slider-page').hide();

 start();

 });

  

 $('.slider-item').hover(function(e) {

 stop();

 var preIndex = $(".slider-item").filter(".slider-item-selected").index();

 currentIndex = $(this).index();

 play(preIndex, currentIndex);

 }, function() {

 start();

 });

  

 $('.slider-pre').unbind('click');

 $('.slider-pre').bind('click', function() {

 pre();

 });

 $('.slider-next').unbind('click');

 $('.slider-next').bind('click', function() {

 next();

 });

  

 /**

 * 向前翻页

 */

 function pre() {

 var preIndex = currentIndex;

 currentIndex = (--currentIndex + length) % length;

 play(preIndex, currentIndex);

 }

 /**

 * 向后翻页

 */

 function next() {

 var preIndex = currentIndex;

 currentIndex = ++currentIndex % length;

 play(preIndex, currentIndex);

 }

 /**

 * 从preIndex页翻到currentIndex页

 * preIndex 整数,翻页的起始页

 * currentIndex 整数,翻到的那页

 */

 function play(preIndex, currentIndex) {

 $('.slider-panel').eq(preIndex).fadeOut(500)

  .parent().children().eq(currentIndex).fadeIn(1000);

 $('.slider-item').removeClass('slider-item-selected');

 $('.slider-item').eq(currentIndex).addClass('slider-item-selected');

 }

  

 /**

 * 开始轮播

 */

 function start() {

 if(!hasStarted) {

  hasStarted = true;

  interval = setInterval(next, t);

 }

 }

 /**

 * 停止轮播

 */

 function stop() {

 clearInterval(interval);

 hasStarted = false;

 }

  

 //开始轮播

 start();

});

登入後複製

首先是初始化部分:將除了第一張輪播圖片意外的圖片都隱藏,並且隱藏向前、向後按鈕,使第一個索引按鈕處於啟動狀態。
事件部分:透過jquery的hover()綁定滑鼠上懸以及離開時的事件處理, jquery的bind()方法綁定滑鼠點擊事件處理向前、向後翻動、
輪播控制:pre(), next(), play(), start()開始自動輪播,stop()停止自動輪播。
上面的js寫的比較散,結構也不太好,讀起來也比較費力,也不易使用,耦合度較高。下篇將給出一個純粹的jquery輪播插件, 該插件可以定制各種效果,方便的配置以及可擴展。

以下是整體的程式碼:
index.html

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

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery轮播效果图 - by RiccioZhang</title>

<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>

<style type="text/css">

 * {

 padding: 0px;

 margin: 0px;

 }

 a {

 text-decoration: none;

 }

 ul {

 list-style: outside none none;

 }

 .slider, .slider-panel img, .slider-extra {

 width: 650px;

 height: 413px;

 }

 .slider {

 text-align: center;

 margin: 30px auto;

 position: relative;

 }

 .slider-panel, .slider-nav, .slider-pre, .slider-next {

 position: absolute;

 z-index: 8;

 }

 .slider-panel {

 position: absolute;

 }

 .slider-panel img {

 border: none;

 }

 .slider-extra {

 position: relative;

 }

 .slider-nav {

 margin-left: -51px;

 position: absolute;

 left: 50%;

 bottom: 4px;

 }

 .slider-nav li {

 background: #3e3e3e;

 border-radius: 50%;

 color: #fff;

 cursor: pointer;

 margin: 0 2px;

 overflow: hidden;

 text-align: center;

 display: inline-block;

 height: 18px;

 line-height: 18px;

 width: 18px;

 }

 .slider-nav .slider-item-selected {

 background: blue;

 }

 .slider-page a{

 background: rgba(0, 0, 0, 0.2);

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);

 color: #fff;

 text-align: center;

 display: block;

 font-family: "simsun";

 font-size: 22px;

 width: 28px;

 height: 62px;

 line-height: 62px;

 margin-top: -31px;

 position: absolute;

 top: 50%;

 }

 .slider-page a:HOVER {

 background: rgba(0, 0, 0, 0.4);

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);

 }

 .slider-next {

 left: 100%;

 margin-left: -28px;

 }

</style>

<script type="text/javascript">

 $(document).ready(function() {

 var length,

  currentIndex = 0,

  interval,

  hasStarted = false, //是否已经开始轮播

  t = 3000; //轮播时间间隔

 length = $('.slider-panel').length;

  

 //将除了第一张图片隐藏

 $('.slider-panel:not(:first)').hide();

 //将第一个slider-item设为激活状态

 $('.slider-item:first').addClass('slider-item-selected');

 //隐藏向前、向后翻按钮

 $('.slider-page').hide();

  

 //鼠标上悬时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动

 $('.slider-panel, .slider-pre, .slider-next').hover(function() {

  stop();

  $('.slider-page').show();

 }, function() {

  $('.slider-page').hide();

  start();

 });

  

 $('.slider-item').hover(function(e) {

  stop();

  var preIndex = $(".slider-item").filter(".slider-item-selected").index();

  currentIndex = $(this).index();

  play(preIndex, currentIndex);

 }, function() {

  start();

 });

  

 $('.slider-pre').unbind('click');

 $('.slider-pre').bind('click', function() {

  pre();

 });

 $('.slider-next').unbind('click');

 $('.slider-next').bind('click', function() {

  next();

 });

  

 /**

  * 向前翻页

  */

 function pre() {

  var preIndex = currentIndex;

  currentIndex = (--currentIndex + length) % length;

  play(preIndex, currentIndex);

 }

 /**

  * 向后翻页

  */

 function next() {

  var preIndex = currentIndex;

  currentIndex = ++currentIndex % length;

  play(preIndex, currentIndex);

 }

 /**

  * 从preIndex页翻到currentIndex页

  * preIndex 整数,翻页的起始页

  * currentIndex 整数,翻到的那页

  */

 function play(preIndex, currentIndex) {

  $('.slider-panel').eq(preIndex).fadeOut(500)

  .parent().children().eq(currentIndex).fadeIn(1000);

  $('.slider-item').removeClass('slider-item-selected');

  $('.slider-item').eq(currentIndex).addClass('slider-item-selected');

 }

  

 /**

  * 开始轮播

  */

 function start() {

  if(!hasStarted) {

  hasStarted = true;

  interval = setInterval(next, t);

  }

 }

 /**

  * 停止轮播

  */

 function stop() {

  clearInterval(interval);

  hasStarted = false;

 }

  

 //开始轮播

 start();

 });

</script>

</head>

<body>

 <div class="slider">

 <div class="slider-extra">

  <ul class="slider-nav">

  <li class="slider-item">1</li>

  <li class="slider-item">2</li>

  <li class="slider-item">3</li>

  <li class="slider-item">4</li>

  </ul>

  <div class="slider-page">

  <a class="slider-pre" href="javascript:;;"><</a>

  <a class="slider-next" href="javascript:;;">></a>

  </div>

 </div>

 </div>

</body>

</html>

登入後複製

至此一個簡單的jquery輪播效果就完成了,當然還有很多需要改進的地方。

使用外掛實現
上面的效果看起來還令人滿意,唯一不足的就是:每次需要輪播效果時,要將程式碼複製貼上過去,如果有些部分需要修改(例如:輪播時的動畫效果,前一篇使用的是jquery的淡入淡出效果,如果改成滑動效果,不可避免的要修改js程式碼),那麼就需要對js程式碼進行修改,對我所寫的jquery輪播效果的js程式碼不熟悉的程序員來說,修改這些js確實很難。輪播插件所要實現的目標之一就是插件可以靈活配置(不光只是本篇文章的插件),程式設計師只需要寫少量的程式碼就可以實現豐富的功能,這當然是一件很好的事情。本篇文章的輪播插件的html和css部分需要程式設計師自己寫,而實現效果的js只需要少量的編寫。
這裡我們使用到的zslider外掛在GitHub上開源:
github:https://github.com/ricciozhang/zslider_v1
嗯,我們來看程式碼:

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

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

(function($, window, document) {

  //---- Statics

  var DEFAULT_ANIMATE_TYPE = 'fade'

    ARRAY_SLICE = [].slice,

    ARRAY_CONCAT = [].concat

    ;

    

  //---- Methods

  function concatArray() {

    var deep = false,

      result = [];

    if(arguments.length > 0 && 

        arguments[arguments.length - 1] === true) {

      deep = true;

    }

    for(var i = 0; i < arguments.length; i++) {

      if(!!arguments[i].length) {

        if(deep) {

          for(var j = 0; j < arguments[i].length; j++) {

            //recursive call

            result = ARRAY_CONCAT.call(result, 

                concatArray(arguments[i][j], true));

          }

        } else {

          result = ARRAY_CONCAT.call(result, arguments[i]);

        }

      } else if(i != arguments.length - 1 || 

          (arguments[arguments.length - 1] !== true &&

              arguments[arguments.length - 1] !== false)) {

        result.push(arguments[i]);

      }

    }

    return result;

  }

  

  //----- Core

  $.fn.extend({

    zslider: function(zsliderSetting, autoStart) {

      var itemLenght = 0,

        currItemIndex = 0,

        started = false,

        oInterval = {},

        setting = {

          intervalTime: 3000,

          step: 1,

          imagePanels: $(),

          animateConfig: {

            atype: 'fade',

            fadeInSpeed: 500,

            fadeOutSpeed: 1000

          },

          panelHoverStop: true,

          ctrlItems: $(),

          ctrlItemActivateType: 'hover' || 'click',

          ctrlItemHoverCls: '',

          flipBtn: {},

          panelHoverShowFlipBtn: true,

          callbacks: {

            animate: null

          }

        },

        that = this

        ;

        

      //core methods

      var slider = {

          pre: function() {

            var toIndex = itemLenght + 

              (currItemIndex - setting.step) % itemLenght;

            slider.to(toIndex);

          },

          next: function() {

            var toIndex = (currItemIndex + setting.step) % itemLenght;

            slider.to(toIndex);

          },

          to: function(toIndex) {

            //handle the index value

            if(typeof toIndex === 'function') {

              toIndex = toIndex.call(that, concatArray(setting.imagePanels, true), 

                    concatArray(setting.ctrlItems, true),

                      currItemIndex, step);

            }

            if(window.isNaN(toIndex)) {

              toIndex = 0;

            }

            toIndex = Math.round(+toIndex) % itemLenght;

            if(toIndex < 0) {

              toIndex = itemLenght + toIndex;

            }

              

            var currentPanel = setting.imagePanels.eq(currItemIndex),

            toPanel = setting.imagePanels.eq(toIndex),

            currrntCtrlItem = setting.ctrlItems.eq(currItemIndex)

            toCtrlItem = setting.ctrlItems.eq(toIndex)

            ;

            if(!setting.callbacks.animate || 

                setting.callbacks.animate.call(that, 

                    concatArray(setting.imagePanels, true), 

                      concatArray(setting.ctrlItems, true),

                        currItemIndex, toIndex) === true) {

              currrntCtrlItem.removeClass(setting.ctrlItemHoverCls);

              toCtrlItem.addClass(setting.ctrlItemHoverCls);

                

              toPanel.fadeIn(setting.animateConfig.fadeInSpeed);

              currentPanel.fadeOut(setting.animateConfig.fadeOutSpeed);

            }

              

            //set the current item index

            currItemIndex = toIndex;

          },

          start: function() {

            if(!started) {

              started = true;

              oInterval = 

                window.setInterval(slider.next, setting.intervalTime);

            }

          },

          stop: function() {

            if(started) {

              started = false;

              window.clearInterval(oInterval);

            }

          },

          isStarted: function() {

            return started;

          }

      };

      function initData() {

        if(zsliderSetting) {

          var temp_callbacks = zsliderSetting.callbacks;

            

          $.extend(setting, zsliderSetting);

          $.extend(setting.callbacks, temp_callbacks);

            

          itemLenght = setting.imagePanels.length;

        }

        //convert to the jquery object

        setting.imagePanels = $(setting.imagePanels);

        setting.ctrlItems = $(setting.ctrlItems);

        setting.flipBtn.container = $(setting.flipBtn.container);

        setting.flipBtn.preBtn = $(setting.flipBtn.preBtn);

        setting.flipBtn.nextBtn = $(setting.flipBtn.nextBtn);

      }

      function initLook() {

        //show the first image panel and hide other

        setting.imagePanels.hide();

        setting.imagePanels.filter(':first').show();

        //activate the first control item and deactivate other

        setting.ctrlItems.removeClass(setting.ctrlItemHoverCls);

        setting.ctrlItems.filter(':first').addClass(setting.ctrlItemHoverCls);

        $(that).css('overflow', 'hidden');

        if(setting.panelHoverShowFlipBtn) {

          showFlipBtn(false);

        }

      }

      function initEvent() {

        $(concatArray(setting.imagePanels, 

            setting.flipBtn.preBtn, setting.flipBtn.nextBtn, true)).hover(function() {

          if(setting.panelHoverStop) {

            slider.stop();

          }

          if(setting.panelHoverShowFlipBtn) {

            showFlipBtn(true);

          }

        }, function() {

          slider.start();

          if(setting.panelHoverShowFlipBtn) {

            showFlipBtn(false);

          }

        });

        if(setting.ctrlItemActivateType === 'click') {

          setting.ctrlItems.unbind('click');

          setting.ctrlItems.bind('click', function() {

            slider.to($(this).index());

          });

        } else {

          setting.ctrlItems.hover(function() {

            slider.stop();

            slider.to($(this).index());

          }, function() {

            slider.start();

          });

        }

        setting.flipBtn.preBtn.unbind('click');

        setting.flipBtn.preBtn.bind('click', function() {

          slider.pre();

        });

        setting.flipBtn.nextBtn.unbind('click');

        setting.flipBtn.nextBtn.bind('click', function() {

          slider.next();

        });

      }

      function init() {

        initData();

          

        initLook();

          

        initEvent();

      }

        

      function showFlipBtn(show) {

        var hasContainer = setting.flipBtn.container.length > 0,

          eles;

        eles = hasContainer ? setting.flipBtn.container :

          //to the dom array:

          /*ARRAY_CONCAT.call(ARRAY_SLICE.apply(setting.flipBtn.preBtn),

              ARRAY_SLICE.apply(setting.flipBtn.nextBtn));*/

          concatArray(setting.flipBtn.preBtn, 

                  setting.flipBtn.nextBtn, true);

        if(show) {

          $(eles).show();

        } else {

          $(eles).hide();

        }

      }

        

      init();

      if(arguments.length < 2 || !!autoStart){

        slider.start();

      }

      return slider;

    }

  });

})(jQuery, window, document);

登入後複製

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

小紅書發布自動儲存圖片怎麼解決?發布自動保存圖片在哪裡? 小紅書發布自動儲存圖片怎麼解決?發布自動保存圖片在哪裡? Mar 22, 2024 am 08:06 AM

小紅書發布自動儲存圖片怎麼解決?發布自動保存圖片在哪裡?

抖音評論裡怎麼發圖片?評論區圖片入口在哪裡? 抖音評論裡怎麼發圖片?評論區圖片入口在哪裡? Mar 21, 2024 pm 09:12 PM

抖音評論裡怎麼發圖片?評論區圖片入口在哪裡?

在 iPhone 上讓圖片更清晰的 6 種方法 在 iPhone 上讓圖片更清晰的 6 種方法 Mar 04, 2024 pm 06:25 PM

在 iPhone 上讓圖片更清晰的 6 種方法

ppt怎麼讓圖片一張一張出來 ppt怎麼讓圖片一張一張出來 Mar 25, 2024 pm 04:00 PM

ppt怎麼讓圖片一張一張出來

福昕PDF閱讀器如何將pdf文件轉成jpg圖片-福昕PDF閱讀器將pdf文件轉成jpg圖片的方法 福昕PDF閱讀器如何將pdf文件轉成jpg圖片-福昕PDF閱讀器將pdf文件轉成jpg圖片的方法 Mar 04, 2024 pm 05:49 PM

福昕PDF閱讀器如何將pdf文件轉成jpg圖片-福昕PDF閱讀器將pdf文件轉成jpg圖片的方法

網頁圖片載入不出來怎麼辦? 6種解決辦法 網頁圖片載入不出來怎麼辦? 6種解決辦法 Mar 15, 2024 am 10:30 AM

網頁圖片載入不出來怎麼辦? 6種解決辦法

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

建議:優秀JS開源人臉偵測辨識項目

wps文檔中兩張圖片怎麼並排 wps文檔中兩張圖片怎麼並排 Mar 20, 2024 pm 04:00 PM

wps文檔中兩張圖片怎麼並排

See all articles