纯javascript 幻灯片

效果描述：就是图片变换，鼠标悬浮停滞，移开继续变换，图片带连接。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script>
    var links = new Array();                    //修改点1: 设置多少个链接 与下面的图片个数对应
    links[1] = "http://blog.kpa7.net";  //广告图1 对应的超链接
    links[2] = "http://blog.kpa7.net";  //广告图2 对应的超链接
    links[3] = "http://blog.kpa7.net";  //广告图3 对应的超链接
    links[4] = "http://blog.kpa7.net";  //广告图4 对应的超链接

    var imgs = new Array();                                                      //修改点2: 设置图片个数
    for(var n = 1; n <= 5; n++) imgs[n] = new Image();
    imgs[1].src = "images/1.jpg";  //广告图片1
    imgs[2].src = "images/2.jpg";  //广告图片2
    imgs[3].src = "images/3.jpg";  //广告图片3
    imgs[4].src = "images/4.jpg";  //广告图片4

    var tits = new Array();              //修改点3: 设置标题的个数 与上面的图片个数对应 因扒丢了标题样式 所以此处可忽略
    tits[1] = "广告图片1 标题";       //图片1 标题
    tits[2] = "广告图片2 标题";       //图片2 标题
    tits[3] = "广告图片3 标题";       //图片3 标题
    tits[4] = "广告图片4 标题";       //图片4 标题

    //修改点3: 设置图片显示的高度
    var imgwidth = 133;               //图片宽度
    var imgheight = 200;              //图片宽度
    var str = "<style type='text/css'>";
    str += "#imgnv{display:none;position:absolute;bottom:-1px;right:0;height:16px;}#imgnv div{float:left;margin-right:1px;}";
    str += "#imgnv div.on,#imgnv div.off{margin-bottom:1px;width:30px;height:15px;line-height:18px!important;line-height:15px;font-size:9px;text-align:center;cursor:pointer;cursor:hand}";
    str += "#imgnv div.on{background:#CE0609;color:#FFF;font-weight:bold}";
    str += "#imgnv div.off{background:#323232;color:#FFF;text-decoration:none}";
    str += "#titnv{margin-top:3px;color:#000;text-align:center;display:none;}";
    str += "</style>";
    str += "<div style='position:relative'>";
    str += "<div><a id='dlink' href='" + links[1] + "' target='_blank'><img id='dimg' src='" + imgs[1].src + "' border='0' width='" + imgwidth + "' height='"+imgheight+"' style='filter:Alpha(opacity=100)' onmouseover='Pause(true)' onmouseout='Pause(false)'></a></div>";

    //修改点4：循环添加内层div内容以增加个数 与图片个数对应
    str += "<div id='imgnv'><div id='it1' class='on' onmouseover='ImgSwitch(1, true)' onmouseout='Pause(false)'>1</div><div id='it2' class='off' onmouseover='ImgSwitch(2, true)' onmouseout='Pause(false)'>2</div><div id='it3' class='on' onmouseover='ImgSwitch(3, true)' onmouseout='Pause(false)'>3</div><div id='it4' class='off' onmouseover='ImgSwitch(4, true)' onmouseout='Pause(false)'>4</div></div>";
    str += "<div id='titnv'><b>" + tits[1] + "</b></div>";
    str += "</div>";

    document.write(str);
    var oi = document.getElementById("dimg");
    var pause = false;
    var curid = 1;
    var lastid = 1;
    var sw = 1;
    var opacity = 100;
    var speed = 15;
    var delay = (document.all)? 400:700;
    function SetAlpha(){
    if(document.all){
    if(oi.filters && oi.filters.Alpha) oi.filters.Alpha.opacity = opacity;
    }else{
    oi.style.MozOpacity = ((opacity >= 100)? 99:opacity) / 100;
    }
    }
    function ImgSwitch(id, p){
    if(p){
    pause = true;
    opacity = 100;
    SetAlpha();
    }
    oi.src = imgs[id].src;
    document.getElementById("dlink").href = links[id];
    document.getElementById("it" + lastid).className = "off";
    document.getElementById("it" + id).className = "on";
    document.getElementById("titnv").innerHTML = "<b>" + tits[id] + "</b>";
    curid = lastid = id;
    }
    function ScrollImg(){
    if(pause && opacity >= 100) return;
    if(sw == 0){
    opacity += 2;
    if(opacity > delay){ opacity = 100; sw = 1; }
    }
    if(sw == 1){
    opacity -= 3;
    if(opacity < 10){ opacity = 10; sw = 3; }
    }
    SetAlpha();
    if(sw != 3) return;
    sw = 0;
    curid++;

    //修改点5：这里的4也是个数 与图片个数对应
    if(curid > 4) curid = 1;
    ImgSwitch(curid, false);
    }
    function Pause(s){
    pause = s;
    }
    function StartScroll(){
    setInterval(ScrollImg, speed);
    }
    function CheckLoad(){
    if (imgs[1].complete == true && imgs[2].complete == true) {
    clearInterval(checkid);
    setTimeout(StartScroll, 2000);
    }
    }
    var checkid = setInterval(CheckLoad, 10);
    </script>
</body>
</html>

 

posted @ 2013-03-27 09:16  海阔天空XM  阅读(197)  评论(0)    收藏  举报