`
123629996
  • 浏览: 295880 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

javascript实现图片定时更换

阅读更多

采用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>

 是不是不复杂啊,源程序一起附上!

2
0
分享到:
评论
1 楼 swen00 2010-09-30  
收了... THX

相关推荐

    使用javascript定时切换图片

    在这个例子中,`switchImage`函数会在每2秒钟被调用一次,更新图片元素的`src`属性,实现图片的自动切换。`currentIndex`用于跟踪当前显示的图片索引,`%`运算符确保索引值始终在数组长度范围内。 四、优化与注意...

    利用HTML和JavaScript实现图片的自动播放

    总结一下,利用HTML和JavaScript实现图片的全屏自动播放涉及以下几个关键步骤: 1. 在HTML中创建`&lt;img&gt;`标签,并通过`id`属性标识。 2. 使用JavaScript获取图片元素,定义图片源数组。 3. 定义一个函数来更换图片源...

    asp实现图片动态切换

    在本场景中,"asp实现图片动态切换"涉及到的是如何使用ASP技术来实现在网页上进行图片的自动循环播放,即图片轮换效果,通常会结合JavaScript或CSS等前端技术以增强用户体验和视觉效果。 在ASP中,可以使用VBScript...

    使用javascript语言编写的图片变幻效果

    在这个案例中,我们将探讨如何利用JavaScript实现图片变幻效果。 首先,让我们了解JavaScript在处理图片变幻时的基本原理。通常,我们可以通过更改`&lt;img&gt;`标签的`src`属性或者使用CSS3的`transition`和`animation`...

    图片更换(轻量)js

    这里我们讨论的“图片更换(轻量)js”是一个简单的JavaScript实现,旨在提供一种轻便且易用的图片轮播功能。这个自编的JS函数只有15行左右的代码,其主要目标是实现定时更换图片的功能,适用于那些对性能和复杂性有...

    javascript切换图片效果

    5. **纯CSS实现**:现代浏览器支持CSS3的`transition`和`animation`,可以不依赖JavaScript实现图片切换,但这可能限制了对旧浏览器的支持。 6. **事件驱动**:JavaScript的事件监听可以响应用户的滚动、点击等行为...

    javaScript图片转换特效

    3. **JavaScript 逻辑**:`js` 文件包含了实现图片切换的JavaScript代码。以下是一些关键点: - **变量声明**:存储图片数组、当前显示的图片索引等。 - **事件监听**:使用`addEventListener`监听用户的点击事件...

    图片轮换显示JavaScript

    然后,我们编写JavaScript代码来实现图片轮换。这里可以使用`setInterval`函数定时更换图片。首先,定义一个变量来跟踪当前显示的图片索引: ```javascript var currentIndex = 0; ``` 接着,创建一个`...

    基于JavaScript的图片播放器

    本项目是基于JavaScript实现的图片播放器,旨在为用户提供一种视觉上吸引人的图片展示体验。通过结合CSS(层叠样式表)和JavaScript技术,我们可以创建出具有动画效果的图片轮播功能,增强用户对网页内容的感知。 ...

    Jquery图片定时切换展示

    以上就是使用JQuery实现图片定时切换的基本流程。在实际开发中,可能还需要考虑更多的细节,比如防止图片加载延迟导致的显示问题、图片尺寸适应、触摸事件的支持等。通过理解和应用这些知识点,你可以创建一个功能...

    jquery图片定时更换插件rar

    解压后,开发者可以参考示例文件了解如何集成和使用这个插件,以便在自己的项目中实现图片定时更换的功能。 总的来说,Slides插件是jQuery生态中的一个强大工具,它简化了幻灯片组件的实现过程,提供了多种定制选项...

    JavaScript实现滚动广告

    这里使用`setTimeout`函数来实现定时切换广告图片。 2. **DOM 操作**:文档对象模型(Document Object Model,简称 DOM)是 HTML 或 XML 文档的结构表示方式。通过 DOM,JavaScript 可以访问并修改页面中的元素,如...

    javascript经典特效---图片转换效果.rar

    在这个案例中,我们关注的是"javascript经典特效---图片转换效果",这是一个使用JavaScript实现的图片转换特效。这种效果通常用于创建图像画廊、滑动展示或轮播图,以增加网站的视觉吸引力。 在"图片转换效果.htm"...

    jQuery动态图片定时切换.zip

    总的来说,jQuery动态图片定时切换是一个结合了jQuery、CSS和JavaScript的典型Web开发案例,展示了如何利用这些技术构建丰富的用户界面。通过学习和实践此类效果,开发者可以提升对前端交互设计的理解,为网页增添更...

    JavaScript 和 jQuery 分别实现广告图片切换效果

    广告图片切换通常是指在网页上展示一组图片,通过定时或者用户触发事件来自动或手动更换显示的图片,以此吸引用户的注意力并提升用户体验。 首先,我们来探讨一下纯 JavaScript 实现广告图片切换的方法。在 ...

    js实现图片淡入淡出

    在JavaScript和jQuery的世界里,实现图片的淡入淡出效果是一项常见的需求,尤其在网页动态展示和动画设计中。这个主题主要围绕如何使用jQuery库来创建一个简单的图片切换功能,让图片在显示和隐藏时产生平滑的过渡...

    html实现图片轮转

    在实现图片轮转时,我们需要创建一个包含多张图片的容器,如`&lt;div&gt;`元素,每张图片则用`&lt;img&gt;`标签表示。例如: ```html &lt;!-- 更多图片... --&gt; ``` CSS(Cascading Style Sheets)用于设置网页的样式和布局...

    javascript网站图片切换插件

    本资源提供了一个基于JavaScript实现的网站图片切换插件,使得网页上的图片能够定时自动更换,为访客带来流畅且吸引人的视觉体验。 该插件的核心功能包括: 1. **自动切换**:通过JavaScript定时器(setInterval...

    JavaScript JS 图片不间断滚动

    在图片滚动效果中,JavaScript可以负责设置定时器,每隔一定时间自动切换图片,实现无缝滚动的视觉效果。 核心代码可能包括以下几个部分: 1. 获取图片元素:使用`document.getElementById`或`querySelector`等...

Global site tag (gtag.js) - Google Analytics