JQuery 图片轮换，图片幻灯片

最新推荐文章于 2024-07-10 21:05:14 发布

houyanhua1

最新推荐文章于 2024-07-10 21:05:14 发布

阅读量383

点赞数 1

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/houyanhua1/article/details/78851623

版权

JQuery 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

参考：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>