`
zccst
  • 浏览: 3315722 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript特效(二)图片自动播放

 
阅读更多
<style type="text/css">
#btn span{
	font-size:15px;
	height:15px;
	width:15px;
	background-color:#00ff00;
	border:1px solid #0066FF;
	text-align:center;
	margin-right:1px;
	float:left;
	cursor:pointer;
}
#btn span.hov{
	background-color: #0099FF;
}
p{
	border:#336666 solid 1px;
}
</style>


<div id="wai" style="cursor:pointer; margin:0px; height:88px; width:650px; overflow:hidden; position:relative;" onmouseover="clearAuto()" onmouseout="setAuto()">
    <div id="image1" style="position:relative;top:0px; left:0px; height:88px; width:650px;">
      <p style="background-color:#66ddff;display:block; width:650px; height:88px;" alt="00">111111111111111
      <p style="background-color:#66CC00;display:block; width:650px; height:88px;" alt="11">222222222222222
      <p style="background-color:#66FF66;display:block; width:650px; height:88px;" alt="22">333333333333333
      <p style="background-color:#88CC22;display:block; width:650px; height:88px;" alt="33">444444444444444
      <p style="background-color:#553366;display:block; width:650px; height:88px;" alt="44">555555555555555
    </div>
	<!-- 幻灯片切换按钮-->
    <div id="btn" style="position:absolute; bottom:0px; right:0px; width:96px; ">
        <span class="hov" onmouseover="set(0)"><font size="2">1</font></span>
        <span onmouseover="set(1)"><font size="2">2</font></span>
        <span onmouseover="set(2)"><font size="2">3</font></span>
        <span onmouseover="set(3)"><font size="2">4</font></span>
        <span onmouseover="set(4)"><font size="2">5</font></span>
    </div>
</div>


<!-- javascript-->
<script type="text/javascript">
var n = 0;
var banner = false;
var numlist = document.getElementById("btn").getElementsByTagName("span");
var imglist = document.getElementById("image1").getElementsByTagName("p");

function set(value){
	//alert("value = "+value);
	n=value;
	document.getElementById("image1").style.filter="revealtrans(duration=2,transition="+Math.random()*24+")"; //自动生成滤镜效果(切换内容)
	for(var i=0;i<5;i++){
		i==value?numlist[i].className="hov":numlist[i].className=" ";//设置数字的css样式
	}
	try{
		with(image1){//火狐不支持滤镜效果,借用with来区分IE和火狐,火狐将用catc里的方式显示
			filters[0].apply();//以下为设置图片的
			for(i=0;i<5;i++) i==value?imglist[i].style.display="block":imglist[i].style.display="none";
				document.getElementById("image1").filters[0].play();
		}
	}catch(e){
		var j=0;
		for(;j<5;j++) {
			j==value?imglist[j].style.display="block":imglist[j].style.display="none";
		}
	}
}        
//自动播放幻灯片
function auto(){
	n++;
	if(n>=5) n=0;
	set(n);
}
function clearAuto(){clearInterval(banner);}
function setAuto(){clearInterval(banner);banner=setInterval("auto()",4000)};
setAuto();
</script> 
分享到:
评论

相关推荐

    图片滚动javascript特效,可自动播放停止滚动插件

    在这个场景中,"图片滚动javascript特效,可自动播放停止滚动插件"是利用JavaScript实现的一种动态展示图片的功能。下面将详细介绍这个主题的相关知识点。 1. **JavaScript基础**:JavaScript是一种解释型的、基于...

    javascript特效代码大全

    JavaScript特效代码大全是一份集合了各种JavaScript编程技巧和效果实现的资源库,涵盖了网页动态效果、用户交互、动画以及数据可视化等多个方面。这份大全旨在帮助开发者提升网站的用户体验,通过运用JavaScript的...

    javascript特效javascript特效javascript特效

    例如,实现一个自动播放的幻灯片,就需要利用定时器来切换图片。 3. **CSS样式操作**:JavaScript可以直接访问并修改元素的CSS样式,包括颜色、尺寸、位置等,从而实现动态变换的效果。例如,可以通过改变元素的...

    图片显示特效javascript

    本主题主要围绕"图片显示特效javascript"展开,探讨如何利用JavaScript实现各种图片展示的动态效果。 1. 图片加载:JavaScript可以监测图片的加载状态,例如使用`onload`事件来处理图片加载完成后执行的代码,确保...

    Javascript特效代码全集

    1. 图片轮播:通过JavaScript,可以创建自动切换或手动控制的图片展示,如幻灯片效果,为网站的图片展示提供丰富的动画过渡。 2. 滚动效果:例如滚动条优化、页面滚动监听、滚动到顶部等,这些可以提升网页的导航...

    程序员常用JavaScript特效

    1. 图片轮播:通过JavaScript可以实现动态的图片切换效果,如自动播放、手动切换、过渡动画等。这通常涉及到定时器(setTimeout或setInterval)和DOM操作,例如改变图片源或CSS样式。 2. 滚动条特效:比如固定顶部...

    JavaScript特效集锦

    总的来说,这个JavaScript特效集锦涵盖了网页开发中的多种常见和创新特效,包括图片的放大、滚动、渐变过渡以及3D旋转等。学习和掌握这些技术,对于提升网页的互动性和吸引力有着极大的帮助。开发者可以通过研究源...

    文字图片列表向上滚动javascript特效

    【描述】在“文字图片列表向上滚动javascript特效”中,网页上的文字和图片会以定时或用户触发的方式自动向上滚动,营造出一种动感十足的浏览体验。这种特效通常结合HTML、CSS和JavaScript三者来实现。HTML负责构建...

    JavaScript特效100例

    6. CSS将图片自动变为圆角:CSS3提供了border-radius属性,可以方便地将图片或其他元素的角落设置为圆角。这个特性无需JavaScript即可实现,但在某些老版本浏览器中可能需要JavaScript辅助。 7. CSS制作的类似相册...

    JavaScript特效

    4. **轮播图**:这是一种常见的网页特效,通过JavaScript控制图片的切换,可添加自动播放、导航点、左右切换等功能。 5. **弹出框**:如模态对话框、提示框、警告框等,通常用于显示额外信息或获取用户输入。 6. *...

    简单的JavaScript特效

    "简单的JavaScript特效"这个主题,主要是指利用JavaScript实现的一些基础但有趣的视觉效果。这些效果可能包括按钮的悬停效果、图片轮播、计时器、表单验证、页面元素的动画等,都是初学者经常尝试的实践项目。 在...

    Javascript特效代码大全 程序员常用的网页特效

    在"Javascript特效代码大全"这个资源中,程序员可以找到许多实用的JavaScript代码示例,帮助提升网页的用户体验和视觉吸引力。 1. **基础概念**: JavaScript主要运行在浏览器环境中,通过DOM(文档对象模型)操作...

    javaScript图片转换特效

    在这个“javaScript图片转换特效”的主题中,我们将深入探讨如何使用JavaScript实现多图片自动转换和切换的特效。 首先,让我们理解基本概念。在网页中,图片的切换可以通过JavaScript事件监听和定时器来实现。例如...

    javascript 特效大全

    在JavaScript特效大全中,它被用来实现各种交互式功能,如图片切换、时间选择器等。 2. **土豆网图片切换效果**: 这种特效可能是指一种类似于土豆网视频播放页面中的图片轮播功能。它通常通过JavaScript库如jQuery...

    JavaScript图片特效类

    图片轮播是一种常见的JavaScript特效,用于在有限的空间内展示多张图片。通常包含自动切换、手动导航、指示器等功能。实现方式有多种,如使用CSS3的transition和animation属性,或者利用JavaScript的setInterval...

    JavaScript特效大全

    JavaScript特效大全是一个集合了众多JavaScript技术实现的网页交互效果资源,涵盖了时间日期处理、导航、背景、图形图像、按钮、鼠标事件以及文本等多种类型的特效。这些特效为网页设计师和前端开发者提供了丰富的...

    JavaScript特效大全(推荐)

    JavaScript特效大全是一个全面涵盖JavaScript视觉效果的资源集合,旨在帮助开发者和学习者掌握各种JavaScript编程技巧,提升网页交互体验。这个资源包包含了多种类型的JS特效,不仅提供了代码示例,还有详细的指导,...

    javascript特效全集

    JavaScript特效在网页设计中起着至关重要的作用,它赋予了静态网页动态的视觉效果,提升了用户体验。本资源“javascript特效全集”集中了多种JavaScript特效的实现方法,旨在帮助开发者和设计师掌握各种JavaScript...

    javascript个人常用特效

    5. **滑块和轮播图**:JavaScript常用于创建轮播图和幻灯片展示,自动播放、手动切换、动态指示器等功能使得内容展示更丰富。 6. **下拉菜单**:对于大型网站,下拉菜单是常见的导航方式。JavaScript可以实现动态...

Global site tag (gtag.js) - Google Analytics