Posted on 2007-01-31 00:01
yoyo 阅读(464)
评论(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> 这个东西还不能拿出去见人,好多东西没有改正好,明天再改正嘛