首頁 > web前端 > js教程 > 原生js寫輪播實例教程

原生js寫輪播實例教程

小云云
發布: 2017-12-13 10:40:53
原創
1710 人瀏覽過

本文我們將和大家分享原生js寫輪播實例教程,結合html、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

<style type="text/css">

            #box{

                width:1140px;

                height: 380px;

                border: 1px solid #000;

                margin: 0 auto;

                position: relative;

            }

            img{

                position: absolute;

                top: 0;

                left: 0;

            }

            a{

                display: block;

                width:60px;

                height: 50px;

                text-align: center;

                line-height: 50px;

                background: #FFFAE8;

                display: none;

                position: absolute;

            }

            #prev{

                top:50%;

                left: 10px;

            }

            #next{

                top:50%;

                right: 10px;

            }

            p{

                width:30px;

                height: 30px;

                background-color: #ccc;

                border-radius: 50%;

                float: left;

                margin:0 10px;

                border:2px solid #fff;

                margin:10px;

            }

            .spot{

                width:272px;

                height:40px;

                position: absolute;

                bottom:10px;

                left: 40%;

                 

            }

            .on{

                background: red;

            }

        </style>

登入後複製

html程式碼

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<p id="box">

            <img src="img/j_banner1.jpg" alt="" />

            <img src="img/j_banner2.jpg" alt="" />

            <img src="img/j_banner3.jpg" alt="" />

            <img src="img/j_banner4.jpg" alt="" />

            <img src="img/j_banner5.jpg" alt="" />

            <p class="spot">

                <p class="on"></p>

                <p></p>

                <p></p>

                <p></p>

                <p></p>

            </p>

            <a id="prev" href="javascript:;">前一张</a>

            <a id="next" href="javascript:;">后一张</a>

        </p>

登入後複製

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

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

<script type="text/javascript">

     

        var pic = document.getElementsByTagName("img");

        var btn1 = document.getElementById("prev");

        var btn2 = document.getElementById("next");

        var _box = document.getElementById("box");

        var _p = document.getElementsByTagName("p");

        var num = 0;

        var timer = null;

        for(var j = 1;j < pic.length;j++){

                setOpacity(pic[j],0);

            }

         

        //透明度封装

        function setOpacity(elem,level){

            if(elem.filters){

                elem.style.filter = "alpha(opacity=" + level + ")";

            }else{

                elem.style.opacity = level / 100;

            }

        }

        //淡如效果

        function fadeIn(elem){

            setOpacity(elem,0);

            for(var i = 0;i <= 100;i++){

                (function(pos){

                    setTimeout(function(){

                        setOpacity(elem,pos)

                    },10 * pos);

                })(i);

            }

        }

         

        //淡出效果

        function fadeOut(elem){

            for(var i = 0;i <= 100;i++){

                (function(pos){

                    setTimeout(function(){

                        setOpacity(elem,pos);

                    },10 *(100 - pos));

                })(i);

            }

        }

         

        function converPrev(){

            if(num == 0){

                fadeOut(pic[num]);

                num = 4;

                fadeIn(pic[num]);

            }else{

                fadeIn(pic[num-1]);

                fadeOut(pic[num]);

                num--;

            }

            showDot(num);

        }

         

        function converNext(){

            if(num == 4){

                fadeOut(pic[num]);

                num = 0;

                fadeIn(pic[num]);

            }else{

                fadeIn(pic[num+1]);

                fadeOut(pic[num]);

                num++;

            }

            showDot(num);

        }

         

        //小圆点背景色

        function showDot(n){

            for(var k = 0;k < _p.length;k++){

                _p[k].className="";

            }

            _p[n].className = "on";

        }

         

        //小圆点点击事件

        for(var n = 0;n < _p.length;n++){

            _p[n].setAttribute("aindex",n);   

            _p[n].onclick = function(){

                var newIndex = this.getAttribute("aindex") * 1;

                fadeOut(pic[num]);

                fadeIn(pic[newIndex]);

                num = newIndex;

                showDot(num);

            }

        }

         

        function autoPlay(){

            timer =    setInterval(converNext,2000);

             

        }

        autoPlay();

         

        btn1.onclick = converPrev;

        btn2.onclick = converNext;

         

        _box.onmouseout = function(){

            autoPlay();

            btn1.style.display = "none";

            btn2.style.display = "none";

        }

         

        _box.onmouseover = function(){

            clearInterval(timer);

            btn1.style.display = "block";

            btn2.style.display = "block";

        }

         

         

    </script>

登入後複製


相關推薦:

JS循環輪播圖

JQuery圖片輪播效果的實作實例

#jQuery實作左右輪播圖效果的分享

以上是原生js寫輪播實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
怎麼實作 JavaScript點與圓的位置關係
來自於 1970-01-01 08:00:00
0
0
0
JavaScript鉤子函數是什麼?
來自於 1970-01-01 08:00:00
0
0
0
c++ 呼叫javascript
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板