Carousel3/index.html at master · javascriptObject/Carousel3 · GitHub

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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!--文档声明为 html（最新html5）-->
<!doctype html>
<html>
	<head>
		<!--声明当前页面编码格式为国际编码（utf-8）还有一种中文编码（gbk/gb2312）-->
		<meta charset="UTF-8">
		<!--网页三要素-->
		<meta name="Keywords" content="关键词,关键词">
		<meta name="Description" content="描述">
		<title>js3D特效图片切换</title>
		<style id="css">
		*{margin:0;padding:0;}
		#box{
			width:1050px;
			height:361px;
			margin:100px auto 0;
			position:relative;
		}
		#list-pic{
			width:1050px;
			height:361px;
			perspective:1500px;/*景深*/
		}
		#list-pic li{
			list-style:none;
			float:left;
			width:50px;
			height:360px;
			transform-style:preserve-3D;/*3D 表示所有的子元素在3D空间展现*/
			position:relative;
			-webkit-transform-origin:center center -180px;
		}
		#list-pic li a{
			position:absolute;
			width:100%;
			height:100%;
			font-size:30px;
		}
		#list-pic li a:nth-child(1){
			left:0;
			top:0;
			background:url('img/flash1.png');
		}
		#list-pic li a:nth-child(2){
			left:0;
			top:-100%;
			background:green;
			transform-origin:bottom;
			transform:rotateX(90deg);
			background:url('img/flash2.png');
		}
		#list-pic li a:nth-child(3){
			left:0;
			top:0;
			background:blue;
			transform:translateZ(-361px) rotateX(180deg) ;
			background:url('img/flash3.png');
		}
		#list-pic li a:nth-child(4){
			left:0;
			top:100%;
			background:yellow;
			transform-origin:top;
			transform:rotateX(-90deg) ;
			background:url('img/flash4.png');
		}
		#num-btn{
			width:100%;
			height:20px;
			position:absolute;
			left:0;
			bottom:30px;
			text-align:center;
		}
		#num-btn li{
			list-style:none;
			width:20px;
			height:20px;
			border-radius:50%;
			background:#313131;
			display:inline-block;
			cursor:pointer;
			color:#fff;
		}
		#num-btn li.active{
			background:red;
		}
		</style>
	</head>
	<body>
	<div id="box">
		<ul id="list-pic">
		</ul>
		<ul id="num-btn">
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
	</body>
</html>
<script>
	var List = document.getElementById('list-pic');
	var Css = document.getElementById('css');
	var Btn = document.getElementById('num-btn');
	var BtnLi = Btn.getElementsByTagName('li');
	var Iw = 50;
	var ListLi = List.children;
	var num = List.clientWidth/Iw;
	var str = '';//添加元素
	var scss = '';//添加样式
	var Zindex = 0;//层级关系
	for (var i=0;i<num ;i++ )
	{
		i>num/2?Zindex--:Zindex++;
		str = str + '<li><a href=""></a><a href=""></a><a href=""></a><a href=""></a></li>';
		scss += '#list-pic li:nth-child('+(i+1)+') a{background-position:-'+Iw*i+'px 0;}';

		scss += '#list-pic li:nth-child('+(i+1)+'){z-index:'+Zindex+';}';

	}
	List.innerHTML = str;
	Css.innerHTML += scss;
	for (var k=0;k<BtnLi.length; k++ )
	{
		BtnLi[k].index = k;//0 1 2 3
		BtnLi[k].onclick =function(){
			for (var i=0;i<BtnLi.length; i++ ){
				BtnLi[i].className = '';
			}
			for (var j=0;j<num; j++ ){
				ListLi[j].style.transition='0.8s '+j*50+'ms';
				ListLi[j].style.WebkitTransform ='rotateX('+90*this.index+'deg)'
			}
			this.className = 'active';
		}
	}
</script>