一个js图片幻灯片问题 附带网站访问量问题

脾气不坏 2010-08-27 11:42:10 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>7</title>

<meta http-equiv="imagetoolbar" content="no">

<style type="text/css">

	html {

		overflow: hidden;

	}

	body {

		position: absolute;

		margin: 0px;

		padding: 0px;

		background: #111;

		width: 100%;

		height: 100%;

	}

	#center {

		position: absolute;

		left: 50%;

		top:  50%;

	}

	#slider {

		position: absolute;

		width: 820px;

		height: 333px;

		left: -430px;

		top: -186px;

		overflow: hidden;

		background: #000;

		border: 20px solid #000;

	}

	#slider .slide {

		position: absolute;

		top: 0px;

		height: 333px;

		width: 500px;

		background: #000;

		overflow: hidden;

		border-left: #000 solid 1px;

		cursor: default;

	}

	#slider .title   {

		color: #F80;

		font-weight: bold;

		font-size: 1.2em;

		margin-right: 1.5em;

		text-decoration: none;

	}

	#slider .backgroundText {

		position: absolute;

		width: 100%;

		height: 100%;

		top: 100%;

		background: #000;

		filter: alpha(opacity=40);

		opacity: 0.4;

	}

	#slider .text {

		position: absolute;

		top: 1%;

		top: 100%;

		color: #FFF;

		font-family: verdana, arial, Helvetica, sans-serif;

		font-size: 0.9em;

		text-align: justify;

		width: 470px;

		left: 10px;

	}

	#slider .diapo {

		position: absolute;

		filter: alpha(opacity=100);

		opacity: 1;

		visibility: hidden;

	}

</style>



<script type="text/javascript">

/* ==== slider nameSpace ==== */

var slider = function() {

	/* ==== private methods ==== */

	function getElementsByClass(object, tag, className) {

		var o = object.getElementsByTagName(tag);

		for ( var i = 0, n = o.length, ret = []; i < n; i++) {

			if (o[i].className == className) ret.push(o[i]);

		}

		if (ret.length == 1) ret = ret[0];

		return ret;

	}

	function setOpacity (obj,o) {

		if (obj.filters) obj.filters.alpha.opacity = Math.round(o);

		else obj.style.opacity = o / 100;

	}

	/* ==== Slider Constructor ==== */

	function Slider(oCont, speed, iW, iH, oP) {

		this.slides = [];

		this.over   = false;

		this.S      = this.S0 = speed;

		this.iW     = iW;

		this.iH     = iH;

		this.oP     = oP;

		this.oc     = document.getElementById(oCont);

		this.frm    = getElementsByClass(this.oc, 'div', 'slide');

		this.NF     = this.frm.length;

		this.resize();

		for (var i = 0; i < this.NF; i++) {

			this.slides[i] = new Slide(this, i);

		}

		this.oc.parent = this;

		this.view      = this.slides[0];

		this.Z         = this.mx;

		/* ==== on mouse out event ==== */

		this.oc.onmouseout = function () {

			this.parent.mouseout();

			return false;

		}

	}

	Slider.prototype = {

		/* ==== animation loop ==== */

		run : function () {

			this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5;

			this.view.calc();

			var i = this.NF;

			while (i--) this.slides[i].move();

		},

		/* ==== resize  ==== */

		resize : function () {

			this.wh = this.oc.clientWidth;

			this.ht = this.oc.clientHeight;

			this.wr = this.wh * this.iW;

			this.r  = this.ht / this.wr;

			this.mx = this.wh / this.NF;

			this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);

		},

		/* ==== rest  ==== */

		mouseout : function () {

			this.over      = false;

			setOpacity(this.view.img, this.oP);

		}

	}

	/* ==== Slide Constructor ==== */

	Slide = function (parent, N) {

		this.parent = parent;

		this.N      = N;

		this.x0     = this.x1 = N * parent.mx;

		this.v      = 0;

		this.loaded = false;

		this.cpt    = 0;

		this.start  = new Date();

		this.obj    = parent.frm[N];

		this.txt    = getElementsByClass(this.obj, 'div', 'text');

		this.img    = getElementsByClass(this.obj, 'img', 'diapo');

		this.bkg    = document.createElement('div');

		this.bkg.className = 'backgroundText';

		this.obj.insertBefore(this.bkg, this.txt);

		if (N == 0) this.obj.style.borderLeft = 'none';

		this.obj.style.left = Math.floor(this.x0) + 'px';

		setOpacity(this.img, parent.oP);

		/* ==== mouse events ==== */

		this.obj.parent = this;

		this.obj.onmouseover = function() {

			this.parent.over();

			return false;

		}

	}

	Slide.prototype = {

		/* ==== target positions ==== */

		calc : function() {

			var that = this.parent;

			// left slides

			for (var i = 0; i <= this.N; i++) {

				that.slides[i].x1 = i * that.Z;

			}

			// right slides

			for (var i = this.N + 1; i < that.NF; i++) {

				that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;

			}

		},

		/* ==== HTML animation : move slides ==== */

		move : function() {

			var that = this.parent;

			var s = (this.x1 - this.x0) / that.S;

			/* ==== lateral slide ==== */

			if (this.N && Math.abs(s) > .5) {

				this.obj.style.left = Math.floor(this.x0 += s) + 'px';

			}

			/* ==== vertical text ==== */

			var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0;

			if (Math.abs(v - this.v) > .5) {

				this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';

				this.v = v;

				this.cpt++;

			} else {

				if (!this.pro) {

					/* ==== adjust speed ==== */

					this.pro = true;

					var tps = new Date() - this.start;

					if(this.cpt > 1) {

						that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0);

					}

				}

			}

			if (!this.loaded) {

				if (this.img.complete) {

					this.img.style.visibility = 'visible';

					this.loaded = true;

				}

			}

		},

		/* ==== light ==== */

		over : function () {

			this.parent.resize();

			this.parent.over = true;

			setOpacity(this.parent.view.img, this.parent.oP);

			this.parent.view = this;

			this.start = new Date();

			this.cpt = 0;

			this.pro = false;

			this.calc();

			setOpacity(this.img, 100);

		}

	}

	/* ==== public method - script initialization ==== */

	return {

		init : function() {

			// create instances of sliders here

			// parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity

			this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 70);

			setInterval("slider.s1.run();", 16);

		}

	}

}();



</script>

</head>



<body>

<div id="center">

	<div id="slider">

		<div class="slide">

			<img class="diapo" src="sf10.jpg" alt="">

			<div class="text">

				  <span class="title">The best</span>

				  The offspring of a customized orbiter, O飇ostem arose as the best balanced

				  home for our plans. So we submitted to its conditions.

			</div>

		</div>

		<div class="slide">

			<img class="diapo" src="sf14.jpg" alt="">

			<div class="text">

				<span class="title">Prototype</span>

				O飇ostem's deep impulse flow is selectively regulated by a molecule

				originated in the prototype model, that creates its own variational

				principles, as oriented by the first local generation of terminable androids.

			</div>

		</div>

		<div class="slide">

			<img class="diapo" src="sf24.jpg" alt="">

			<div class="text">

				  <span class="title">Has been reduced</span>

				  Paired hosts come out nicely after only two cycles now. Their size has been

				  reduced to a half the original as planned, and indeed they show an

				  evolutionary advantage in the process of fixing self-generated instructions.

				  Plus, they are beautiful.

			</div>

		</div>

	

	</div>

</div>



<script type="text/javascript">

/* ==== start script ==== */

slider.init();

</script>

</body>

</html>



以上为一个幻灯片效果 但是默认的是合并的 图如下 现在我想默认第一张展开 怎么做




令外 觉得上边问题无聊的高手请看下一题 都有分滴 本人原则 来者有份
如何统计网站访问量 不用第三方 好实现吗 关键是解决重复刷新 、后退等问题
...全文
225 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
mfk21 2011-03-26
  • 打赏
  • 举报
 回复
我也正在弄这个，改了一下代码就可以了。以下是需要修改的代码部分
calc : function() {
var that = this.parent;
//alert(that.wh);
// left slides
for (var i = 0; i <= this.N; i++) {
that.slides[i].x1 = i * that.Z;
}
// right slides
for (var i = this.N + 1; i < that.NF; i++) {
//that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;
that.slides[i].x1 = that.wh - (that.NF - i) *35;
}
},

关键是红色的这一行，以前的代码我注掉了，这一行改了就可以，默认就显示第一张图片了。
civilman 2010-08-27
  • 打赏
  • 举报
 回复
