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>
//自动轮换图片的定时器ID
var changeImgId;
//定义图片集合，存放图片路径信息
var list = ['images/Paopaobing1.jpg', 'images/Paopaobing2.jpg', 'images/Paopaobing3.jpg', 'images/Paopaobing4.jpg'];
$(function () {
$.each(list, function (index) {
//根据数组生成所有的img图片
$('').appendTo($("#imgContainer"));
//根据图片生成数字提示
$('<div class="imgTip">' + (index + 1) + '</div>')
.css('right', (4 - index) * 30 + 'px').appendTo("#imgContainer");
});
//设置第1张图片显示(第一张以后的图片都隐藏)
$("#imgContainer>img:gt(0)").hide();
//设置提示数据的事件
$("#imgContainer>.imgTip").hover(function () {//指向数字（清除定时器播放）
//根据索引找到图片对象
$("#imgContainer>img").eq(parseInt($(this).text()) - 1)
//将指向索引对应的图片以动画的形式展示出来
.fadeIn(1000)
//将其它图片隐藏
.siblings("img").fadeOut(1000);
//设置指向的数字背景颜色
$(this).css("background-color", "blue").siblings(".imgTip").css("background-color", "green");
//清除自动播放的定时器
clearInterval(changeImgId);
//更改图片索引(将当前数字div的值减1成为当前图片的索引)
imgIndex = parseInt($(this).text()) - 1;
}, function () {//移开数字（让定时器再次生效）
changeImgId = setInterval(changeImg, 2000);
});
//完成定时自动切换图片功能
changeImgId = setInterval(changeImg, 2000);
//默认让第一个数字的背景变为蓝色
$("#imgContainer>.imgTip:eq(0)").css("background-color", "blue");
});
//切换图片代码
var imgIndex = 0;
function changeImg() {
imgIndex++;//切换图片的索引
if (imgIndex >= list.length) {
imgIndex = 0;//如果图片索引是最后一张，则指定为第一张
}
//根据索引找到图片对象
$("#imgContainer>img").eq(imgIndex)
//将指向索引对应的图片以动画的形式展示出来
.fadeIn(1000)
//将其它图片隐藏
.siblings("img").fadeOut(1000);
//将指定的数字索引的div设置背景颜色
$("#imgContainer>.imgTip").eq(imgIndex)
.css("background-color", "blue")
.siblings(".imgTip").css("background-color", "green");
}
</script>
</head>
<body>
<div id="imgContainer"></div>
</body>
</html>
