Posted on 2007-01-31 00:01
yoyo 閱讀(467)
評(píng)論(0) 編輯 收藏 所屬分類:
ajax
在YUI的官方網(wǎng)站上,有很多顯示圖片幻燈片的demo,我也想試一下，畢竟是只有多練才能進(jìn)一步提高自己的技術(shù),可惜我的css水平十分普通,
。所以啊，十分難看啊
YAHOO.namespace('images')
YAHOO.images.init?=?function()?
{
?//初始化操作,?YAHOO.widget.Slider.getHorizSlider返回的就是一個(gè)拖動(dòng)條,25，為每次拖動(dòng)移動(dòng)的長(zhǎng)度
??slider?=?YAHOO.widget.Slider.getHorizSlider("horizBGDiv",?"horizHandleDiv",?100,?100,25);
?//設(shè)置拖動(dòng)的動(dòng)作
???? slider.onChange?=?YAHOO.images.slideronchange;
??YAHOO.images.setChangeTime(slider);
?
}
YAHOO.images.slideronchange?=?function(offser)?{
???var?img?=?YAHOO.images.getSrc();
???var?imageslider?=??YAHOO.util.Dom.getElementsBy(YAHOO.images.getElementByImg,'img','horizValueDiv')[0]
???????imageslider.src?=????'img/'+?img[offser/25];
???
}
YAHOO.images.getElementByImg?=?function(e)?{
??if(e.tagName?==??'IMG')
???return?true;
}
?/**//**獲取圖片數(shù)據(jù)
??*@?retunr?Array?返回?cái)?shù)組
???*/
YAHOO.images.getSrc?=?function()?{
???var?img?=?['sq1.png','sq2.png','sq3.png'];
???return?img;
}
YAHOO.images.setChangeTime?=?function(slider)?{
?YAHOO.util.Event.POLL_INTERVAL?=?200;
?alert(slider.getValue());
?/**//**
?YAHOO.util.Event.startInterval(?
???function()?{
????slider.setValue(slider.getValue()+25);
???}
?
?)
?**/
}
YAHOO.util.Event.addListener(window,?"load",?YAHOO.images.init);<body>主體
<body>
<div?id="horizWrapper">
????????<div?id="horizValueDiv">
???<img??src="img/sq2.png"?/>
????????????</div>
???
????????<div
?????????????id="horizBGDiv"
?????????????name="horizBGDiv"
??????????>
?????????????<div?id="horizHandleDiv"?><img??src="img/horizSlider.png"></div>?
??????????</div>?
??????????
??????????</div>
</body>?? 這個(gè)東西還不能拿出去見人，好多東西沒有改正好，明天再改正嘛