分享

图片轮换

 liuyci 2010-11-11
<div class="banner"><script type="text/javascript">   
 var links = new Array();
                links[1] = "http://www.";
                links[2] = "http://www.";
                links[3] = "http://www.";
                links[4] = "http://www.";         
                var imgs = new Array();
                for(var n = 1; n <= 5; n++) imgs[n] = new Image();
                imgs[1].src = "http://www./images/banner/banner1.jpg";
                imgs[2].src = "http://www./images/banner/banner2.gif";
                imgs[3].src = "http://www./images/banner/banner1.jpg";
                imgs[4].src = "http://www./images/banner/banner5.jpg";
                var tits = new Array();
                tits[1] ="重庆华爱";
                tits[2] = "重庆华爱耳鼻喉医院";
                tits[3] = "华爱医院";
                tits[4] = "华爱";
                var imgwidth = 982;//图片宽度
                var imgheight = 250;//图片高度
                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>";
                //修改点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></div>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约