最简单的图片切换效果

小马过河的故事: 只有自己去尝试了,才会弄清它的深浅...

我写的这个其实很简单,可是花费了我好长时间,我之前没有写过太多的js,都是在网上直接复制人家的,之前我自认为自己写不出来,可是当我真正的去尝试后(虽然花费的时间有点长),最后才发现 原来不像我想象中的那么复杂、、、

 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 <style type="text/css">
7 body, div { margin: 0; paading: 0; font-size: 12px; }
8 ul, li { margin: 0; padding: 0; list-style: none; }
9
10 .box { position: relative; width: 960px; margin: 0 auto; padding-top: 15px; }
11 .list { overflow: hidden; position: relative; width: 250px; height: 320px; }
12 .list li img{ position: absolute; left: 0; top: 0; }
13 .list li { display: none; }
14 .list .over { display: block;}
15 .btn { position: absolute; bottom: 0; width: 250px; height: 26px; background: #000; line-height: 26px; opacity: 0.8; filter: alpha(opacity=80); text-align: right; }
16 .btn span { padding: 2px 5px; margin: 0 2px; border: 1px solid #fff; border-radius: 2px; background: #000; color: #fff; text-decoration: none; cursor: pointer; }
17 .btn .over { background: #f00; }
18 </style>
19
20 <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
21 <script type="text/javascript">
22 $(document).ready(function() {
23 var liarr = $(".list li");
24 var aarr = $(".btn span");
25 var count = 0;
26
27 for(var i = 0; i < aarr.length; i++) {
28 $(aarr[i]).click ( function() {
29 if($(this).attr("class") == "over") {
30 return;
31 }
32 start(this);
33 });
34 }
35
36 function start(obj) {
37 $("span[class='over']").removeAttr("class");
38 $("li[class='over']").removeAttr("class");
39 $(obj).addClass("over");
40 count = $(obj).text()- 1 ;
41 $(liarr[count]).addClass("over");
42 }
43 });
44 </script>
45 </head>
46
47 <body>
48
49 <div class="box" id="box">
50
51 <ul class="list">
52 <li class="over"><img src="images/1.jpg" /></li>
53 <li><img src="images/2.jpg" /></li>
54 <li><img src="images/3.jpg" /></li>
55 <li><img src="images/4.jpg" /></li>
56 </ul>
57 <div class="btn" id="btn">
58 <span class="over">1</span><span>2</span><span>3</span><span>4</span>
59 </div>
60
61 </div>
62
63 </body>
64 </html>

你可能感兴趣的:(图片)