今天完成老师布置的作业，图片切换；
听到老师讲课里面提到了，转义字符，这里就找到了一部分且拿来用再说：
如HTML转义符、java 转义符、xml 转义符、 oracle 转义符、sql 转义符 、sqlserver 转义符、php 转义符、asp 转义符、vb转义符、 javascript 转义符等等，还有网址中的百分号。
例如，HTML的< >&"©分别是<，>，&，"，©;的转义字符
XML只有5个转义符: < >& " '
自己敲代码的时候发现哪怕是错了一个中英文的标点符号，JS都没法执行下去，所以拼写和检查时候要特别注意；另外chrome的控制台特别好用，可以用console.log();来做调试；
“Unexpected token ILLEGAL” 提示这段代码的时候，可能就是标点符号的错误；
1 <style>
2 div, input, p{ margin: 0; padding: 0;}
3 #pic { width: 400px; height: 400px; border: 10px solid #eee; margin: 40px auto 0; position: relative; background: #666;}
4 #pic a { width: 40px; height: 40px; border: 5px solid #fff; background: #fff; position: absolute; top: 175px; text-align: center; line-height: 40px; text-decoration: none; color: #666; font-size: 30px; filter:alpha(opacity:40); opacity: 0.4;}
5 #pic a:hover {filter:alpha(opacity:90); opacity: 0.9; }
6 #prev{ left: 10px;}
7 #next{ right: 10px;}
8 #ttl{ position: absolute; bottom: 0; left: 0; width: 400px; height: 30px; line-height: 30px; background: #333; color: #fff; text-align: center; filter:alpha(opacity:70); opacity: 0.7;}
9 #page{ position: absolute; top:0; left:0; width: 400px; height: 30px; line-height: 30px; background: #333; color: #fff; text-align: center; filter:alpha(opacity:70); opacity: 0.7;} /*这里公用的可以考虑公用样式 */
10 #img1 { width: 400px; height: 400px;}
11
12 </style>
13 <script type="text/javascript">
14 window.onload = function(){
15 var oPrev = document.getElementById("prev");
16 var oNext = document.getElementById(‘next‘);
17 var oPage = document.getElementById(‘page‘);
18 var oTtl = document.getElementById(‘ttl‘);
19 var oImg = document.getElementById(‘img1‘);
20
21 var arrText = [‘文字一‘,‘文字二‘,‘文字三‘,‘文字四‘];
22 var arrUrl = [‘img/1.jpg‘,‘img/2.jpg‘,‘img/3.jpg‘,‘img/4.jpg‘];
23 var num = 0; //有数组的地方，可以考虑准备一个数字来使用；
24
25 // 初始化;
26 function fnTab(){
27 oPage.innerHTML = num +1 +‘/‘+ arrUrl.length;
28 oImg.src = arrUrl[num];
29 oTtl.innerHTML = arrText[num];
30 }
31
32 fnTab(); // 重复的东西用函数；因为函数本身不会执行，所以这里要调用一下；
33 oPrev.onclick = function(){
34 num --;
35 if (num == -1) {
36
37 num = arrText.length-1;
38 };
39 fnTab();
40 };
41
42 oNext.onclick = function(){
43 num ++;
44 if (num == arrText.length) {
45
46 num = 0;
47 };
48 fnTab();
49 }
50 }
51 </script>
52 </head>
53
54 <body>
55 <div id="pic">
56 <a href="javascript:;" id="prev"><</a>
57 <a href="javascript:;" id="next">></a>
58 <p id="ttl">文字正在加载中...</p>
59 <p id="page">数量正在计算中...</p>
60 <img id="img1">
61 </div>
这里面有一个很重要的思路就是：重复利用到一段代码的时候，就要想到使用函数；
时间： 2024-12-26 17:26:03