用JQ实现的一个简单轮播 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>lbt</title>
 6 <style type="text/css">
 7 *{
 8     margin: 0;
 9     padding: 0;
10 }
11 #main_wnd #ctrl #nav{
12     list-style-type: none;
13 }
14 #main_wnd{
15     width: 506px;
16     height: 500px;
17     border: solid 1px red;
18     position: absolute;
19 }
20 
21 #main_wnd #content div{
22     width: 500px;
23     height: 500px;
24     position: absolute;
25 }
26 #main_wnd #ctrl{
27     margin-top: 500px;
28 }
29 #main_wnd #ctrl li{
30     float: left;
31     width: 100px;
32     height: 30px;
33     text-align: center;
34     border-top: 1px solid #ccc;
35     border-right: 1px solid #ccc;
36     border-bottom: 1px solid #ccc;
37 }
38 </style>
39 </head>
40 <body>
41     <div id="main_wnd">
42         <div id="content">
43             <div>第一个</div>
44             <div>第二个</div>
45             <div>第三个</div>
46             <div>第四个</div>
47             <div>第五个</div>
48         </div>
49         <div id="ctrl">
50             <ul id="nav">
51                 <li>一</li>
52                 <li>二</li>
53                 <li>三</li>
54                 <li>四</li>
55                 <li>五</li>
56             </ul>
57         </div>
58     </div>
59 
60 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
61 <script type="text/javascript">
62 
63 //将第一个li左边的border加上
64 $('#main_wnd #ctrl #nav li:first').css('border-left','1px solid #ccc');
65 //隐藏除了第一个的照片
66 $('#main_wnd #content div:not(:first)').css('display','none');
67 var bq = $('#main_wnd #ctrl #nav li');
68 var content = $('#main_wnd #content div');
69 
70 //模仿鼠标悬浮在第一个li的情景
71 bq[0].style.borderTop = '1px solid #fff';
72 
73 
74 var i = 0;
75 //计时轮播
76 setInterval(function(){
77 $('#main_wnd #ctrl #nav li').css('border-top','1px solid #ccc');
78 bq[i].style.borderTop = '1px solid #fff';
79 content.css('display','none');
80 content[i].style.display = 'block';
81 i++;
82 if (i==5) {i=0;}
83 },2000)
84 
85 //鼠标悬浮轮播
86 $('#main_wnd #ctrl #nav').mouseover(function(){
87 clearInterval();
88 var tg = event.target;
89 var idx = $(tg).index();
90 $('#main_wnd #ctrl #nav li').css('border-top','1px solid #ccc');
91 tg.style.borderTop = '1px solid #fff';
92 content.css('display','none');
93 content[idx].style.display = 'block';
94 });
95 </script>
96 
97 </body>
98 </html>

 

posted @ 2018-08-31 11:04  从阴影中现身  阅读(310)  评论(0)    收藏  举报