javascript实现图片定时更换

最新推荐文章于 2022-06-10 10:53:33 发布

lq123629996

最新推荐文章于 2022-06-10 10:53:33 发布

阅读量928

点赞数 1

分类专栏： web前端文章标签： JavaScript jQuery CSS HTML ViewUI

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

采用jquery实现图片的定时更换还是很简单的，与此相比更漂亮的效果都是用css来控制的。好了，直奔主题，看代码还是很简单的。就这样的功能在猪八戒网上还卖50块呢，可惜晚了一步，没挣到钱。哈哈

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<title>图片的自动改变</title>
</head>
<style>
	.main{
		border:1px solid;
		width:600px;
		height:300px;
	}
	.word{
		border:1px solid;
		width:300px;
		height:300px;
		background-color:#0080ff;
	}
	.pic{
		position:absolute;
		border:1px solid;
		width:300px;
		height:300px;
		float:right;
	}
</style>
<body>
<div class="main">
	<div id="word" class="word"><center>这里是文字描述</center></div>
	<div id="pic" class="pic"><img id="showpic" width="300" height="300" src="pic/3.jpg"/></div>
</div>
<div id="showOffSet"></div>
<script type="text/javascript">
	/*定义图片位置*/
	var pic=new Array("pic/1.jpg","pic/2.jpg","pic/3.jpg");
	/*定义三种颜色*/
	var cols = new Array("#ff0000","#ffff00","#0080ff");
	var num = 0;
	$(document).ready(function(){
		/*计算位置*/
		var offset = $("#word").offset();
		var myTop = offset.top;
		var myLeft = offset.left + 300;
		$("#pic").css({ top: myTop, left: myLeft });
		/*定时器,3秒执行一次showpic函数*/
		setInterval(showpic,3000);						
	});
	function showpic(){
		if(num>2){
			num = 0;
		}
		/*由于默认有一张图片，所以首先淡出，完成后触发后边的事件
		改变图片，然后淡入，达到切换的效果
		*/
		$("#showpic").fadeOut(1200,function(){
		/*改变前边文字域的背景颜色*/
			$("#word").css("background-color",cols[num]);
			/*更换目标图片*/
			$("#showpic").attr("src",pic[num]);
			$("#showpic").fadeIn(1200);
			num++;
			});
	}
</script>
</body>
</html>

是不是不复杂啊，源程序一起附上！

lq123629996

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript实现图片定时更换

采用jquery实现图片的定时更换还是很简单的，与此相比更漂亮的效果都是用css来控制的。好了，直奔主题，看代码还是很简单的。就这样的功能在猪八戒网上还卖50块呢，可惜晚了一步，没挣到钱。哈哈&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt...
复制链接

扫一扫