머라카노? :: [Javascript] - 이미지 슬라이드(Fade In & Fade Out & Prev Next Button)

[Javascript] - 이미지 슬라이드(Fade In & Fade Out & Prev Next Button)

Javascript 2011. 7. 7. 13:23

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
var showHot = false; // don't change this

Picture.push('http://static.naver.com/newscast/2009/1222/0852501700335660.jpg');
Picture.push('http://static.naver.com/newscast/2009/1221/1835271823889298.jpg');
Picture.push('http://static.naver.com/newscast/2009/1221/213324-226167486.jpg');
Picture.push('http://static.naver.com/newscast/2009/1222/113314-599173208.jpg');
Picture.push('http://static.naver.com/newscast/2009/1222/115606-1425167123.jpg');
Picture.push('http://static.naver.com/newscast/2009/1222/0932151805408461.jpg');

var PictureUrl = new Array();
PictureUrl.push('http://www.etnews.co.kr/news/detail.html?portal=001_00001&id=200912210316');
PictureUrl.push('http://www.newdaily.co.kr/html/article/2009/12/21/ARTnhn37976.html');
PictureUrl.push('http://news.kbs.co.kr/special/digital/vod/walwal/2009/12/21/2014525.html');
PictureUrl.push('http://www.segye.com/Articles/SPN/ENTERTAINMENTS/Article.asp?aid=20091222001380&subctg1=&subctg2=');
PictureUrl.push('http://www.ohmynews.com/NWS_Web/View/at_pg.aspx?CNTN_CD=A0001286211&CMPT_CD=P0000');
PictureUrl.push('http://economy.hankooki.com/lpage/entv/200912/e2009122209310794220.htm');

var tss;
var iss;
var jss = 0;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 0; iss<pss+1; iss++)
{
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];
}

function control(how)
{
    if (showHot)
    {
        if (how=='F') jss = jss + 1;
        if (how=='B') jss = jss - 1;
        if (jss > (pss)) jss = 0;
        if (jss < 0) jss = pss;

setPos(jss);
}
}

function setPos(pos)
{
    try
    {
        with(document)
        {
            if (all)
            {
                images.PictureBox.style.cursor = 'pointer';
                images.PictureBox.style.filter = 'blendTrans(duration=2)';
                images.PictureBox.style.filter = 'blendTrans(duration=CrossFadeDuration)';
                images.PictureBox.filters.blendTrans.Apply();
            }

images.PictureBox.src = preLoad[pos].src;

            for(var i=0; i<Picture.length; i++)
            {
                var cig = document.getElementById('CaptionBox'+i);
                if(i==jss)
                {
                    cig.innerHTML = '<strong style="color:blue">'+(i+1)+'</strong>';
                }
                else
                {
                    cig.innerHTML = (i+1);
                }
                setEvent(cig, i);
            }

if (all) images.PictureBox.filters.blendTrans.Play();

            images.PictureBox.onclick= function()
            {
                location = PictureUrl[pos];
            }
        }
    }
    catch (e)
    {
        alert(e);
    }
}

function setEvent(obj, pos)
{
    obj.onclick = function()
    {
        imgLoopContext.imgLoopStop();
        jss = pos;
        setPos(pos);
        imgLoopContext.imgLooping();
    }
}

window.onload = function()
{
jss = parseInt(Math.random()*100)%Picture.length;
setPos(jss);

    showHot = true;
    self.focus();
    imgLoopContext.imgLooping();
    document.images.PictureBox.onmouseover = imgLoopContext.imgLoopStop;
    document.images.PictureBox.onmouseout = imgLoopContext.imgLooping;
}

</script>
</head>
<body>

</body>

</html>

저작자표시

'Javascript' 카테고리의 다른 글

[Javascript] - 이미지 슬라이더(Prev, Next, Auto Play) (5)	2011.07.07
[Javascript] - 이미지 자동 슬라이드(Mouse Over Stop Mouse Down Play) (0)	2011.07.07
[Javascript] - Auto Td Row span (0)	2011.07.07
[Javascript] - Iframe Auto Resize (0)	2011.07.01
[Javascript] - Ajax로 페이지 Call하는법 (0)	2011.06.29

머라카노?

[Javascript] - 이미지 슬라이드(Fade In & Fade Out & Prev Next Button)

'Javascript' 카테고리의 다른 글

티스토리툴바