css jquery 实现轮播效果

浏览数：48 / 时间：2015年06月09日

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Css3 Images Fade & Slider</title>
 6 <style type="text/css">
 7 body{background:#f8f8f8; margin:0;}
 8 img{border:0; vertical-align:middle;}
 9 .focus{width:800px; margin:0 auto; position:relative; overflow:hidden;}
10 .images{height:350px; overflow:hidden; position:relative;}
11 .images .item{position:absolute; top:0; left:0; height:350px; overflow:hidden; opacity:0; transition:opacity 0.8s linear; -webkit-transition:opacity 0.8s linear;}
12 .images .item img{width:800px;}
13 .images .active{opacity:1;}
14 .control{position:absolute; bottom:10px; width:100%; text-align:center;}
15 .control span{display:inline-block; cursor:pointer; background:#5fbab1; color:#fff; width:25px; height:25px; text-align:center; line-height:25px; border-radius:25px; margin:0 8px;}
16 .control span.active{background:#e77918;}
17 .title{position:absolute; left:0; top:30%; width:100%;} 
18 .title p{position:absolute; left:0; top:0; background:#000; background:rgba(0,0,0,0.8); color:#fff; padding:20px 0; margin:0; text-indent:10px; width:300px; opacity:0; transform:translateX(-300px); -webkit-transform:translateX(-300px); transition:all 0.8s ease-out; -webkit-transition:all 0.8s ease-out;}
19 .title p.active{opacity:1; transform:translateX(0); -webkit-transform:translateX(0);}
20 </style>
21 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
22 <script>
23 $(function(){
24     $(‘.images .item:first, .control span:first, .title p:first‘).addClass(‘active‘);
25     var index = 0,
26         len = $(‘.images .item‘).length;
27         autoPlay = function(){
28             $(‘.images .item‘).eq(index++).addClass(‘active‘).siblings(‘.item‘).removeClass(‘active‘);
29             $(‘.title p‘).eq(index-1).addClass(‘active‘).siblings(‘p‘).removeClass(‘active‘);
30             $(‘.control span‘).eq(index-1).addClass(‘active‘).siblings(‘span‘).removeClass(‘active‘);
31             if(index == len){index = 0;}
32         },
33         loop = setInterval(autoPlay,3000);
34     $(‘.control span‘).hover(function(){
35         index = $(this).index();
36         autoPlay();
37         clearInterval(loop);
38     },function(){
39         loop = setInterval(autoPlay,3000);
40     })
41 })
42 </script>
43 </head>
44 
45 <body>
46 <div class="focus">
47     <div class="images">
48         <div class="item"><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1041/images/banner_01.jpg" /></div>
49         <div class="item"><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1041/images/banner_02.jpg" /></div>
50         <div class="item"><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1041/images/banner_03.jpg" /></div>
51     </div>
52     <div class="title">
53         <p>不变的安全才是最可靠的安全。</p>
54         <p>清新的绿色源自身边的绿色。</p>
55         <p>服务于生活的科技才是最高端的科技。</p>
56     </div>
57     <div class="control">
58         <span>1</span>
59         <span>2</span>
60         <span>3</span>
61     </div>
62 </div>
63 </body>
64 </html>