1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <script>
9 // 用for循环和switch循环,判断7月份周一至周日各有几天,并输出
10 var week=[0,0,0,0,0,0,0];
11 for(var i=1;i<=31;i++){
12 switch(i%7){
13 case 0:
14 week[i%7+6]++;
15 break;
16 case 1:
17 week[i%7-1]++;
18 break;
19 case 2:
20 week[i%7-1]++;
21 break;
22 case 3:
23 week[i%7-1]++;
24 break;
25 case 4:
26 week[i%7-1]++;
27 break;
28 case 5:
29 week[i%7-1]++;
30 break;
31 case 6:
32 week[i%7-1]++;
33 break;
34 default:
35 break;
36 }
37 }
38 // console.log(week[6]);
39 for(var j=0;j<week.length;j++){
40 console.log("周"+(j+1)+"共有"+week[j]+"天");
41 }
42 </script>
43 </body>
44 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0px;
9 padding: 0px;
10 }
11 #show{
12 width: 500px;
13 overflow: hidden;
14 margin:200px auto;
15 /*border: 3px solid black;*/
16 position: relative;
17 }
18 div ul{
19 list-style: none;
20 width: 3000px;
21 overflow: hidden;
22 }
23 div ul li{
24 float:left;
25 }
26 div span{
27 position: absolute;
28 width:40px;
29 height: 40px;
30 background: rgba(0,0,0,0.5);
31 top:50%;
32 margin-top: -20px;
33 font-size:30px;
34 text-align: center;
35 line-height: 37px;
36 color: white;
37 cursor: pointer;
38 }
39 div #btn_left{
40 left: -10px;
41 border-radius: 0px 20px 20px 0px ;
42 }
43 div #btn_right{
44 right:-10px;
45 border-radius: 20px 0px 0px 20px ;
46 }
47 #ol1{
48 list-style: none;
49 overflow: hidden;
50 background: #ccc;
51 height: 20px;
52 width: 88px;
53 border-radius: 10px;
54 position: absolute;
55 left:50%;
56 margin-left: -44px;
57 bottom: 30px;
58 }
59 #ol1 li{
60 float:left;
61 width: 10px;
62 height: 10px;
63 background: white;
64 border-radius: 50%;
65 margin-right:7px;
66 margin-top: 5px;
67 cursor: pointer;
68 }
69 #ol1 li:nth-of-type(5){
70 margin-right: 0px;
71 }
72 #ol1 li:nth-of-type(1){
73 margin-left: 5px;
74 background: #f60;
75 }
76 </style>
77 </head>
78 <body>
79 <div id="show">
80 <ul id="ul1">
81 <li><img src="img/bg01.jpg" alt="" width="500px"/></li>
82 <li><img src="img/bg02.jpg" alt="" width="500px"/></li>
83 <li><img src="img/bg03.jpg" alt="" width="500px"/></li>
84 <li><img src="img/bg04.jpg" alt="" width="500px"/></li>
85 <li><img src="img/bg05.jpg" alt="" width="500px"/></li>
86 </ul>
87 <span id="btn_left"> < </span>
88 <span id="btn_right"> > </span>
89 <ol id="ol1">
90 <li></li>
91 <li></li>
92 <li></li>
93 <li></li>
94 <li></li>
95 </ol>
96 </div>
97 <script>
98 var ul1=document.getElementById('ul1');
99 var show=document.getElementById('show');
100 var btn_l=document.getElementById('btn_left');
101 var btn_r=document.getElementById('btn_right');
102 // document.getElementsByTagName('li');
103 var ol1=document.getElementById('ol1').children;
104 // 运用.children获取下来的标签,也是一个数组 使用时必须要带下标
105 var i=0;
106 var timer;
107 timer=setInterval(function(){
108 for(var g=0;g<ol1.length;g++){
109 ol1[g].style.background='white';
110 }
111 i++;
112 // ul1.style.transition='all 1s';
113 if(i==5){
114 i=0;
115 ul1.style.transition='none';
116 }
117 ul1.style.marginLeft=-500*i+"px";
118 ol1[i].style.background='#f60';
119 // ul1.style.marginLeft=-i+"px";
120 },1000);
121 show.onmouseover=function(){
122 clearInterval(timer);
123 }
124 show.onmouseout=function(){
125 clearInterval(timer);
126 timer=setInterval(function(){
127 for(var g=0;g<ol1.length;g++){
128 ol1[g].style.background='white';
129 }
130 i++;
131 if(i==5){
132 i=0;
133 ul1.style.transition='none';
134 }
135 ul1.style.marginLeft=-500*i+"px";
136 ol1[i].style.background='#f60';
137 },1000);
138 }
139 btn_l.onclick=function(){
140 i--;
141 if(i==-1){
142 i=4;
143 }
144 ul1.style.marginLeft=-500*i+"px";
145 }
146 btn_right.onclick=function(){
147 i++;
148 if(i==5){
149 i=0;
150 }
151 ul1.style.marginLeft=-500*i+"px";
152 }
153 for(var j=0;j<ol1.length;j++){
154 // 1,先给所有的li标签设置下标值 setAttribute方法
155 // 2,点击之后,获取当前点击中的li标签的index值
156 // 3,把获取到的index值,用于ul1
157 // this:当前操作的对象
158 ol1[j].setAttribute('index',j);
159 ol1[j].onclick=function(){
160 var index=this.getAttribute('index');
161 i=index;
162 console.log(index);
163 for(var k=0;k<ol1.length;k++){
164 ol1[k].style.background='white';
165 }
166 this.style.background='#f60';
167 ul1.style.marginLeft=-500*index+"px";
168 }
169 }
170 </script>
171 </body>
172 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 *{
8 padding: 0px;
9 margin: 0px;
10 }
11 #show{
12 width: 250px;
13 margin: 200px auto;
14 overflow: hidden;
15 position: relative;
16 }
17 #pic{
18 width: 2000px;
19 list-style: none;
20 overflow: hidden;
21 transition: all 1s;
22 }
23 #show #pic li{
24 float: left;
25 }
26 #show span{
27 width: 36px;
28 height: 36px;
29 position: absolute;
30 top: 50%;
31 margin-top: -18px;
32 font-size: 28px;
33 color: white;
34 text-align: center;
35 line-height: 36px;
36 background: rgba(0,0,0,0.5);
37 cursor: pointer;
38 }
39 #show #btn_left{
40 left: -8px;
41 border-radius:0px 18px 18px 0px ;
42 }
43 #show #btn_right{
44 right: -8px;
45 border-radius:18px 0px 0px 18px ;
46 }
47 #show ol{
48 list-style: none;
49 position: absolute;
50 text-align: center;
51 font-size: 0px;
52 bottom: 13px;
53 margin-left: -30px;
54 left: 50%;
55 border-radius: 10px;
56 background: rgba(255,255,255,.3);
57 }
58 #show ol li{
59 display: inline-block;
60 margin: 3px;
61 border-radius: 50%;
62 width: 8px;
63 height: 8px;
64 color: #3C3C3C;
65 cursor: pointer;
66 background: #FFFFFF;
67 }
68 #show #ol1 li:nth-of-type(1){
69 background: #f60;
70 }
71 </style>
72 </head>
73 <body>
74 <div id="show">
75 <ul id="pic">
76 <li><img src="images/pic25.jpg"/></li>
77 <li><img src="images/pic24.jpg"/></li>
78 <li><img src="images/pic23.jpg"/></li>
79 <li><img src="images/pic22.jpg"/></li>
80 <li><img src="images/pic21.jpg"/></li>
81 </ul>
82 <span id="btn_left">
83 <
84 </span>
85 <span id="btn_right">
86 >
87 </span>
88 <ol id="ol1">
89 <li></li>
90 <li></li>
91 <li></li>
92 <li></li>
93 <li></li>
94 </ol>
95 </div>
96 <script type="text/javascript">
97 var ul=document.getElementById('pic');
98 var show=document.getElementById('show');
99 var le=document.getElementById('btn_left');
100 var ri=document.getElementById('btn_right');
101 var ol=document.getElementById('ol1').children;
102 var i=0;
103 var timer;
104 timer=setInterval(function(){
105 for(var q=0;q<ol.length;q++){
106 ol[q].style.background='#FFFFFF';
107 }
108 i++;
109 ul.style.transition='all 1s';
110 if(i==5){
111 ul.style.transition='none';
112 i=0;
113 }
114 ul.style.marginLeft=-250*i+"px";
115 ol[i].style.background='#FF6600';
116 },1000);
117 show.onmouseover=function(){
118 clearInterval(timer);
119 }
120 show.onmouseout=function(){
121 clearInterval(timer);
122 timer=setInterval(function(){
123 for(var q=0;q<ol.length;q++){
124 ol[q].style.background='#FFFFFF';
125 }
126 i++;
127 ul.style.transition='all 1s';
128 if(i==5){
129 ul.style.transition='none';
130 i=0;
131 }
132 ul.style.marginLeft=-250*i+"px";
133 ol[i].style.background='#FF6600';
134 },1000);
135 }
136 le.onclick=function(){
137 i--;
138 console.log(i);
139 if(i<0){
140 i=4;
141 }
142 for(var g=0;g<ol.length;g++){
143 ol[g].style.background='#FFFFFF';
144 }
145 ol[i].style.background='#FF6600';
146 ul.style.marginLeft=-250*i+"px";
147 }
148 ri.onclick=function(){
149 i++;
150 if(i==4){
151 i=0;
152 }
153 for(var n=0;n<ol.length;n++){
154 ol[n].style.background='#FFFFFF';
155 }
156 ol[i].style.background='#FF6600';
157 ul.style.marginLeft=-250*i+"px";
158 }
159 for(var d=0;d<ol.length;d++){
160 ol[d].setAttribute('index',d);
161
162 ol[d].onclick=function(){
163 var index=this.getAttribute('index');
164 i=index;
165 for(var j=0;j<ol.length;j++){
166 ol[j].style.background='#FFFFFF';
167 }
168 this.style.background='#FF6600';
169 ul.style.marginLeft=-250*index+"px";
170 }
171 }
172 </script>
173 </body>
174 </html>
chendemo轮播图