一、要點(diǎn)：
1.頁(yè)面加載時(shí)，圖片重合，疊在一起[絕對(duì)定位];
2.第一張顯示，其它隱藏;
3.設(shè)置下標(biāo),給下標(biāo)設(shè)置顏色讓它隨圖片移動(dòng);
4.鼠標(biāo)移動(dòng)到圖片上去，顯示左右移動(dòng)圖標(biāo)，鼠標(biāo)移走，繼續(xù)輪播;

二、實(shí)現(xiàn)代碼：
html代碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>輪播圖</title>
 <link href="css/LunBimg.css" rel="stylesheet" />
 <script src="js/jquery-1.10.2.min.js"></script>
 <script src="js/LunBimg.js"></script>
</head>
<body>
 <div id="allswapImg">
  <div class="swapImg"><img src="image/1.jpg" /></div>
  <div class="swapImg"><img src="image/2.jpg" /></div>
  <div class="swapImg"><img src="image/3.jpg" /></div>
  <div class="swapImg"><img src="image/4.jpg" /></div>
  <div class="swapImg"><img src="image/5.jpg" /></div>
  <div class="swapImg"><img src="image/6.jpg" /></div>
 </div>
 <div class="btn btnLeft"><</div>
 <div class="btn btnRight">></div>
 <div id="tabs">
  <div class="tab bg">1</div>
  <div class="tab">2</div>
  <div class="tab">3</div>
  <div class="tab">4</div>
  <div class="tab">5</div>
  <div class="tab">6</div>
 </div>
</body>
</html>

css代碼：

* {
 padding:0px;
 margin:0px;
}

.swapImg {
 position:absolute;
 
}
.btn {
 position:absolute;
 height:90px;
 width:60px;
 background:rgba(0,0,0,0.5);/*設(shè)置背景顏色為黑色，透明度為50%*/
 color:#ffffff;
 text-align:center;
 line-height:90px;
 font-size:40px;
 top:155px;/*圖片高度400/2-45*/
 cursor:pointer;
 /*display:none;*/
}

.btnRight {
 left:840px;/*圖片寬度900-導(dǎo)航寬度60*/
}
#tabs {
 position:absolute;
 top:370px;
 margin-left:350px;
}
.tab {
 height:20px;
 width:20px;
 background:#05e9e2;
 line-height:20px;
 text-align:center;
 font-size:10px;
 float:left;
 color:#ffffff;
 margin-right:10px;
 border-radius:100%;
 cursor:pointer;
}
.bg {
 background:#00ff21;
}

js代碼：

/// <reference path="_references.js" />

var i = 0;//全局變量
//定義一個(gè)變量用來(lái)獲取輪播的過(guò)程
var time;
$(function ()
{
 //1.頁(yè)面加載后,找到Class等于swapImg的第一個(gè)對(duì)象，讓它顯示，它的兄弟元素隱藏
 $(".swapImg").eq(0).show().siblings().hide();
 showTime();
 //當(dāng)鼠標(biāo)放到下標(biāo)上顯示該圖片，鼠標(biāo)移走繼續(xù)輪播
 $(".tab").hover(
  function ()
  {
   //獲取到當(dāng)前鼠標(biāo)所在的下標(biāo)的索引
   i = $(this).index();
   show();
   //鼠標(biāo)放上去之后，怎么停止呢？獲取到變量的過(guò)程，清除輪播，把變量傳進(jìn)去
   clearInterval(time);
  }, function ()
  {
   showTime();
  });

 //要求四，當(dāng)我點(diǎn)擊左右切換
 $(".btnLeft").click(function ()
 {
  //1.點(diǎn)擊之前要停止輪播
  clearInterval(time);
  //點(diǎn)了之后，-1
  if (i == 0)
  {
   i =6;
  }
  i--;
  show();
  showTime();
 });
 $(".btnRight").click(function () {
  //1.點(diǎn)擊之前要停止輪播
  clearInterval(time);
  //點(diǎn)了之后，-1
  if (i == 5) {
   i = -1;
  }
  i++;
  show();
  showTime();
 });
 

});

function show() {
 //$("#allswapImg").hover(function ()
 //{
 // $(".btn").show();
 //}, function ()
 //{
 // $(".btn").hide();
 //});
 //fadeIn(300)淡入，fadeout(300)淡出，過(guò)濾時(shí)間0.3s
 $(".swapImg").eq(i).fadeIn(300).siblings().fadeOut();
 $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");
}

function showTime()
{
 time = setInterval(function () {
  i++;
  if (i == 6) {
   //只有6張圖片，所以i不能超過(guò)6，如果i等于6時(shí)，我們就讓它等于第一張
   i = 0;
  }
  show();
 }, 3000);
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: