- 浏览: 2159120 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1878)
- [网站分类]ASP.NET (141)
- [网站分类]C# (80)
- [随笔分类]NET知识库 (80)
- [随笔分类]摘抄文字[非技术] (3)
- [随笔分类]养生保健 (4)
- [网站分类]读书区 (16)
- [随笔分类]赚钱 (7)
- [网站分类].NET新手区 (233)
- [随笔分类]网站 (75)
- [网站分类]企业信息化其他 (4)
- [网站分类]首页候选区 (34)
- [网站分类]转载区 (12)
- [网站分类]SQL Server (16)
- [网站分类]程序人生 (7)
- [网站分类]WinForm (2)
- [随笔分类]错误集 (12)
- [网站分类]JavaScript (3)
- [随笔分类]小说九鼎记 (69)
- [随笔分类]技术文章 (15)
- [网站分类]求职面试 (3)
- [网站分类]其他技术区 (6)
- [网站分类]非技术区 (10)
- [发布至博客园首页] (5)
- [网站分类]jQuery (6)
- [网站分类].NET精华区 (6)
- [网站分类]Html/Css (10)
- [随笔分类]加速及SEO (10)
- [网站分类]Google开发 (4)
- [随笔分类]旅游备注 (2)
- [网站分类]架构设计 (3)
- [网站分类]Linux (23)
- [随笔分类]重要注册 (3)
- [随笔分类]Linux+PHP (10)
- [网站分类]PHP (11)
- [网站分类]VS2010 (2)
- [网站分类]CLR (1)
- [网站分类]C++ (1)
- [网站分类]ASP.NET MVC (2)
- [网站分类]项目与团队管理 (1)
- [随笔分类]个人总结 (1)
- [随笔分类]问题集 (3)
- [网站分类]代码与软件发布 (1)
- [网站分类]Android开发 (1)
- [网站分类]MySQL (1)
- [网站分类]开源研究 (6)
- ddd (0)
- 好久没写blog了 (0)
- sqlserver (2)
最新评论
-
JamesLiuX:
博主,能组个队么,我是Freelancer新手。
Freelancer.com(原GAF – GetAFreelancer)帐户里的钱如何取出? -
yw10260609:
我认为在混淆前,最好把相关代码备份一下比较好,不然项目完成后, ...
DotFuscator 小记 -
日月葬花魂:
大哥 能 加我个QQ 交流一下嘛 ?51264722 我Q ...
web应用程序和Web网站区别 -
iaimg:
我想问下嵌入delphi写的程序总是出现窗体后面感觉有个主窗体 ...
C#自定义控件:WinForm将其它应用程序窗体嵌入自己内部 -
iaimg:
代码地址下不了啊!
C#自定义控件:WinForm将其它应用程序窗体嵌入自己内部
<html>
<!-- 脚本代码开始 -->
<head>
<script language="JavaScript" type="text/javascript">
<!--
var bannerAD=new Array();
var adNum=0;
bannerAD[0]='cyjq_R_banner1.jpg';
bannerAD[1]='cyjq_R_banner2.jpg';
bannerAD[2]='cyjq_R_banner.jpg';
var preloadedimages=new Array();
for (i=1;i<bannerAD.length;i++) {
preloadedimages[i]=new Image();
preloadedimages[i].src=bannerAD[i];
}
function setTransition() {
if (document.all) {
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
bannerADrotator.filters.revealTrans.apply();
}
}
function playTransition() {
if (document.all) {
bannerADrotator.filters.revealTrans.play();
}
}
function nextAd() {
if (adNum<bannerAD.length-1) {
adNum++;
} else {
adNum=0;
}
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()", 5000);
}
//-->
</script>
<!-- 脚本代码结束 -->
</head>
<body>
<!--调用开始-->
<table>
<td width="159" valign="middle">
<img src="" name="bannerADrotator" width="159" height="184" style="filter: revealTrans(duration=2,transition=20);">
<script language="JavaScript" type="text/javascript">
nextAd()
</script>
</td>
<!-- 调用结束 -->
</table>
</body>
</html>
还有一个牛人写的JS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript 图片切换展示效果</title>
</head>
<body>
<style type="text/css">
.container, .container *
{
margin: 0;
padding: 0;
}
.container
{
width: 169px;
height: 323px;
overflow: hidden;
}
.slider
{
position: absolute;
}
.slider li
{
list-style: none;
display: inline;
}
.slider img
{
width: 169px;
height: 323px;
display: block;
}
.slider2
{
width: 2000px;
}
.slider2 li
{
float: left;
}
.num
{
position: absolute;
right: 5px;
bottom: 5px;
}
.num li
{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
.num li.on
{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px; <script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}
</style>
<div class="container" id="idTransformView">
<ul class="slider" id="idSlider">
<li>
<img src="cyjq_R_banner1.jpg" /></li>
<li>
<img src="cyjq_R_banner2.jpg" /></li>
<li>
<img src="cyjq_R_banner.jpg" /></li>
</ul>
<ul class="num" id="idNum">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<br />
<div class="container" id="idTransformView2">
<ul class="slider slider2" id="idSlider2">
<li>
<img src="cyjq_R_banner1.jpg" /></li>
<li>
<img src="cyjq_R_banner2.jpg" /></li>
<li>
<img src="cyjq_R_banner.jpg" /></li>
</ul>
<ul class="num" id="idNum2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<br />
<div>
<input id="idStop" type="button" value=" 停止自动 " />
<input id="idStart" type="button" value=" 开始自动 " />
<br />
<br />
<input id="idPre" type="button" value=" <- 上一个 " />
<input id="idNext" type="button" value=" 下一个 -> " />
<br />
<br />
切换速度:
<input id="idFast" type="button" value=" + 加 速 " />
<input id="idSlow" type="button" value=" - 减 速 " />
<br />
<br />
停顿时间:
<input id="idAdd" type="button" value=" + 加时间 " />
<input id="idReduce" type="button" value=" - 减时间 " />
<br />
<br />
<input id="idReset" type="button" value=" Reset " />
</div>
<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
var TransformView = Class.create();
TransformView.prototype = {
//容器对象,滑动对象,切换参数,切换数量
initialize: function(container, slider, parameter, count, options) {
if(parameter <= 0 || count <= 0) return;
var oContainer = $(container), oSlider = $(slider), oThis = this;
this.Index = 0;//当前索引
this._timer = null;//定时器
this._slider = oSlider;//滑动对象
this._parameter = parameter;//切换参数
this._count = count || 0;//切换数量
this._target = 0;//目标参数
this.SetOptions(options);
this.Up = !!this.options.Up;
this.Step = Math.abs(this.options.Step);
this.Time = Math.abs(this.options.Time);
this.Auto = !!this.options.Auto;
this.Pause = Math.abs(this.options.Pause);
this.onStart = this.options.onStart;
this.onFinish = this.options.onFinish;
oContainer.style.overflow = "hidden";
oContainer.style.position = "relative";
oSlider.style.position = "absolute";
oSlider.style.top = oSlider.style.left = 0;
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Up: true,//是否向上(否则向左)
Step: 5,//滑动变化率
Time: 10,//滑动延时
Auto: true,//是否自动转换
Pause: 2000,//停顿时间(Auto为true时有效)
onStart: function(){},//开始转换时执行
onFinish: function(){}//完成转换时执行
};
Object.extend(this.options, options || {});
},
//开始切换设置
Start: function() {
if(this.Index < 0){
this.Index = this._count - 1;
} else if (this.Index >= this._count){ this.Index = 0; }
this._target = -1 * this._parameter * this.Index;
this.onStart();
this.Move();
},
//移动
Move: function() {
clearTimeout(this._timer);
var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow);
if (iStep != 0) {
this._slider.style[style] = (iNow + iStep) + "px";
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
} else {
this._slider.style[style] = this._target + "px";
this.onFinish();
if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); }
}
},
//获取步长
GetStep: function(iTarget, iNow) {
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
return iStep;
},
//停止
Stop: function(iTarget, iNow) {
clearTimeout(this._timer);
this._slider.style[this.Up ? "top" : "left"] = this._target + "px";
}
};
window.onload=function(){
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
var objs = $("idNum").getElementsByTagName("li");
var tv = new TransformView("idTransformView", "idSlider", 168, 3, {
onStart : function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) }//按钮样式
});
tv.Start();
Each(objs, function(o, i){
o.onmouseover = function(){
o.className = "on";
tv.Auto = false;
tv.Index = i;
tv.Start();
}
o.onmouseout = function(){
o.className = "";
tv.Auto = true;
tv.Start();
}
})
////////////////////////test2
var objs2 = $("idNum2").getElementsByTagName("li");
var tv2 = new TransformView("idTransformView2", "idSlider2", 408, 3, {
onStart: function(){ Each(objs2, function(o, i){ o.className = tv2.Index == i ? "on" : ""; }) },//按钮样式
Up: false
});
tv2.Start();
Each(objs2, function(o, i){
o.onmouseover = function(){
o.className = "on";
tv2.Auto = false;
tv2.Index = i;
tv2.Start();
}
o.onmouseout = function(){
o.className = "";
tv2.Auto = true;
tv2.Start();
}
})
$("idStop").onclick = function(){ tv2.Auto = false; tv2.Stop(); }
$("idStart").onclick = function(){ tv2.Auto = true; tv2.Start(); }
$("idNext").onclick = function(){ tv2.Index++; tv2.Start(); }
$("idPre").onclick = function(){ tv2.Index--;tv2.Start(); }
$("idFast").onclick = function(){ if(--tv2.Step <= 0){tv2.Step = 1;} }
$("idSlow").onclick = function(){ if(++tv2.Step >= 10){tv2.Step = 10;} }
$("idReduce").onclick = function(){ tv2.Pause-=1000; if(tv2.Pause <= 0){tv2.Pause = 0;} }
$("idAdd").onclick = function(){ tv2.Pause+=1000; if(tv2.Pause >= 5000){tv2.Pause = 5000;} }
$("idReset").onclick = function(){
tv2.Step = Math.abs(tv2.options.Step);
tv2.Time = Math.abs(tv2.options.Time);
tv2.Auto = !!tv2.options.Auto;
tv2.Pause = Math.abs(tv2.options.Pause);
}
}
</script>
</body>
</html>
发表评论
-
淘宝开发平台知识点一,入门指南
2010-04-01 09:09 2113App Key:12038991 App Secret ... -
成长手删代码40-listbox js操作上下左右移动.txt
2009-08-05 12:03 1150<script type ="text/jav ... -
倍受好评的美国主机JustHost使用全攻略教程
2010-03-19 09:55 976以前多次说过Justhost,国内访问速度非常不错。和有嫌疑的 ... -
倍受好评的美国主机JustHost使用全攻略教程
2010-03-19 09:55 1231以前多次说过Justhost,国内访问速度非常不错。和有嫌疑的 ... -
成长手删代码40-listbox js操作上下左右移动.txt
2009-08-05 12:03 939<script type ="text/jav ...
相关推荐
在网页设计中,图片轮换效果常常用于展示一组...通过上述步骤,你可以创建一个基本的图片轮换效果,当然,实际应用中可能还需要考虑其他功能,如手动切换、添加导航点、过渡效果等,这都需要进一步扩展JavaScript代码。
// 每隔一段时间自动切换图片 setInterval(switchImage, 3000); // 3秒切换一次 ``` 在这个例子中,我们创建了一个图片数组,然后使用一个定时器每隔3秒钟调用`switchImage`函数,实现图片的自动切换。当图片加载...
在探讨“jsp图片切换代码”的知识点时,我们主要聚焦于如何在JSP(JavaServer Pages)页面中实现图片的自动切换或轮播效果。这段代码示例提供了在JSP环境中实现这一功能的具体方法,涉及了JavaScript、HTML以及CSS的...
在IT领域,图片随机切换是一种常见的网页动态效果,主要用于展示多张图片并让它们以某种随机顺序自动或用户触发地进行切换。这种效果通常通过JavaScript(JS)脚本实现,结合HTML和CSS来完成视觉呈现。现在我们来...
### 图片切换效果代码:HTML图片切换 在探讨图片切换效果代码时,我们主要关注的是如何利用HTML、CSS以及JavaScript来实现动态的图片展示效果,尤其是像幻灯片切换这样的功能。这种效果广泛应用于网站设计中,以...
这段JavaScript代码首先获取了所有的图片元素,然后定义了一个`switchImage`函数,该函数会隐藏所有图片并显示当前索引的图片。`currentIndex`变量用于跟踪当前显示的是哪张图片,每次调用`switchImage`时,它都会...
五屏切换则是指图片轮换的效果中包含五张图片,每张图片在展示一段时间后自动切换到下一张。 在描述中提到的"XP按钮风格",指的是借鉴了Windows XP系统中按钮的样式,这可能涉及到CSS样式的设计,包括边框、阴影、...
"焦点图片轮换代码"就是实现这一功能的编程代码,它可以自动化地在网页上交替显示一组图片,每过一段时间自动切换到下一张,为用户提供动态且引人入目的体验。 焦点图片轮换代码通常由HTML、CSS和JavaScript三部分...
以下是一个基本的JavaScript示例,每隔一段时间更换图片: ```javascript var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("slide"); for (i...
在网页设计中,图片切换效果是一种常见的交互设计手法,它能吸引用户注意力并提供动态的视觉体验。本教程将深入探讨如何使用CSS和jQuery来实现一个实用的图片切换功能。 首先,我们需要理解CSS(层叠样式表)的作用...
"jQuery旅游网站带标题的焦点图片切换代码"就是一个实现这种效果的技术方案,旨在为用户提供一种动态且引人入胜的浏览体验。jQuery作为一个轻量级、高性能的JavaScript库,提供了丰富的API和插件,使得实现这种功能...
在这个主题中,“jQuery 带标题的焦点图片轮播切换代码”涉及到如何利用 jQuery 实现一个具有标题功能的图片轮播效果。 首先,我们需要理解基本的 HTML 结构,这通常包括一个容器元素来承载轮播,每个图片和对应的...
这段代码首先获取所有图片元素,然后定义一个变量记录当前显示的图片索引。`switchImage`函数负责切换图片,移除所有图片的`active`类,然后将当前索引对应的图片添加`active`类以显示。最后,使用`setInterval`定时...
JavaScript图片轮换是一种常见的网页动态效果,用于展示一组图片并自动进行切换,为用户提供更丰富的视觉体验。在网页设计和开发中,JavaScript结合jQuery库可以非常方便地实现这一功能。以下将详细介绍如何利用...
2. **定时器**:为了实现自动轮换,JavaScript代码会设置一个定时器,每隔一段时间自动切换到下一张图片。这通常通过修改图片的CSS样式(如display属性)来实现。 3. **事件处理**:除了自动轮换,代码还会监听用户...
在网页设计中,图片轮换是一种常见的视觉效果,用于展示多张图片并自动切换,以增加网站的吸引力和用户体验。本篇文章将详细讲解如何利用CSS、JavaScript和HTML实现一个实用的图片轮换功能。 首先,我们需要创建...
这个"简单的易修改javascript图片切换代码"提供了实现这一效果的基础框架,帮助开发者理解图片切换的原理并根据实际需求进行定制。 首先,我们需要了解JavaScript的基本语法,它是Web开发中的客户端脚本语言,可以...
在本文中,我们将深入探讨如何使用ACTIONSCRIPT(AS)来创建一个基于FLASH的图片轮换广告。这个项目的核心代码展示了如何实现一个常见的网络广告效果,即动态地展示一系列图片并平滑地过渡到下一张。这不仅对于网页...
通过设置定时器,每隔一段时间就改变图片的可见性或位置,从而达到轮换显示的效果。以下是一个简单的图片轮换显示的步骤: 1. **HTML结构**:首先,在HTML中,我们需要创建一个`div`元素作为图片容器,并将所有图片...
下面我们将深入探讨如何使用JavaScript编写图片切换代码,以及其中涉及的关键知识点。 首先,我们需要了解HTML结构,它是页面的基础,包含图片元素。例如,我们可以有多个图片元素,通过CSS隐藏除了第一个之外的...