js相册

dream_ait

浏览: 154411 次
性别:
来自: 株洲

最近访客更多访客>>

hf95248

gjp014

xuxu17173

ketity

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

HTML

版本1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>图片滚动</title>
  <script type="text/javascript" src="../jquery-1.2.6.pack.js"></script>
  <script type="text/javascript">
	   var cur =0 ; 
	   $(function(){
			$("li").bind("mouseover",function(o){
						  var v =-(cur=this.innerHTML*1-1)*170 ;
						  $("#scrollContent").stop().animate({"top":v},450);
						  $("li").css({"color":"#EC5604","background":"#F6F6F6"}).eq(cur).css({"color":"white","background":"#EC5604"});;
					});
			
	   });
	    setInterval(function(){$("li").eq(cur).mouseover();cur=cur+1!=5?cur+1:0;},3000);
	   
	   
  </script>
    <style type="text/css">
	#scrollFarme{
		width:490px;
		height:170px;
		overflow:hidden;
		position:relative;
	}
	#scrollContent{
		position:absolute;
	}
	#scrollButton {
		position:absolute;
		right:0;
		top:130px;
	}
	#scrollButton li{
		float:left;
		display:block;
		width:20px;
		height:20px;
		color:#EC5604;
		background:#F6F6F6;
		line-height:20px;
		margin:1px;
		text-align:center;
		font-weight:bold;
	}
	 
  </style>
 </head>
 <body>
   <br/>
   <div id="scrollFarme">
	   <div id="scrollContent">
			<img src="1.jpg" />
			<img src="2.jpg" />
			<img src="3.png" />
			<img src="4.png" />
			<img src="5.jpg" />
		</div>
		<ul id="scrollButton">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
   </div>
    </body>
	
</html>

版本2 基于oop设计
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> scroll </TITLE>
<script type="text/javascript" src="../jquery-1.2.6.pack.js"></script>
<style type="text/css">
	#scrollFarme{
		width:490px;
		height:170px;	
		overflow:hidden;
		position:relative;		 
	}
	#scrollContent{
		position:absolute;		 
	}
	#scrollBtns{
		position:absolute;
		right:2px;
		top:132px;
	}
	#scrollBtns li{
		float:left;
		display:block;
		width:20px;
		height:20px;
		margin:1px;
		text-size:12px;
		text-align:center;
		background:#F6F6F6;
		color:#E27135;
		line-height:22px;
		cursor:pointer;
	}
</style>

<script tyep="text/javascript">
	function Player(btns,scrollContent){
		this.btns=btns;
		this.scrollContent=scrollContent;
		this.cur={index:1};
		this.interval=null;
		for(var k=0;k<this.btns.length;k++) 
			 bindScroll(k);
		var __this=this;
		function bindScroll(j){
			btns[j].onmouseover=function(){
				__this.next(j);
				__this.stop(); 
			}
			btns[j].onmouseout=function(){
				__this.cur.index=(j);
				__this.start();
			}
		}
		this.next(0);
	 }
	Player.prototype={
		start:function(){
			var __this=this;
			this.interval=setInterval(function(){
				 __this.next(__this.cur.index);
				__this.cur.index=(__this.cur.index+1)==__this.btns.length?0:(__this.cur.index+1);
			},2000);
		},
		next:function(i){  
			this.setStyle(this.btns[i]);
			$(this.scrollContent).stop().animate({top:(-i*170)},500);
		},
		stop:function(){
			clearInterval(this.interval);
		},
		setStyle:function(o){
			$(this.btns).css({"color":"#E27135","background":"#F6F6F6","font-weight":""});
			$(o).css({"color":"white","background":"#E27135","font-weight":"bold"});
		}
	}
	$(function(){
		var btns = $("li").get();
		var scrollContent = $("#scrollContent").get(0);
		var player = new Player(btns,scrollContent);
    	player.start();
		 
	});
</script>
</HEAD>

<BODY>
	<div style="margin-left:50px">
	<div id="scrollFarme">
		<div id="scrollContent">
			<img src="1.png"/><img src="2.jpg"/><img src="3.jpg"/><img src="4.jpg"/><img src="5.png"/>
		</div>
		<ul id="scrollBtns">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
   </div>
</BODY>
</HTML>

版本3
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>作业：五张图片轮换广告</TITLE>
<STYLE type="text/css">
.font-scroll{width:15px; text-align:center; padding-top:1px;cursor:hand;border:1 #414141 solid; font-size:9px;line-height:10px;}

</STYLE>
 <SCRIPT language="JavaScript">
                var NowFrame = 1;
				var MaxFrame = 5;
				function scroll1(d1) {
				if(Number(d1)){
				clearTimeout(theTimer);  //当触动按扭时，清除计时器
				NowFrame=d1;                //设当前显示图片
				}
					for(var i=1;i<(MaxFrame+1);i++){
					if(NowFrame==i){
					document.getElementById(NowFrame).style.display='block';   //当前显示图片
					document.getElementById('bg'+NowFrame).color="#ff0000";
					document.getElementById('bg'+NowFrame).style.backgound="red";
					}
					else
					{
					document.getElementById(i).style.display='none';
					document.getElementById('bg'+i).color="#414141";
					}
					}
			       { if(NowFrame == MaxFrame)   //设置下一个显示的图片
					NowFrame = 1;
				   else
					NowFrame++;}
					
					 theTimer=setTimeout('scroll1()', 3000);   //设置定时器，显示下一张图片
				}			
</SCRIPT> 
</HEAD>

<BODY onLoad="scroll1()">
<div style="width:300px; border:1px solid red">
	<DIV>
	<IMG src="a.jpg" id="1" width="300" height="160" style="display:none;">
	<IMG src="b.jpg" id="2"  width="300" height="160" style="display:none;">
	<IMG src="c.jpg" id="3"  width="300" height="160" style="display:none;">
	<IMG src="d.jpg" id="4"  width="300" height="160" style="display:none;">
	<IMG src="a.jpg" id="5"  width="300" height="160" style="display:none;">
	<DIV style="position:relative;float:right;z-index:2;margin-top:-15px"> 
		<FONT class="font-scroll" id="bg1"><SPAN onMouseMove="scroll1(1)">1</SPAN></FONT>
		<FONT class="font-scroll"id="bg2"><SPAN onMouseMove="scroll1(2)">2</SPAN></FONT> 
		<FONT class="font-scroll"id="bg3"><SPAN onMouseMove="scroll1(3)">3</SPAN></FONT>
		<FONT class="font-scroll"id="bg4"><SPAN onMouseMove="scroll1(4)">4</SPAN></FONT>
		<FONT class="font-scroll"id="bg5"><SPAN onMouseMove="scroll1(5)">5</SPAN></FONT>
		</DIV>
	</DIV>
</div>


</BODY>
</HTML>

分享到：

jQuery同步 | Java 邮件发送

2011-01-05 10:30
浏览 893
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js相册

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js相册

评论

发表评论

相关推荐

extjs的几个技巧,解决ajax请求时用户session超时问题

jQuery Easyui Datagrid相同连续列合并扩展

easyui tree 模仿ztree 使用扁平化加载json

js 取年月日与年月日加减

document.documentElement & e.srcElement &e.target

session ajax超时问题处理方案

取浏览器版本

变态的时间控件代码

可输入的下拉框

formValidator ajax 乱码问题

跨浏览器的CSS固定定位{position:fixed}

文件上传之图片预览

js 的event 个人总结

jQuery cookie 插件

jQuery 图片懒加载技术

动态加入一段script的引用

js 表格排序

火狐与IE中 JS的区别

正则表达式

js 提示框

最近访客更多访客>>