1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <style type="text/css">
6
7 *{
8 margin: 0px;
9 padding: 0px;
10 color:#333;
11 }
12 .slide-box{
13 width:600px;
14 height:300px;
15 position: relative;
16 overflow:hidden;
17 }
18 .image-box{
19 width:99999px;
20 position:absolute;
21 }
22 .image-box li{
23 display:block;
24 width:600px;
25 height:300px;
26 float:left;
27 background: #9cc;
28 position:relative;
29 }
30 .image-box li p{
31 width:100%;
32 height:40px;
33 padding:0 10px;
34 line-height:40px;
35 position:absolute;
36 bottom:0px;
37 color:#fff;
38 background:rgba(0,0,0,.4);
39 filter:alpha(opacity=50);
40 }
41 .slide-box .tip{
42 position:absolute;
43 right:20px;
44 bottom:10px;
45 z-index:999;
46 }
47 .slide-box .tip li{
48 display:block;
49 width:20px;
50 width:20px;
51 line-height:20px;
52 float: left;
53 margin-left:10px;
54 background:rgba(0,0,0,.4);
55 filter:alpha(opacity=50);
56 text-align:center;
57 border-radius: 20px;
58 }
59 .slide-box span{
60 color:#fff;
61 cursor:pointer;
62 }
63 .slide-box .tip .active{
64 background:#f60;
65 }
66
67 </style>
68 <script type="text/javascript" src="../jsunit/app/jsUnitCore.js"></script>
69 <script type="text/javascript" src="./js/jquery.js"></script>
70 <script type="text/javascript">
71 //封装成的方法
72 function slideShow($obj){
73 var $imageBox = $obj.find(".image-box");
74 var $imageTip = $obj.find(".tip");
75 var boxWidth = $obj.find('.image-box').width();
76 var itemWith = $obj.find('.image-box li').width();
77 var itemCount = $obj.find('.image-box li').length;
78 var index = 0;
79
80 //自动切换方法
81 function autoMove(){
82 if(!$imageBox.is(':animated')){
83 if(index == (itemCount-1)){
84 index = 0;
85 $imageBox.stop().animate({left:0},changeStatus());
86 }else{
87 index ++;
88 $imageBox.stop().animate({left:'-='+itemWith},changeStatus());
89 }
90 }
91 }
92
93 //状态切换
94 function changeStatus(){
95 $imageTip.children().eq(index).addClass('active').siblings().removeClass('active');
96 }
97
98 //点击切换
99 $('.slide-box .tip span').click(function(){
100 index = parseInt($(this).html()) -1;
101 $imageBox.stop().animate({left:-index*itemWith},changeStatus());
102 })
103 //开启自动切换
104 setInterval(autoMove,5000);
105 }
106 $(function(){
107 slideShow($('.slide-box'));
108 })
109 </script>
110 </head>
111 <body>
112 <div class="slide-wrap">
113 <div class="slide-box">
114 <ul class="image-box">
115 <li><a href="javascript:"><img src="./images/1.jpg" alt="" /><p>nihsoa</p></a></li>
116 <li><a href="#"><img src="./images/2.jpg" alt="" /><p>nihsoa</p></a></li>
117 <li><a href="#"><img src="./images/3.jpg" alt="" /><p>nihsoa</p></a></li>
118 <li><a href="#"><img src="./images/4.jpg" alt="" /><p>nihsoa</p></a></li>
119 <li><a href="#"><img src="./images/1.jpg" alt="" /><p>nihsoa</p></a></li>
120 </ul>
121 <ul class="tip">
122 <li class="active"><span>1</span></li>
123 <li><span>2</span></li>
124 <li><span>3</span></li>
125 <li><span>4</span></li>
126 <li><span>5</span></li>
127 </ul>
128 </div>
129 </div>
130 </body>
131 </html>
