基于JavaScript實現(xiàn)輪播圖代碼

更新時間：2016年07月14日 17:24:48 作者：wangwangwangMax

在前端程序開發(fā)中，經(jīng)常會實現(xiàn)js輪播圖的效果，怎么實現(xiàn)的呢？下面小編給大家分享基于基于JavaScript實現(xiàn)輪播圖代碼，非常不錯，感興趣的朋友可以參考下

一、要點：

1.頁面加載時，圖片重合，疊在一起[絕對定位];

2.第一張顯示，其它隱藏;

3.設(shè)置下標,給下標設(shè)置顏色讓它隨圖片移動;

4.鼠標移動到圖片上去，顯示左右移動圖標，鼠標移走，繼續(xù)輪播;

二、實現(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-導航寬度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;//全局變量
//定義一個變量用來獲取輪播的過程
var time;
$(function ()
{
//1.頁面加載后,找到Class等于swapImg的第一個對象，讓它顯示，它的兄弟元素隱藏
$(".swapImg").eq(0).show().siblings().hide();
showTime();
//當鼠標放到下標上顯示該圖片，鼠標移走繼續(xù)輪播
$(".tab").hover(
function ()
{
//獲取到當前鼠標所在的下標的索引
i = $(this).index();
show();
//鼠標放上去之后，怎么停止呢？獲取到變量的過程，清除輪播，把變量傳進去
clearInterval(time);
}, function ()
{
showTime();
});
//要求四，當我點擊左右切換
$(".btnLeft").click(function ()
{
//1.點擊之前要停止輪播
clearInterval(time);
//點了之后，-1
if (i == 0)
{
i =6;
}
i--;
show();
showTime();
});
$(".btnRight").click(function () {
//1.點擊之前要停止輪播
clearInterval(time);
//點了之后，-1
if (i == 5) {
i = -1;
}
i++;
show();
showTime();
});
});
function show() {
//$("#allswapImg").hover(function ()
//{
// $(".btn").show();
//}, function ()
//{
// $(".btn").hide();
//});
//fadeIn(300)淡入，fadeout(300)淡出，過濾時間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不能超過6，如果i等于6時，我們就讓它等于第一張
i = 0;
}
show();
}, 3000);
}

以上所述是小編給大家介紹的基于JavaScript實現(xiàn)輪播圖代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: