好久没打网页程序了，标签和css 之类都忘的跟空白一样，花几天时间把丢掉的东西给捡起来。
附上 html+css+js 代码
html：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>轮播图片</title> 6 <link href="css/css.css" rel="stylesheet" type="text/css" /> 7 <script src="js/js.js" type="text/javascript"></script> 8 </head> 9 10 <body> 11 <div id="container"> 12 <div id="list" style="left: -600px;"> 13 <img src="images/5.jpg" alt="1"/> 14 <img src="images/1.jpg" alt="1"/> 15 <img src="images/2.jpg" alt="2"/> 16 <img src="images/3.jpg" alt="3"/> 17 <img src="images/4.jpg" alt="4"/> 18 <img src="images/5.jpg" alt="5"/> 19 <img src="images/1.jpg" alt="5"/> 20 </div> 21 <div id="buttons"> 22 <span index ="1" class="on"></span> 23 <span index ="2"></span> 24 <span index ="3"></span> 25 <span index ="4"></span> 26 <span index ="5"></span> 27 </div> 28 <a href="javascript:;" id ="prev" class="arrow"><</a> 29 <a href="javascript:;" id ="next" class="arrow">></a> 30 </div> 31 </body> 32 </html>
CSS：
1 /* CSS Document */
2 /*
3 图片轮播效果
4 */
5 *{ margin:0; padding:0; text-decoration:none;}
6 body{ padding:20px;}
7
8 #container{ width:800px; height:400px; /*border: 0px solid #333;*/ overflow:hidden; position:relative;}
9 #list{ width:5600px; height:400px; position:absolute; z-index: 1;}
10 #list img{ float: left; width:800px; height:400px;}
11 #buttons { position:absolute; height:10px; width:100px; z-index: 2; bottom: 20px; left:250px;}
12 #buttons span{ cursor:pointer; float:left; border: 1px solid #FFF; width:10px ; height:10px; border-radius: 50% ; background:#333; margin-right: 5px;}
13 #buttons .on{ background:orangered;}
14 .arrow { cursor:pointer ; display:none; line-height: 39px; text-align:center; font-size:36px; font-weight:bold; width:40px; height:40px; position:absolute; z-index: 2; top:180px; background-color:#CCC; color:#fff;}
15 .arrow:hover { background-color:#F90;}
16 #container:hover .arrow{ display: block;}
17 #prev{ left: 20px;}
18 #next{ right: 20px; }
JS:
1 // JavaScript Document
2
3 window.onload = function(){
4 var container = document.getElementById(‘container‘);
5 var list = document.getElementById(‘list‘);
6 var buttons = document.getElementById(‘buttons‘).getElementsByTagName(‘span‘);
7 var prev = document.getElementById(‘prev‘);
8 var next = document.getElementById(‘next‘);
9 var index = 1; /*控制圆点*/
10 var animated = false; /*控制动画*/
11 var timer;
12
13 /*显示按钮*/
14 function showButton(){
15 for(var i = 0; i < buttons.length; i++){
16 if(buttons[i].className == ‘on‘){
17 buttons[i].className = ‘‘;
18 break;
19 }
20 }
21 buttons[index -1].className = ‘on‘;
22 }
23 /*实现轮播*/
24 function animate(offset){
25 animated = true; /*开始动画*/
26 var newLeft = parseInt(list.style.left) + offset;
27 var time = 700; /*位移总时间*/
28 var interval = 10; /*位移间隔时间*/
29 var speed = offset/(time / interval); /*每次位移量*/
30
31 function go(){
32 if((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)){
33 list.style.left = parseInt(list.style.left) + speed + ‘px‘;
34 setTimeout(go, interval); /*定时器*/
35 }else{
36 animated = false; /*停止动画*/
37
38 list.style.left = newLeft + ‘px‘;
39 /*实现无限轮播*/
40 if(newLeft > -800)
41 {
42 list.style.left = -4000 + ‘px‘;
43 }
44 if(newLeft < -4000)
45 {
46 list.style.left = -800 + ‘px‘;
47 }
48 }
49 }
50 go(); /*调用自身实现*/
51 }
52 /*自动播放*/
53 function play(){
54 timer = setInterval(function(){
55 next.onclick();
56 },3000); /*3000相当于3秒*/
57
58 }
59 /*停止自动播放*/
60 function stop(){
61 clearInterval(timer);
62 }
63 /*鼠标在图外触发自动播放*/
64 container.onmouseout = play;
65 /*鼠标在图外触发停止播放*/
66 container.onmouseover = stop;
67 /**/
68 play();
69
70
71 next.onclick = function(){
72 if(index == 5)
73 {
74 index = 1;
75 }
76 else {
77 index += 1;
78 }
79 showButton();
80 if(!animated)
81 {
82 animate(800);
83 }
84 }
85 prev.onclick = function()
86 {
87 if(index == 1)
88 {
89 index = 5;
90 }
91 else{
92 index -= 1;
93 }
94 showButton();
95 if(!animated)
96 {
97 animate(-800);
98 }
99 }
100
101 /*图片随圆点移动*/
102 for(var i = 0; i < buttons.length; i++)
103 {
104 buttons[i].onclick = function(){
105 if(this.className == ‘on‘)
106 {
107 return;
108 }
109 var newIndex = parseInt(this.getAttribute(‘index‘));
110 var offset = -800 * (newIndex - index);
111 animate(offset);
112 index = newIndex;
113 showButton();
114 }
115 }
116 }
心情低沉，只因有放不下的东西。感觉很累很累--
时间： 2024-10-10 00:50:37