1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 ul li {
12 list-style: none;
13 }
14 a{
15 text-decoration: none;
16 }
17 #banner{
18 width: 100%;
19 height: 300px;
20 overflow: hidden;
21 background: rgb(40, 40, 40 , .4);
22 }
23 #center{
24 width: 760px;
25 height: 300px;
26 margin: 0 auto;
27 position: relative;
28 }
29 #center ul {
30 width: 760px;
31 height: 300px;
32 }
33 #center ul li{
34 width: 760px;
35 height: 300px;
36 }
37 #center ul li a img{
38 width: 100%;
39 height: 100%;
40 display: block;
41 }
42 #center .btn{
43 display: none;
44 position: absolute;
45 width: 46px;
46 height: 70px;
47 top: 110px;
48 font-size: 30px;
49 color: #fff;
50 text-align: center;
51 line-height: 70px;
52 background: rgba( 0 , 0 , 0 , .4 );
53 font-weight: 600;
54 }
55 #center .btn:hover{
56 background: rgba( 0 , 0 , 0 , .8 );
57 }
58 #center .left{
59 left: 15px;
60 }
61 #center .right{
62 right: 15px;
63 }
64 #list{
65 width: 88px;
66 position: absolute;
67 bottom: 15px;
68 left: 50%;
69 margin-left: -44px;
70 background: rgba(0,0,0,.4);
71 border-radius: 20px;
72 padding: 2px 10px;
73 }
74 #list span{
75 display: inline-block;
76 width: 9px;
77 height: 9px;
78 border-radius: 50%;
79 border: 1px solid #fff;
80 cursor: pointer;
81 }
82 #list span.active{
83 background: #fff;
84 }
85
86 </style>
87 </head>
88 <body>
89 <div id="banner">
90 <div id="center">
91 <ul>
92 <li><a href="javascript:;"><img src="img/1.jpg"/></a></li>
93 <li><a href="javascript:;"><img src="img/2.jpg"/></a></li>
94 <li><a href="javascript:;"><img src="img/3.jpg"/></a></li>
95 <li><a href="javascript:;"><img src="img/4.jpg"/></a></li>
96 <li><a href="javascript:;"><img src="img/5.jpg"/></a></li>
97 </ul>
98 <a href="javascript:;" class="btn left"><</a>
99 <a href="javascript:;" class="btn right">></a>
100 <div id="list">
101 <span class="active"></span>
102 <span></span>
103 <span></span>
104 <span></span>
105 <span></span>
106 </div>
107 </div>
108 </div>
109 <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
110 <script type="text/javascript">
111 var $banner = $('#banner');
112 var $span = $('#list span');
113 var $li = $('#center ul li');
114 var $btn = $('#center .btn');
115 var $right = $('#center .right');
116 var $left = $('#center .left');
117 var timer = null;
118 var $index = 0;
119 $banner.hover(function(){
120 $btn.fadeIn( 500 );
121 clearInterval(timer);
122 },function(){
123 $btn.fadeOut( 500 );
124 timer = setInterval(rightC,2000);
125 })
126 $right.click(function(){
127 rightC();
128 })
129 $left.click(function(){
130 leftC();
131 });
132
133 timer = setInterval(rightC,2000);
134 $span.mouseover(function(){
135 $index = $(this).index();
136 change();
137 })
138 function rightC(){
139 $index ++;
140 if($index>$span.size()-1){
141 $index = 0;
142 }
143 change();
144 }
145 function leftC(){
146 $index --;
147 if($index<0){
148 $index = $span.size()-1;
149 }
150 change();
151 }
152 function change(){
153 $span.eq($index).addClass('active').siblings().removeClass('active');
154 $li.eq($index).stop().fadeIn(500).siblings().stop().fadeOut(500);
155 }
156 </script>
157 </body>
158 </html>
