付宝里面的一个图片滚动改变网页内容,可以单独做图片展示用
演示地址:http://www.corange.cn/demo/3699/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD>
<META charset=gb2312><LINK media=all
href="images/lf-index.css" charset=utf-8 rel=stylesheet>
<META content="MSHTML 6.00.5730.13" name=GENERATOR></HEAD>
<BODY class=blank>
<DIV id=container>
<DIV class=content>
<DIV class=svc>
<DIV class=nav-left><A
href="index.htm#"><EM>1</EM>/2</A> </DIV>
<DIV class=container>
<DIV class=content>
<UL>
<LI class="first current"><A class="svc-payment icon1" hideFocus
href="payment.htm" seed="lf-index-payment"
data-type="svc-04">我要付款</A> </LI>
<LI><A class="svc-gathering icon1" hideFocus
href="gathering.htm" seed="lf-index-gathering"
data-type="svc-03">我要收款</A> </LI>
<LI><A class="svc-weg icon1" hideFocus
href="jiaofei.htm" seed="lf-index-jiaofei"
data-type="svc-01">水电煤</A> </LI>
<LI><A class="svc-tx icon1" hideFocus
href="tongxun.htm" seed="lf-index-tx"
data-type="svc-10">通讯费</A> </LI>
<LI><A class="svc-credit icon1" hideFocus
href="credit.htm" seed="lf-index-credit"
data-type="svc-02">信用卡还款</A> </LI>
<LI><A class="svc-aa icon1" hideFocus
href="aacollect.htm" seed="lf-index-aa"
data-type="svc-08">AA收款</A> </LI>
<LI><A class="svc-donate icon1" hideFocus
href="index.htm" seed="lf-index-donate"
data-type="svc-09">爱心捐赠</A> </LI>
<LI><A class="svc-mobile icon2" hideFocus
href="mobile.htm" seed="lf-index-mobile"
data-type="svc-15">手机费</A> </LI>
<LI><A class="svc-escore icon1" hideFocus
href="escore.htm" seed="lf-index-escore"
data-type="svc-05">担保交易收款</A> </LI>
<LI><A class="svc-rent icon1" hideFocus
href="rent.htm" seed="lf-index-rent"
data-type="svc-06">交房租</A> </LI>
<LI><A class="svc-cashgift icon1" hideFocus
href="cashgift.htm" seed="lf-index-cashgift"
data-type="svc-07">送礼金</A> </LI>
<LI><A class="svc-insurance icon2" hideFocus
href="insurance.htm" seed="lf-index-insurance"
data-type="svc-16">买保险</A> </LI>
<LI><A class="svc-flight icon2" hideFocus
href="flight.htm" seed="lf-index-flight"
data-type="svc-13">买机票</A> </LI>
<LI><A class="svc-hotel icon2" hideFocus
href="hotel.htm" seed="lf-index-hotel"
data-type="svc-11">订酒店</A> </LI>
<LI><A class="svc-game icon2" hideFocus
href="game.htm" seed="lf-index-game"
data-type="svc-14">游戏点卡</A> </LI>
<LI><A class="svc-lottery icon2" hideFocus
href="lottery.htm" seed="lf-index-lottery"
data-type="svc-12">买彩票</A> </LI></UL></DIV></DIV>
<DIV class=nav-right><A
href="index.htm#"><EM>1</EM>/2</A> </DIV></DIV>
<DIV class=svc-content>
<DIV class="item fn-hide" id=svc-01>
<DIV class=exp><A class=btn hideFocus
href="jiaofei.htm"
seed="lf-index-jiaofei-info">立即使用1</A>
</DIV>
</DIV>
<DIV class="item fn-hide" id=svc-02>
<DIV class=exp><A class=btn hideFocus
href="credit.htm"
seed="lf-index-credit-info">立即使用2</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-03>
<DIV class=exp><A class=btn hideFocus
href="gathering.htm"
seed="lf-index-gathering-info">立即使用3</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-04>
<DIV class=exp><A class=btn hideFocus
href="payment.htm"
seed="lf-index-payment-info">立即使用4</A> | <A
href="lifePayment.html" target=_blank>查看演示</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-05>
<DIV class=exp><A class=btn hideFocus
href="escore.htm"
seed="lf-index-escore-info">立即使用5</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-06>
<DIV class=exp><A class=btn hideFocus
href="rent.htm" seed="lf-index-rent-info">立即使用6</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-07>
<DIV class=exp><A class=btn hideFocus
href="cashgift.htm"
seed="lf-index-cashgift-info">立即使用7</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-08>
<DIV class=exp><A class=btn hideFocus
href="aacollect.htm"
seed="lf-index-aa-info">立即使用8</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-09>
<DIV class=exp><A class=btn hideFocus
href=""
seed="lf-index-donate-info">立即使用9</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-10>
<DIV class=exp><A class=btn hideFocus
href="tongxun.htm" seed="lf-index-tx-info">立即使用10</A>
</DIV>
</DIV>
<DIV class="item fn-hide" id=svc-11>
<DIV class=exp><A class=btn hideFocus
href="hotel.htm" seed="lf-index-hotel-info">立即使用11</A>
</DIV>
</DIV>
<DIV class="item fn-hide" id=svc-12>
<DIV class=exp><A class=btn hideFocus
href="lottery.htm"
seed="lf-index-lottery-info">立即使用12</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-13>
<DIV class=exp><A class=btn hideFocus
href="flight.htm"
seed="lf-index-flight-info">立即使用13</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-14>
<DIV class=exp><A class=btn hideFocus
href="game.htm" seed="lf-index-game-info">立即使用</A>
</DIV>
</DIV>
<DIV class="item fn-hide" id=svc-15>
<DIV class=exp><A class=btn hideFocus
href="mobile.htm"
seed="lf-index-mobile-info">立即使用</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-16>
<DIV class=exp><A class=btn hideFocus
href="insurance.htm"
seed="lf-index-insurance-info">立即使用</A> </DIV>
</DIV></DIV>
</DIV></DIV>
<SCRIPT src="images/arale.js" charset=utf-8></SCRIPT>
<SCRIPT>
E.onDOMReady(function(){
//初始化当前产品的内容,默认为全部隐藏
var currentLink = D.query('.svc .content li.current a');
if(currentLink.length >0){
var currentCont = currentLink[0].getAttribute('data-type');
D.removeClass(D.get(currentCont),'fn-hide');
}
//根据icon显示相应的信息
function showinfo(li){
var target = D.getChildren(li)[0].getAttribute('data-type');
D.addClass(D.query('.svc-content .item:not(.fn-hide)'),'fn-hide');
D.removeClass(D.get(target),'fn-hide');
D.removeClass(D.query('.svc .content li.current'),'current');
D.addClass(li,'current');
}
//点击icon显示相应内容
E.on(D.query('.svc .content li'),'mouseover',function(e){
E.preventDefault(e);
showinfo(this);
});
//点击左右的滑动效果
var index = 1;
var end = D.query('.svc .container')[0].offsetWidth;
var content = D.query('.svc .content')[0];
var list = D.query('li',content);
content.style.width = ( list[0].offsetWidth + 7 ) * list.length + 'px';
var left = new YAHOO.util.Anim(content,{left:{to:0}},1,YAHOO.util.Easing.easeOut);
var right = new YAHOO.util.Anim(content,{left:{to:-end}},1,YAHOO.util.Easing.easeOut);
E.on(D.query('.nav-left a'),'click',function(e){
E.preventDefault(e);
if(index == 2){
index = 1;
left.animate();
D.query('.svc em').forEach(function(o){
o.innerHTML = index;
});
showinfo(list[0]);
}
});
E.on(D.query('.nav-right a'),'click',function(e){
E.preventDefault(e);
if(index == 1){
index = 2;
right.animate();
D.query('.svc em').forEach(function(o){
o.innerHTML = index;
});
if(list.length >= 10){ //如果第二排的第一个存在,则选中第一个
showinfo(list[9]);
}
}
});
});
</SCRIPT>
</BODY></HTML>
js和图片等请到演示地址下载