1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 ._div
8 {
9 width: 730px;
10 height: 454px;
11 position: relative;
12 }
13 ._div_ul
14 {
15 width: 730px;
16 height: 454px;
17 list-style: none;
18 }
19 ._div_ul li
20 {
21 position: absolute;
22 left: 0px;
23 top: 0px;
24 width: 730px;
25 height: 454px;
26 position: absolute;
27 display: none;
28
29 }
30 ._div_ul li img
31 {
32 width: 730px;
33 height: 454px;
34 float: left;
35 opacity: 1;
36 filter: alpha(opacity=100);
37
38 }
39 ._div_ol
40 {
41 position: absolute;
42 bottom: 5px;
43 left: 280px;
44 list-style: none;
45 z-index: 5;
46 }
47 ._div_ol:after
48 {
49 content: "";
50 clear: both;
51 display: block;
52 }
53 ._div_ol li
54 {
55 width: 18px;
56 height: 18px;
57 border-radius: 50%;
58 float: left;
59 background: #3e3e3e;
60 text-align: center;
61 line-height: 18px;
62 color: #fff;
63 margin-left: 2px;
64 margin-right: 2px;
65 cursor: pointer;
66 }
67 ._div_ol ._div_ol_l1
68 {
69 background: #b61b1f;
70 }
71 ._div_p1
72 {
73 left: 0px;
74 }
75 ._div p
76 {
77 width: 28px;
78 height: 62px;
79 position: absolute;
80 top: 196px;
81 line-height: 62px;
82 text-align: center;
83 background: rgba(0,0,0,.2);
84 color: #fff;
85 cursor: pointer;
86 font-size: 25px;
87 z-index: 12;
88 }
89 ._div_p2
90 {
91 right: 0px;
92 }
93 ._div_ul .aa
94 {
95 display: block;
96 }
97 </style>
98 </head>
99 <body>
100 <div class="_div">
101 <ul class="_div_ul">
102 <li class="aa"><img src="images/da1.jpg" alt=""></li>
103 <li><img src="images/da2.jpg" alt=""></li>
104 <li><img src="images/da3.jpg" alt=""></li>
105 <li><img src="images/da4.jpg" alt=""></li>
106 <li><img src="images/da5.jpg" alt=""></li>
107 <li><img src="images/da6.jpg" alt=""></li>
108 </ul>
109 <ol class="_div_ol">
110 <li class="_div_ol_l1">1</li>
111 <li>2</li>
112 <li>3</li>
113 <li>4</li>
114 <li>5</li>
115 <li>6</li>
116 </ol>
117 <p class="_div_p1"><</p>
118 <p class="_div_p2">></p>
119 </div>
120
121 <script src="jquery-1.8.3.min.js"></script>
122 <script src="jquery.easing.min.js"></script>
123 <script>
124 $(function() {
125 var x=0;
126 var time1=null,time2=null;
127 function move() {//淡入淡出函数
128 $('._div_ul li').eq(x).css('zIndex','1').fadeIn(500,'swing',function() {
129 $('._div_ul li').eq(x).siblings().fadeOut(500,'swing');
130 }).siblings().css('zIndex','0');
131 $('._div_ol li').eq(x).addClass('_div_ol_l1').siblings().removeClass('_div_ol_l1');
132 };
133 function autogo() {//自动走函数
134 clearInterval(time1);
135 time1=setInterval(function(){
136 x++;
137 if (x>=$('._div_ul img').length) {
138 x=0;
139 };
140 move();
141 },1000)
142 };
143 //进入页面自动走
144 autogo();
145 //点击右键
146 $('._div_p2').click(function() {
147 clearInterval(time1);
148 x++;
149 if (x>=$('._div_ul li').length) {
150 x=0;
151 };
152 move();
153 autogo();
154 })
155 //点击左键
156 $('._div_p1').click(function() {
157 clearInterval(time1);
158 x--;
159 if (x<0) {
160 x=$('._div_ul li').length-1;
161 };
162 move();
163 autogo();
164 })
165 //点击下标
166 $('._div_ol li').click(function() {
167 clearInterval(time1);
168 x=$(this).index('._div_ol li');
169 move();
170 autogo();
171 })
172 })
173 </script>
174 </body>
175 </html>
