zoukankan      html  css  js  c++  java
  • 摘自百度的图片切换特效代码

    代码简介:

    来自百度联盟的一款图片切换特效,每幅图片淡入淡出切换,美观大方,修改图片地址、链接地址,说明文字都很方便,代码中有详细注释,推荐使用。

    代码内容:

    View Code
    <html>
    <head>
    <title>摘自百度的图片切换特效代码 - www.webdm.cn</title>
    </head>
    <body>
    <script>
    var links = new Array();
    links[
    1] = "/";
    links[
    2] = "/";
    links[
    3] = "/";
    links[
    4] = "/";
    var imgs = new Array();
    for(var n = 1; n <= 5; n++) imgs[n] = new Image();
    imgs[
    1].src = "http://www.webdm.cn/images/20091006/tongji550.gif";
    imgs[
    2].src = "http://www.webdm.cn/images/20091006/banner071031.jpg";
    imgs[
    3].src = "http://www.webdm.cn/images/20091006/dataunion0711.jpg";
    imgs[
    4].src = "http://www.webdm.cn/images/20091006/umaz13_550.jpg";
    var tits = new Array();
    tits[
    1] ="百度统计";
    tits[
    2] = "联盟杯摄影师大赛";
    tits[
    3] = "百度行业报告";
    tits[
    4] = "联盟志";
    var imgwidth = 550;//图片宽度
    var imgheight = 134;//图片宽度
    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;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>
    ";
    //修改点1:循环添加内层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
    ++;
    //修改点2:这里的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>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!

    </p>

    代码来自:http://www.webdm.cn/webcode/fea9fb89-a960-4861-bad8-66f84244f6c8.html

  • 相关阅读:
    2021.11.22 图书管理系统
    2021.12.2 综合案例建模分析
    78 内核级命令实现示例
    74 键盘驱动程序的完善
    81 文件系统设计与实现(一)
    浮点数在内存中的表示
    75 Shell 任务的实现(上)
    79 硬盘驱动程序设计(上)
    浮点数在内存中的表示
    77 Shell 任务的实现(下)
  • 原文地址:https://www.cnblogs.com/webdm/p/2308591.html
Copyright © 2011-2022 走看看