Posted on 2007-01-31 00:01
yoyo 阅读(455)
评论(0) 编辑 收藏 所属分类:
ajax
在YUI的官方网站上,有很多显示图片幻灯片的demo,我也想试一下，毕竟是只有多练才能进一步提高自己的技术,可惜我的css水平十分普通,
。所以啊，十分难看啊
YAHOO.namespace('images')
YAHOO.images.init = function() 
{
//初始化操作, YAHOO.widget.Slider.getHorizSlider返回的就是一个拖动条,25，为每次拖动移动的长度
slider = YAHOO.widget.Slider.getHorizSlider("horizBGDiv", "horizHandleDiv", 100, 100,25);
//设置拖动的动作
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;
}
/**//**获取图片数据
*@ retunr Array 返回数组
*/
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> 这个东西还不能拿出去见人，好多东西没有改正好，明天再改正嘛