jQuery輪播圖.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#imgContainer div {
position: absolute;
}
#imgContainer img {
width: 1350px;
height: 600px;
position: absolute;
}
#imgContainer .imgTip {
border: 1px solid blue;
background-color: green;
color: white;
padding: 3px;
width: 15px;
cursor: pointer;
z-index: 100;
bottom: 50px;
}
</style>
<script src="script/jquery-3.2.1.js"></script>
<script>
//自動(dòng)輪換圖片的定時(shí)器ID
var changeImgId;
//定義圖片集合，存放圖片路徑信息
var list = ['images/Paopaobing1.jpg', 'images/Paopaobing2.jpg', 'images/Paopaobing3.jpg', 'images/Paopaobing4.jpg'];
$(function () {
$.each(list, function (index) {
//根據(jù)數(shù)組生成所有的img圖片
$('').appendTo($("#imgContainer"));
//根據(jù)圖片生成數(shù)字提示
$('<div class="imgTip">' + (index + 1) + '</div>')
.css('right', (4 - index) * 30 + 'px').appendTo("#imgContainer");
});
//設(shè)置第1張圖片顯示(第一張以后的圖片都隱藏)
$("#imgContainer>img:gt(0)").hide();
//設(shè)置提示數(shù)據(jù)的事件
$("#imgContainer>.imgTip").hover(function () {//指向數(shù)字（清除定時(shí)器播放）
//根據(jù)索引找到圖片對(duì)象
$("#imgContainer>img").eq(parseInt($(this).text()) - 1)
//將指向索引對(duì)應(yīng)的圖片以動(dòng)畫的形式展示出來(lái)
.fadeIn(1000)
//將其它圖片隱藏
.siblings("img").fadeOut(1000);
//設(shè)置指向的數(shù)字背景顏色
$(this).css("background-color", "blue").siblings(".imgTip").css("background-color", "green");
//清除自動(dòng)播放的定時(shí)器
clearInterval(changeImgId);
//更改圖片索引(將當(dāng)前數(shù)字div的值減1成為當(dāng)前圖片的索引)
imgIndex = parseInt($(this).text()) - 1;
}, function () {//移開數(shù)字（讓定時(shí)器再次生效）
changeImgId = setInterval(changeImg, 2000);
});
//完成定時(shí)自動(dòng)切換圖片功能
changeImgId = setInterval(changeImg, 2000);
//默認(rèn)讓第一個(gè)數(shù)字的背景變?yōu)樗{(lán)色
$("#imgContainer>.imgTip:eq(0)").css("background-color", "blue");
});
//切換圖片代碼
var imgIndex = 0;
function changeImg() {
imgIndex++;//切換圖片的索引
if (imgIndex >= list.length) {
imgIndex = 0;//如果圖片索引是最后一張，則指定為第一張
}
//根據(jù)索引找到圖片對(duì)象
$("#imgContainer>img").eq(imgIndex)
//將指向索引對(duì)應(yīng)的圖片以動(dòng)畫的形式展示出來(lái)
.fadeIn(1000)
//將其它圖片隱藏
.siblings("img").fadeOut(1000);
//將指定的數(shù)字索引的div設(shè)置背景顏色
$("#imgContainer>.imgTip").eq(imgIndex)
.css("background-color", "blue")
.siblings(".imgTip").css("background-color", "green");
}
</script>
</head>
<body>
<div id="imgContainer"></div>
</body>
</html>
