Rumah > hujung hadapan web > Tutorial H5 > 利用html5实现图片的淡入淡出效果

利用html5实现图片的淡入淡出效果

王林
Lepaskan: 2020-12-15 09:57:35
ke hadapan
5159 orang telah melayarinya

利用html5实现图片的淡入淡出效果

目的:

实现图片的淡入淡出效果

(学习视频分享:html5视频教程

具体代码如下:

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

<!doctype html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

<meta name=&#39;apple-mobile-web-app-capable&#39; content=&#39;yes&#39; />

<meta name="format-detection" content="telephone=no" />

<meta http-equiv=&#39;Content-Type&#39; content=&#39;textml;charset=UTF-8&#39; />

<title>移动端</title>

<style>

    *{

  padding: 0;

  margin: 0;

}

#slideshow{

  width: 160px; 

  height: 600px;

  margin: 0 auto; /*设置在页面水平居中*/

  overflow: hidden;

  position: relative; 

}

#slideshow img{

  width: 160px;

  position: absolute; /*图片采取绝对定位,均位于左上角,重叠在一起*/

  top: 0;

  left: 0;

  opacity: 0; /*初始不透明度为0,图片都看不见*/

  transition: opacity 1s linear; /*--重点--定义一个关于透明度的transition*/

}

#slideshow img.active{

  opacity: 1; /*有active类的图片不透明度为1,即显示图片*/

}

 

</style>

</head>

<body>   

<div id="slideshow">

  <!-- 插入轮播的图片们 -->

    <img src="img/1 (1).jpg" />

    <img src="img/1 (2).jpg" />

    <img src="img/1 (3).jpg" />

    <img src="img/1 (4).jpg" />

    <img src="img/1 (5).jpg" />

    <img src="img/1 (6).jpg" />

    <img src="img/1 (7).jpg" />

    <img src="img/1 (8).jpg" />

    <img src="img/1 (9).jpg" />

    <img src="img/1 (10).jpg" />

    <img src="img/1 (11).jpg" />

 

</div>

<script>

    //---------主角:轮播图函数-------------

function slideshow() {

  var slideshow=document.getElementById("slideshow"),

  imgs=slideshow.getElementsByTagName("img"), //得到图片们

 

  current=0; //current为当前活跃的图片编号

 

  function slideOff() {

    imgs[current].className=""; //图片淡出

 

  }

  function slideOn() {

    imgs[current].className="active"; //图片淡入

 

  }

 

  function changeSlide() { //切换图片的函数

    slideOff();

    current++; //自增1

    if(current>=imgs.length) current=0;

    slideOn();

  }

 

  //每2s调用changeSlide函数进行图片轮播

  var slideon=setInterval(changeSlide,2000);

 

  slideshow.onmouseover=function () {

    clearInterval(slideon); //当鼠标移入时清除轮播事件

  }

  slideshow.onmouseout=function () {

    slideon=setInterval(changeSlide,1500); //当鼠标移出时重新开始轮播事件

  }

 

 

}

 

slideshow();

</script>

</body>

</html>

Salin selepas log masuk

相关推荐:html5教程

Atas ialah kandungan terperinci 利用html5实现图片的淡入淡出效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:csdn.net
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan