> 웹 프론트엔드 > JS 튜토리얼 > js를 사용하여 웹 페이지 이미지 캐러셀을 구현하는 방법

js를 사용하여 웹 페이지 이미지 캐러셀을 구현하는 방법

一个新手
풀어 주다: 2017-09-09 09:47:21
원래의
3881명이 탐색했습니다.

그림 회전은 웹 페이지 표시에서 일반적으로 사용됩니다. 여기서는 그림 회전에 4개의 긴 그림이 사용됩니다. 다음은 코드입니다:

f7.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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>MyProject</title>

    <link rel="stylesheet" href="css/f7.css">

    <script src="js/abc.js"></script>

</head>

<body>

    <p class="top_p">

        <h1 class="top_p_h1">srh</h1>

    </p>

    <p class="second_p">

        <p id="transImageBox" class="trans_image_box"

            <img class="trans_image" src="image/1.png" /> 

            <img class="trans_image" src="image/2.png" /> 

            <img class="trans_image" src="image/3.png" /> 

            <img class="trans_image" src="image/4.png" /> 

        </p>

    </p>

    <p class="down_p">

        <p class="down_p_left"></p>

        <p class="down_p_right"></p>

    </p>

</body>

</html>

로그인 후 복사

f7.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

.top_p{

    width: 100%;

    height: 130px;

    /*background: red;*/

    background-image: url(../image/Koala.jpg);

    text-align: center;

}

 

/*.top_p_h1{

    text-align: center;

}

*/

.second_p{

    width: 1366px;

    height: 260px;

    /*margin: 20px;  */

    overflow: hidden;

    /*background-image: url(../image/Desert.jpg);*/

    /*background: yellow;*/

    margin-top: 3px;

}

 

 .trans_image_box { 

        width: 5500px;  /*注意这里是根据图片总长度来确定的,如果小于图片总长度,会出现轮放空白的情况!*/

        height: 300px; 

        -webkit-transition: all 1s ease-in-out; 

        -moz-transition: all 1s ease-in-out; 

        -o-transition: all 1s ease-in-out; 

        transition: all 1s ease-in-out; 

    

    .trans_image { 

        width: 1350px;  /*这些根据需求可自定义*/

        height:260px; 

        float: left;

        margin-left: 5px; 

    }

 

 

.down_p{

    margin-top: 3px;

}

 

.down_p_left{

    width: 25%;

    height: 500px;

    /*background: blue;*/

    background-image: url(../image/Jellyfish.jpg);

    float: left;

}

 

.down_p_right{

    width: 74%;

    height: 500px;

    /*background: green;*/

    background-image: url(../image/Hydrangeas.jpg);

    float: right;

}

로그인 후 복사

abc.js

1

2

3

4

5

6

7

8

9

10

11

12

13

var int=self.setInterval("change()",2*1000); 

    var time=self.setInterval("clock()",3*1000); 

    var i=1; 

    function clock(){ 

        i=i+1; 

        if(i==5){ 

            i=1; 

        

    

    function change(){ 

        var a=document.getElementById("transImageBox"); 

        a.style.marginLeft=(1-i)*1366+"px"/*轮放长度请看这里*/

    }

로그인 후 복사

위 내용은 js를 사용하여 웹 페이지 이미지 캐러셀을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