1.首先引用jq文件
<script src="scripts/jquery-1.7.1.js"></script>
2.Html部分
<body>
<div id="imgContainer"></div>
</body>
3.css部分
<style>
#imgContainer{
width:300px;
height:300px;
border:1px solid red;
/*设置绝对定位,子元素的绝对定位是相对于父元素*/
position:absolute;
left:10px;
top:10px;
}
#imgContainer img{
width:300px;
height:300px;
position:absolute;
left:0px;
top:0px;
}
#imgContainer div{
position:absolute;
}
#imgContainer .imgTip{
border:1px solid blue;
background-color:green;color:white;
padding:3px;width:10px;cursor:pointer;
z-index:100;bottom:10px;
}
</style>
4.js部分
<script>
var changeImgID;
//图片数组
var list = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png', 'img/5.png']
$(function () {
//循环数组
$.each(list, function (index) {
//给数组的每个图片生成img
$('<img src="' + this + '"/>').appendTo('#imgContainer');
//生成数字索引div
$('<div class="imgTip">' + (index + 1) + '</div>').css('right', (4 - index) * 20 + 'px').appendTo('#imgContainer');
})
$('#imgContainer>img:gt(0)').hide();
$('#imgContainer>.imgTip').hover(function () {//指向数字
//将指向的图片显示出来
$('#imgContainer>img').eq(parseInt($(this).text()) - 1).slideDown(1000).siblings('img').fadeOut();
$(this).css('background-color', 'blue').siblings('.imgTip').css('background-color', 'green');
clearInterval(changeImgID); //当鼠标指向索引时,清楚定时器
}, function () { //鼠标移开数字时
//启动定时器
changeImgID = setInterval(changeImg, 2000);
//改图片索引
imgIndex = parseInt($(this).text()) - 1;
});
$('#imgContainer>.imgTip').eq(0).css('background-color', 'blue').siblings('.imgTip').css('background-color', 'green');
//定时器
changeImgID= setInterval(changeImg, 2000);
});
var imgIndex = 0;
function changeImg() { //自动播发函数
imgIndex++;
if (imgIndex >= list.length) {
imgIndex = 0;
}
$('#imgContainer>img').eq(imgIndex).slideDown(1000).siblings('img').fadeOut(1000);
$('#imgContainer>.imgTip').eq(imgIndex).css('background-color', 'blue').siblings('.imgTip').css('background-color', 'green');
}
</script>