`
lihong11
  • 浏览: 454677 次
  • 性别: Icon_minigender_2
  • 来自: 湖南
社区版块
存档分类
最新评论

javascript实现内容播放幻灯片效果

阅读更多
javascript实现内容播放幻灯片效果
以后要做这效果就直接复制了,呵呵
<!-- css样式 -->
	<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:#66CC00;display:block; width:650px; height:88px;" alt="22">222222222222222
    		  
    		  <p style="background-color:#66FF66;display:block; width:650px; height:88px;" alt="44">444444444444444
			  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){
			for(i=0;i<5;i++) i==value?imglist[i].style.display="block":imglist[i].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>
0
0
分享到:
评论

相关推荐

    javascript原生脚本实现幻灯片效果

    JavaScript原生脚本实现幻灯片效果是一种常见的网页动态效果,尤其在网站的首页或产品展示部分广泛应用。这种效果能够以优雅的方式展示一系列图片或内容,通过点击分页按钮进行切换,增强用户体验。下面我们将详细...

    几种好看的幻灯片JS效果

    它们提供了丰富的功能和良好的社区支持,可以帮助开发者快速实现幻灯片效果。 综上所述,JS幻灯片效果的实现涉及了前端开发的多个方面,包括DOM操作、事件处理、CSS动画、响应式设计以及用户体验优化。熟练掌握这些...

    用Javascript DOM实现网页幻灯片动画实例.pdf

    该函数可以用于实现网页幻灯片动画实例中的幻灯片播放效果。 知识点五:moveE()函数的应用 moveE()函数是JavaScript DOM中一个重要的函数,用于实现元素的移动动画效果。该函数可以用于实现网页幻灯片动画实例中的...

    javascript图片幻灯片效果显示

    首先,图片幻灯片效果的核心在于通过定时器控制图片的切换,模拟出连续播放的效果。JavaScript作为客户端脚本语言,能够实时地与用户交互,非常适合实现这种动态功能。我们可以创建一个HTML结构,包含多张图片,然后...

    javascript常用的两种幻灯片实现方法

    幻灯片效果是网页设计中常用的一种元素,可以用于展示图片、文本或任何其他内容,为用户带来流畅的浏览体验。本文将深入探讨JavaScript中两种常见的幻灯片实现方法。 1. 基于CSS3和JavaScript的幻灯片 一种常见的...

    javascript 播放幻灯片

    在实际项目中,"js" 文件夹可能包含实现幻灯片功能的 JavaScript 代码,"css" 文件夹则包含对应的样式文件。"readme.txt" 可能是关于项目的一些说明或注意事项,而 "images" 文件夹则包含幻灯片中的图片资源。 总的...

    javascript幻灯片效果

    通过以上内容,我们可以了解到JavaScript幻灯片效果的实现原理,以及如何利用Nivo Slider插件创建和定制自己的幻灯片。对于前端开发者来说,掌握这类技术对于提升网页交互性和用户体验至关重要。

    JavaScript 4屏平滑滚动幻灯片效果

    在幻灯片效果中,JavaScript需要操作DOM来改变显示内容。这可能包括获取或创建元素、设置元素样式、添加或删除类名等。例如,使用`document.querySelector()`或`document.querySelectorAll()`选取特定元素,`element...

    多张图片实现幻灯片播放效果

    在网页设计和开发中,创建一个动态的多张图片幻灯片播放效果是常见的需求,尤其在展示产品、服务或图像库时。这种效果能够吸引用户的注意力,提供一种优雅的方式来展示一系列内容。"kenburns"这个标签可能指的是Ken ...

    js创建幻灯片效果

    在实现幻灯片效果时,有几种策略可以选择: 1. **一次性加载所有图片**:这种方法对小规模的图片集有效,但在大图片集或低带宽环境下可能会导致页面加载缓慢。 2. **服务器端脚本**:仅加载第一张图片,其余图片...

    Javascript幻灯片广告

    在实现幻灯片广告时,需要对DOM元素进行操作,例如获取图片元素、设置样式属性(如display或opacity)以及添加事件监听器。 3. **CSS样式** CSS(Cascading Style Sheets)用于控制网页的布局和样式。在幻灯片广告...

    css+JavaScript自学框架之幻灯片展示效果 焦点图自动播放,单击圆点切换到指定图片,鼠标放到图片上停止自动播放

    `js`文件夹可能包含`script.js`这样的JavaScript文件,实现幻灯片的动态效果和逻辑控制。 学习这个框架,开发者可以深入理解如何结合CSS和JavaScript实现动态效果,提升网页的用户体验。此外,这也是一种常见的网页...

    js实用的幻灯片效果

    本文将深入探讨如何使用JavaScript实现实用的幻灯片效果。 首先,我们需要了解幻灯片的基本原理。幻灯片效果通常涉及到定时切换、动态过渡和用户交互控制等元素。基本流程包括:初始化幻灯片,设置默认显示的第一张...

    AJAX-实现幻灯片效果

    二、实现幻灯片效果的步骤 1. **HTML结构**:首先,我们需要在HTML中创建幻灯片的基础结构,包括每个幻灯片的容器和控制按钮(如左右切换按钮)。 2. **CSS样式**:使用CSS对幻灯片进行布局和样式设计,例如设置...

    flash 幻灯片效果

    然而,Flash幻灯片效果的原理和概念仍然适用,只是实现方式转为使用JavaScript、jQuery库或者CSS3的动画效果。 在“huand”这个压缩包文件中,可能包含了创建Flash幻灯片的源文件,包括FLA文件(Flash的工程文件)...

    jquery实现png透明幻灯片效果.rar

    在实现幻灯片效果时,jQuery提供了一系列方便的函数,如`.fadeIn()`、`.fadeOut()`、`.slideToggle()`等,这些都可以用来实现图片的渐显渐隐或者滑动切换效果。 PNG是一种支持透明度的图像格式,可以创建具有半透明...

    JS实现幻灯片效果

    在JavaScript编程领域,实现幻灯片效果是一种常见的需求,它广泛应用于网站的首页展示、产品介绍等场景。本文将深入探讨如何使用纯JS实现这一功能,同时也会涉及到HTML和CSS的基础应用。 首先,幻灯片的基本结构...

    JavaScript图片幻灯片

    综上所述,实现JavaScript图片幻灯片涉及JavaScript基础知识、DOM操作、事件处理、动画效果以及用户体验等多个方面。通过学习和实践这些知识点,你可以创建出功能丰富且具有交互性的图片轮换效果。

    滚动播放的幻灯片效果

    CSS3引入了新的动画和过渡属性,如`transition`和`animation`,使得在不依赖JavaScript的情况下也能实现幻灯片效果。通过定义关键帧(`@keyframes`),可以创建复杂的动画序列。例如,可以设置`transform`属性改变...

    js幻灯片效果

    JavaScript幻灯片效果是网页设计中常见的一种动态展示方式,尤其在现代网页和移动应用中广泛应用。本项目基于jQuery库,旨在实现一个兼容电脑端和手机端的幻灯片切换功能,确保用户无论是在台式机还是移动设备上都能...

Global site tag (gtag.js) - Google Analytics