统计网站访问量可以建立个基本类,所有页面均继承自该类,这个类里实现统计,这样就不用每个页面都写代码.类里用cookie,ip判别访问,并建立个在线库,没有访问的就认为已离线.
不过我还是建议你用google analytics,方便
尐孑 2010-08-27
  • 打赏
  • 举报
 回复
图片看不到
脾气不坏 2010-08-27
  • 打赏
  • 举报
 回复
还有 我上边的的js代码是可以直接用的 把图片连接改改就行。。。 我其实只是想改下效果
上边的两位 结贴时卡了没看到 没散到分抱歉啊。。。
studentliudong 2010-08-27
  • 打赏
  • 举报
 回复
来学习下
teayear 2010-08-27
  • 打赏
  • 举报
 回复
不是幻灯效果吗？图片是163的效果，在数组中可以设置的吧。
脾气不坏 2010-08-27
  • 打赏
  • 举报
 回复
我每次出的分高 但是回复还没超过15个过。。。
脾气不坏 2010-08-27
  • 打赏
  • 举报
 回复
。。。。结贴。。。给分
脾气不坏 2010-08-27
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 fyq080119 的回复:]

你给我一个有效，我给你发几个供你挑选！！！
[/Quote]
？？？
大漠苍狼woft 2010-08-27
  • 打赏
  • 举报
 回复
你给我一个有效，我给你发几个供你挑选！！！
lixiaoke13 2010-08-27
  • 打赏
  • 举报
 回复
统计网站访问量可以建立个基本类,所有页面均继承自该类,这个类里实现统计,这样就不用每个页面都写代码.类里用cookie,ip判别访问,并建立个在线库,没有访问的就认为已离线.
不过我还是建议你用google analytics,方便
porschev 2010-08-27
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 wuyq11 的回复:]
http://www.open-open.com/ajax/Image.htm
[/Quote]

好东西。。。
wuyq11 2010-08-27
  • 打赏
  • 举报
 回复
http://www.open-open.com/ajax/Image.htm
随风落梦 2010-08-27
  • 打赏
  • 举报
 回复
进来学习看看
脾气不坏 2010-08-27
  • 打赏
  • 举报
 回复
http://photo.163.com/awayy1432/big/#aid=129897770&id=6346860373
图片地址
wuyq11 2010-08-27
  • 打赏
  • 举报
 回复
图片看不到。，什么错误
记录访问日志，iframe嵌入页面
使用AJAX记录数据
JQuery插件使用技巧(抽奖,百叶窗,幻灯片,图片查看器,图片筛选)
讲解JQuery一些常用实用的插件，包含(抽奖,百叶窗,幻灯片,图片查看器,图片筛选)
Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
    前言： 　　如果你已经厌倦了使用PPT设置路径、设置时间、设置动画方式来制作动画特效、那么Impress.js将是你一个非常好的选择。 　　用它制作的PPT将更加直观、效果也是嗷嗷美观的。 　　当然，如果用它来装X，是需要付出一些代价的，不过如果你是一个前端爱好者，理解HTML/CSS，那么就没什么问题了。 　　看看网上的实例，动手练习练习，分分钟就能上手了。   ...
5个JavaScript 轮播库
5个JavaScript 轮播库 1、Swiper（最好用） Swiper 是一款免费的移动端触摸轮播库，具有硬件加速过渡和令人难以置信的原生行为。 它专为移动网站、移动网络应用和原生 / 混合移动应用而设计。Swiper 并非与所有平台兼容；它是专为现代应用程序和平台设计的现代触摸滑块，可提供最佳体验和简单性。 安装 npm i swiper 特征 完全导航控制。 双向控制。 过渡效果。 弹性盒布局。 多行幻灯片布局。 2、Glidesjs/Glides 这是一个无依赖的 JavaScrip
jquery.zSlide.js-基于CSS3/HTML5演示文档jQuery插件
一、卖的什么葫芦药？ jquery.zSlide.js是我最近折腾的一个jQuery插件，借助于CSS3和HTML5的一些新特性，在浏览器中实现类似于powerpoint幻灯片展示。 如果你看到这段文字，说明您正使用RSS阅读或转自《一棵树-博客园》，原文地址：http://www.cnblogs.com/atree/archive/2012/02/17/jquery-zSlide-js-CS...
5 个 JavaScript 轮播库
英文 |https://javascript.plainenglish.io/top-5-javascript-carousel-libraries-ef51375aba2d翻译 | 小...
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章