js相本
日期：2014-05-16 浏览次数：20420 次
js相册
版本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"/
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
