您的位置：首页 > Web前端 > JQuery

JQuery 图片轮换，图片幻灯片

2017-12-20 11:55 375 查看

参考：http://www.cnblogs.com/lhb25/archive/2011/05/31/2056103.htm

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>图片轮换</title>
<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>

<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
var changeImgId; //自动轮换图片的定时器编号
//定义一个图片的集合，指定图片的路径信息
var list = ['images/zg.jpg','images/hg.jpg','images/mg.jpg','images/rb.jpg'];
$(function() {

//根据数组生成所有img图片和数字div
$.each(list,function(index){
$('<img src="'+this+'"/>')  //生成图片
.appendTo('#imgContainer');
$('<div class="imgTip">' + (index+1) +'</div>')  //生成数字div
.css('right',(list.length - index) * 20 + 'px')
.appendTo('#imgContainer');
});

//初始化，除第一张图片的所有图片隐藏
$('#imgContainer>img:gt(0)').hide();
$('#imgContainer>.imgTip').eq(0)  //初始化数字div的样式
.css('background-color','blue')

//设置数字div的鼠标事件
$('#imgContainer>.imgTip').hover(function(){//鼠标移上
clearInterval(changeImgId);  //清除定时器
//根据索引找到图片对象
$('#imgContainer>img').eq(parseInt($(this).text()) - 1)
.slideDown(0)   //显示当前图片
.siblings('img').slideUp(0);  //隐藏其他图片siblings表示所有的同级元素
//设置指向的数字div的CSS
$(this).css('background-color','blue')
.siblings('.imgTip').css('background-color','green');
imgIndex = parseInt($(this).text()) - 1;
},function(){//鼠标离开
changeImgId = setInterval(changeImg,2000);
});

//定时器，自动切换图片
changeImgId = setInterval(changeImg,2000);
});

//切换图片的定时器函数
var imgIndex=0;
function changeImg(){
imgIndex++; //切换图片的索引
if(imgIndex >= list.length){
imgIndex = 0;
}
//根据索引找到图片对象
$('#imgContainer>img').eq(imgIndex)
.slideDown(0)   //显示当前图片
.siblings('img').slideUp(0);  //隐藏其他图片siblings表示所有的同级元素
//设置指向的数字div的CSS
$('#imgContainer>.imgTip').eq(imgIndex)
.css('background-color','blue')
.siblings('.imgTip').css('background-color','green');
}

</script>
</head>
<body>
<div id="imgContainer"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航