JS实现图片幻灯片效果

最新推荐文章于 2024-11-12 11:19:19 发布
最新推荐文章于 2024-11-12 11:19:19 发布
阅读量87 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/IsNull/archive/2009/01/07/1370951.html
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>JS实现图片幻灯片效果</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div align="center"><div id=AdRotator></div><input id="second"><button οnclick="adRotator.set(getRef('second').value)">set time</button></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
function adRotator() {};
adRotator.initialize=function(o)
{
// script by blueDestiny
this._t = new Array();
this._l = new Array();
this._p = new Array();
this._i = new Image();
this._c = 0;
this._f = false;
this._o = o;
this._timeout = null;
this._html = "";
// configration.
// @ image width
// @ image height
// @ rotator speed
// @ filter type
this._w = 450;
this._h = 450;
this._s = 4;
this._x = 23;
return this;
};
adRotator.add=function(p,t,l) { with (this)
{
_p.push(p);
_t.push(t);
_l.push(l);
}};
adRotator.load=function() { with (adRotator)
{
if( _i.readyState=='complete' )
{
if(_p.length-1==_c)
{
_f = true;
_c = 0;
window.clearTimeout(_timeout);
//getRef("AdRotator").innerHTML="complete";
adRotator.play();
}
else
{
_c++;
getRef(_o).innerHTML="total images " + _p.length + ", loading picture " + _c + ' ' + _i.readyState + "...";
_timeout=window.setTimeout(adRotator.load,10)
}
}
else
{
getRef(_o).innerHTML="total images " + _p.length + ", loading picture " + _c + ' ' + _i.readyState + "...";
_timeout=window.setTimeout(adRotator.load,10)
}
}};
adRotator.play=function() { with (adRotator)
{
if( _f )
{
_html = "";
_html += '<table style="border:1px solid #333333;"><tr><td style="font-size:9pt;font-family:tahoma;font-weight:bold;">'
_html += '<div id="rotatorPlayer"'
+ ' style="width:' + _w + ''
+ ';height:"' + _h + '"'
+ '>'
_html += '<a href="' + ( _l[_c] ? _l[_c] : "javascript:void(0);" ) + '">';
_html += '<img id="rotatorPic" src="' + _p[_c] + '"'
+ ' width="' + _w + '"'
+ ' height="' + _h + '"'
+ (_t[_c]?' title="' + _t[_c] + '"':'')
+ ' style="border:1px solid blue;FILTER:revealTrans(transition=' + _x + ',duration=1);"'
+ ' >';
_html += (_t[_c]?('<div align="center">' + (_c+1) + '. ' + _t[_c] + '</div>'):'<p></p>');
_html += '</a>';
_html += "</div>";
_html += '<div align="right">';
for(var i=0; i<_p.length; i++)
_html += '<span'
+ ' style="border:1px solid #333333;padding:1px 5px 1px 5px;height:20px;text-align:center;cursor:'
+ (_c==i ? ('default;background-color:red;"') : 'hand;" οnclick="adRotator.select(' + i + ')"')
+ '>'
+ (i>8?(i+1):('0'+(i+1)))+ '</span> ';
_html += "</div></td></tr></table>";
getRef(_o).innerHTML = _html;
getRef("rotatorPic").filters[0].Apply();
getRef("rotatorPic").filters[0].Play();
next();
}
else
{
_i.src = _p[_c];
adRotator.load();
}
}};
adRotator.next=function() { with (this)
{
(_p.length-1==_c) ? _c=0 : _c++;
_timeout=window.setTimeout(adRotator.play,_s*1000);
}};
adRotator.select=function(i) { with (this)
{
window.clearTimeout(_timeout);
_c=i;
adRotator.play();
}};
adRotator.set=function(second) { with (this)
{
window.clearTimeout(_timeout);
if((/\d+/).test(second)==true)
{
_s=second;
adRotator.play();
}
else
{
alert("must be digit!")
adRotator.play();
}
}};
function getRef(id)
{
return (document.all?document.all(id):document.getElementById(id));
}
adRotator.initialize("AdRotator");
adRotator.add(" http://img1.qq.com/ent/20060218/3215110.jpg%22,%22aa%22,%22http://www.blueidea.com")
adRotator.add(" http://img1.qq.com/ent/20060218/3215111.jpg")
adRotator.add(" http://img1.qq.com/ent/20060218/3215112.jpg")
adRotator.add(" http://img1.qq.com/ent/20060218/3215113.jpg")
adRotator.add(" http://img1.qq.com/ent/20060218/3215114.jpg")
adRotator.play();
//-->
</SCRIPT>
</BODY>
</HTML>

