首頁 > 開發者 > JavaScript

jquery圖片切換執行個體分析

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jquery圖片切換執行個體分析

 本文執行個體講述了jquery圖片切換實現方法。分享給大家供大家參考。具體如下：

 

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script language="javascript" src="inc/jquery-1.4.2.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>無標題文檔</title>

</head>

<style type="text/css">

#butt div{

width:122px; height:32px; float:left; text-align:center;

}

</style>

<script language="javascript">

function tab_q(now_id)

{

if(now_id == null)

{

//alert($("#butt").find("div:visible").attr("id"))

c_show_id = $("#cont").find("div:visible").attr("id");

//此時顯示按鈕的ID名稱

nums_id = c_show_id.substring(1,3);

//截取B1後面的1，作為字串放到C後面

b_show_id = "b"+ nums_id;

//此時顯示內容的ID名稱

nums_next = parseInt(nums_id)+1

//alert(nums_next)

if(nums_next<=8)

//如果到最後一個的話，那麼就要跳回第一個

{

}

else

{

nums_next = 1

}

}else

{

nums_next = now_id.substring(1,3);

}

$("#cont div").hide();

//讓所有的上面的div中的圖片消失。

//是為了羅出地方讓下一張圖片出現的。

$("#butt div").css({border:'#FF0000 0px solid'});

//讓所有按鈕的邊框消失。是為了讓下一個按鈕有邊框，

//alert("#"+"c"+nums_next)

$("#c"+nums_next).fadeIn() //讓上面的圖片淡出來

$("#b"+nums_next).css({border:'#FF0000 1px solid'});

//給下面對應的按鈕加上邊框，當然這裡也可以做其他的效果

//加邊框只是為了測試

}

$(function(){ //當頁面載入完成

auto = setInterval("tab_q()",2000); //這裡修改切換的時間的

$("#cont div").each(function(i,n){

$(n).hover(

function(){

clearInterval(auto) },

function(){auto=setInterval("tab_q()",2000); }

)

})

$("#butt div").each(function(i,n){

$(n).hover(

function(){

clearInterval(auto);

tab_q($(this).attr("id"))

},function(){auto=setInterval("tab_q()",2000); }

)

})

})

</script>

<body>

<div style="width:980px; height:275px;">

<div style="width:980px; height:241px; overflow:hidden;

text-align:center" id="cont">

<div style="width:980px; height:241px; text-align:center"

id="c1"><img src="images/xmjz.jpg" width="980"/>

</div>

<div style="width:980px; height:241px; display:none;

text-align:center" id="c2">

<img src="images/4037.jpg" width="980" height="241"/>

</div>

<div style="width:980px; height:241px; display:none;

text-align:center" id="c3"><img src="images/4041.jpg"

width="980" height="241"/></div>

<div style="width:980px; height:241px; display:none;

text-align:center" id="c4">

<img src="images/xmjz.jpg" width="980"/>

</div>

<div style="width:980px; height:241px;

display:none;text-align:center" id="c5">

<img src="images/xmjz.jpg" width="980"/>

</div>

<div style="width:980px; height:241px;

display:none;text-align:center" id="c6">

<img src="images/xmjz.jpg" width="980"/>

</div>

<div style="width:980px; height:241px;

display:none;text-align:center" id="c7">

<img src="images/xmjz.jpg" width="980"/>

</div>

<div style="width:980px; height:241px;

display:none;text-align:center" id="c8">

<img src="images/xmjz.jpg" width="980"/>

</div>

</div>

<div style="width:980px; height:31px; border:#FF0000 0px solid"

id="butt">

<div style="background-image:url(images/xmbtn_1.png)" id="b1">

</div>

<div style="background-image:url(images/xmbtn_2.png)" id="b2">

</div>

<div style="background-image:url(images/xmbtn_2.png)" id="b3">

</div>

<div style="background-image:url(images/xmbtn_2.png)" id="b4">

</div>

<div style="background-image:url(images/xmbtn_2.png)" id="b5">

</div>

<div style="background-image:url(images/xmbtn_2.png)" id="b6">

</div>

<div style="background-image:url(images/xmbtn_2.png)" id="b7">

</div>

<div style="background-image:url(images/xmbtn_2.png)" id="b8">

</div>

</div>

</div>

</body>

</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More