首页 > 代码库 > css jquery 实现轮播效果
css jquery 实现轮播效果
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>
css jquery 实现轮播效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。