你的位置:首页 > Java教程

[Java教程]轮播图代码


一、要点:

        1.页面加载时,图片重合,叠在一起[绝对定位];

        2.第一张显示,其它隐藏;

        3.设置下标,给下标设置颜色让它随图片移动;

        4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播;

 

二、实现代码:

     html代码:

 1 <!DOCTYPE html> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5   <title>轮播图</title> 6   <link href="css/LunBimg.css" rel="stylesheet" /> 7   <script src="js/jquery-1.10.2.min.js"></script> 8   <script src="js/LunBimg.js"></script> 9 </head>10 <body>11   <div id="allswapImg">12     <div class="swapImg"><img src="image/1.jpg" /></div>13     <div class="swapImg"><img src="image/2.jpg" /></div>14     <div class="swapImg"><img src="image/3.jpg" /></div>15     <div class="swapImg"><img src="image/4.jpg" /></div>16     <div class="swapImg"><img src="image/5.jpg" /></div>17     <div class="swapImg"><img src="image/6.jpg" /></div>18   </div>19   <div class="btn btnLeft"><</div>20   <div class="btn btnRight">></div>21   <div id="tabs">22     <div class="tab bg">1</div>23     <div class="tab">2</div>24     <div class="tab">3</div>25     <div class="tab">4</div>26     <div class="tab">5</div>27     <div class="tab">6</div>28   </div>29 </body>30 </html>

     css代码:

 1 * { 2  padding:0px; 3  margin:0px; 4 } 5  6 .swapImg { 7   position:absolute; 8   9 }10 .btn {11   position:absolute;12   height:90px;13   width:60px;14   background:rgba(0,0,0,0.5);/*设置背景颜色为黑色,透明度为50%*/15   color:#ffffff;16   text-align:center;17   line-height:90px;18   font-size:40px;19   top:155px;/*图片高度400/2-45*/20   cursor:pointer;21   /*display:none;*/22 }23 24 .btnRight {25   left:840px;/*图片宽度900-导航宽度60*/26 }27 #tabs {28   position:absolute;29   top:370px;30   margin-left:350px;31 }32 .tab {33   height:20px;34   width:20px;35   background:#05e9e2;36   line-height:20px;37   text-align:center;38   font-size:10px;39   float:left;40   color:#ffffff;41   margin-right:10px;42   border-radius:100%;43   cursor:pointer;44 }45 .bg {46   background:#00ff21;47 }

 

     js代码:

 1 /// <reference path="_references.js" /> 2  3 var i = 0;//全局变量 4 //定义一个变量用来获取轮播的过程 5 var time; 6 $(function () 7 { 8   //1.页面加载后,找到Class等于swapImg的第一个对象,让它显示,它的兄弟元素隐藏 9   $(".swapImg").eq(0).show().siblings().hide();10   showTime();11   //当鼠标放到下标上显示该图片,鼠标移走继续轮播12   $(".tab").hover(13     function ()14     {15       //获取到当前鼠标所在的下标的索引16       i = $(this).index();17       show();18       //鼠标放上去之后,怎么停止呢?获取到变量的过程,清除轮播,把变量传进去19       clearInterval(time);20     }, function ()21     {22       showTime();23     });24 25   //要求四,当我点击左右切换26   $(".btnLeft").click(function ()27   {28     //1.点击之前要停止轮播29     clearInterval(time);30     //点了之后,-131     if (i == 0)32     {33       i =6;34     }35     i--;36     show();37     showTime();38   });39   $(".btnRight").click(function () {40     //1.点击之前要停止轮播41     clearInterval(time);42     //点了之后,-143     if (i == 5) {44       i = -1;45     }46     i++;47     show();48     showTime();49   });50  51 52 });53 54 function show() {55   //$("#allswapImg").hover(function ()56   //{57   //  $(".btn").show();58   //}, function ()59   //{60   //  $(".btn").hide();61   //});62   //fadeIn(300)淡入,fadeout(300)淡出,过滤时间0.3s63   $(".swapImg").eq(i).fadeIn(300).siblings().fadeOut();64   $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");65 }66 67 function showTime()68 {69   time = setInterval(function () {70     i++;71     if (i == 6) {72       //只有6张图片,所以i不能超过6,如果i等于6时,我们就让它等于第一张73       i = 0;74     }75     show();76   }, 3000);77 }