html正方形相册,Html 制作相册(示例代码)

1

2

3

4

The second html page

5

6 ul li7 {

8 list-style-type:georgian;

9 text-align:left;

10 }

11 body12 {

13 margin:10px;

14 text-align:center;

15 background-color:Orange;

16 }

17 header18 {

19 height:80px;

20 border:1px solid gray;

21 width:99%22 }

23 .left24 {

25 border:1px solid gray;

26 float:left;

27 width:20%;

28 height:520px;

29 margin:0px;

30 border-top-style:none;

31 border-bottom-style:none;

32 /*设置边框样式*/

33 }

34 .main35 {

36 width:79%;

37 float:left;

38 height:520px;

39 /*border:1px solid gray;*/

40 border-right:1px solid gray;

41 margin:0px;

42 position:relative;/*设置成相对*/

43 }

44 footer45 {

46 clear:left;

47 height:60px;

48 border:1px solid gray;

49 width:99%50 }

51 #container52 {

53 display:block;

54 padding:5px;

55 /*border:1px solid gray;*/

56 margin:5px;

57 position:relative;

58 }

59 .small60 {

61 display:block;

62 border-bottom:1px solid gray;/*将缩略图，和大图隔开*/

63 }

64 .small img65 {

66 width:150px;

67 height:120px;

68 margin:5px;

69 border:1px solid gray;

70 padding:3px;

71 }

72 .mm73 {

74 cursor:pointer;

75 border-radius:5px;/*鼠标移入样式*/

76

77 }

78 input[type="button"]79 {

80 cursor:pointer;

81 background-color:Orange;

82 color:Lime;

83 font-family:Arial;

84 font-size:25px;

85 height:50px;

86 border:0px;

87 width:50px;

88 position:relative;

89 top:150px;

90 }

91 #btnLeft92 {

93 left:30px;

94 float:left;

95 }

96 #btnRight97 {

98 right:30px;

99 float:right;

100 }

101

102

103

104 $(document).ready(function() {105 //初始加载六张图片作为缩略图

106 for(vari= 0; i< 6; i++) {107 varsrc= "img/" + "0" +(i+ 1).toString()+ ".jpg";108 varimg=$("").attr("id", (i+ 1).toString()).attr("alt", (i+ 1).toString()).attr("src", src);109 $("#small").append(img);110 }111 //设置缩略图的点击事件，以及鼠标移入，移出事件

112 $("#small img").click(function() {113 $("#img").css("display","none");114 varsrc=$(this).attr("src");115 varalt=$(this).attr("alt");116 varnAlt=parseInt(alt);117 $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);118 }).mouseover(function() {119 $(this).addClass("mm");120 }).mouseleave(function() {121 $(this).removeClass("mm");122 });123 vardelay= 1000;124 //向左切换事件

125 $("#btnLeft").click(function() {126 $("#img").css("display","none");127 varalt=$("#img").attr("alt");128 if(alt== "1") {129 alt= 7;130 }131 varnAlt=parseInt(alt)- 1;132 varsrc= "img/" + "0" +nAlt.toString()+ ".jpg";133 $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);134 });135 //向右切换事件

136 $("#btnRight").click(function() {137 $("#img").css("display","none");138 varalt=$("#img").attr("alt");139 if(alt== "6") {140 alt= 0;141 }142 varnAlt=parseInt(alt)+ 1;143 varsrc= "img/" + "0" +nAlt.toString()+ ".jpg";144 $("#img").attr("alt