一、要点：
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='/images/loading.gif' data-original="js/jquery-1.10.2.min.js"></script> 8 <script src='/images/loading.gif' data-original="js/LunBimg.js"></script> 9 </head>10 <body>11 <div id="allswapImg">12 <div class="swapImg"><img src='/images/loading.gif' data-original="image/1.jpg" /></div>13 <div class="swapImg"><img src='/images/loading.gif' data-original="image/2.jpg" /></div>14 <div class="swapImg"><img src='/images/loading.gif' data-original="image/3.jpg" /></div>15 <div class="swapImg"><img src='/images/loading.gif' data-original="image/4.jpg" /></div>16 <div class="swapImg"><img src='/images/loading.gif' data-original="image/5.jpg" /></div>17 <div class="swapImg"><img src='/images/loading.gif' data-original="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 }
原标题：轮播图代码
关键词：
我知道了 