转载于:https://www.cnblogs.com/IsNull/archive/2009/01/07/1370951.html

anjia5689
关注
js实现图片幻灯片效果
05-26
js控件，图片幻灯片效果，使用createElement创建表格对象实现图片的幻灯片效果。
JS实现图片幻灯片效果代码实例
10-15
本文主要介绍了如何使用JavaScript（JS）来实现图片幻灯片效果的代码实例，通过示例代码详细介绍了实现过程，并且对于学习和工作具有一定的参考价值。 知识点一：HTML结构准备 首先，我们需要准备HTML结构，用于...
JS 图片幻灯片
热门推荐
tangdou5682的博客
08-26 6万+
js 幻灯片 轮播 幻灯片 幻灯片思路 轮播思路 简单 图片幻灯片代码 图片轮播代码
利用css和javascript制作的幻灯片效果
Tz。
04-18 709
幻灯片demo：http://codepen.io/tianzi77/pen/aOoJVO 下面是代码: Examples body,div,ul,li{     margin:0;padding:0; } ul{     list-style-type:none; } #box{     position:relative;
分享63个JS幻灯片代码，总有一款适合您
zy0412326的专栏
02-07 1270
js
原生JS实现图片幻灯片效果
Handsome_fan的博客
07-14 7281
图片幻灯片是在网页开发中常见的一种效果，几乎是谁处可见。我今天想要实现的幻灯片的效果图如下： 它的html的代码非常的简单： &lt;div class="img-wrap"&gt; &lt;ul&gt; &lt;li&gt;&lt;img src="./image/aa.webp"/&gt;&lt;/li&gt; &lt;li&gt;&am
JS实现FLASH幻灯片图片切换效果的方法
01-19
本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
javascript实现图片切换的幻灯片效果源代码
10-27
JavaScript实现的幻灯片效果主要依赖于DOM操作和定时器函数。通过动态创建div元素、img元素及链接，并设置它们相应的属性和样式，来模拟幻灯片的图片切换。 2. 闭包（Closure）的使用： 在给定的代码中，a[i]....
javascript实现淘宝幻灯片广告展示效果
12-11
综上所述，这个JavaScript实现的幻灯片广告展示效果是通过DOM操作、CSS样式控制以及JavaScript动画来完成的。它允许网页上的广告以平滑过渡的方式展示，同时提供用户友好的导航点，增强了用户体验。在实际开发中，...
Javascript实现图片幻灯片
迹_Jason
04-26 1917
使用Javascript（js）和html实现图片浏览器，图片幻灯片，定时更改图片显示浏览
JS------------实现简易幻灯片
qq_41564576的博客
02-25 3589
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Easy slides&lt;/title&gt; &lt;script&gt;  var imgArr=new Array("img/1.jpg","img/2
如何使用JS实现图片幻灯片自动播放
༺࿈无关痛痒࿈༻的博客
11-28 1751
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; // 所有需要展示的图片建立一个数组 var images = ["../img/001.jpg&q
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 643
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
Vue中的常用指令
最新发布
m0_62388400的博客
11-12 919
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 76
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
vue2面试题5|[2024-11-08]
m0_49474690的博客
11-08 962
关于vue2API的面试题
使用JavaScript实现简单幻灯片切换效果
"本文主要介绍了如何使用JavaScript实现一个简单的幻灯片效果，通过移动DOM元素来达到切换幻灯片的目的。关键代码是`parent.appendChild(parent.firstChild)`，此操作将列表的第一个元素移到最后，从而实现幻灯片的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值