海报轮播案例

作者: jiukeshuju 分类: JAVASCRIPT 发布时间: 2022-03-14 23:13
<HTML>

<HEAD>
    <TITLE>CSS+JS滚动图片功能代码</TITLE>
    <META http-equiv=Content-type content="text/html; charset=gb2312">
    <STYLE type="text/css">
        TD {
            FONT-SIZE: 12px;
            BORDER-RIGHT: medium none;
            PADDING-RIGHT: 0px;
            BORDER-TOP: medium none;
            PADDING-LEFT: 0px;
            PADDING-BOTTOM: 0px;
            MARGIN: 0px;
            BORDER-LEFT: medium none;
            PADDING-TOP: 0px;
            BORDER-BOTTOM: medium none
        }
        
        .NUM1 {
            BACKGROUND-POSITION: left 50%;
            PADDING-LEFT: 10px;
            BACKGROUND-IMAGE: url(scrollad_2.gif);
            COLOR: #006;
            BACKGROUND-REPEAT: no-repeat
        }
        
        .NUM2 {
            BACKGROUND-POSITION: left 50%;
            PADDING-LEFT: 10px;
            BACKGROUND-IMAGE: url(scrollad_3.gif);
            COLOR: #fff;
            BACKGROUND-REPEAT: no-repeat
        }
    </STYLE>
    <META content="MSHTML 6.00.2900.2769" name=GENERATOR>
</HEAD>

<BODY>
    <center>
        <TABLE cellSpacing=0 cellPadding=0 width=750>
            <TBODY>
                <TR>
                    <TD style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 5px; BORDER-LEFT: #cccccc 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: medium none" width=750 bgColor=#e6e6e6>
                        <DIV style="WIDTH: 0px; POSITION: relative; HEIGHT: 0px">
                            <DIV style="Z-INDEX: 10; LEFT: 748px; POSITION: absolute; TOP: -6px; background-color: f4f4f4; layer-background-color: f4f4f4; border: 1px none #000000;">
                                <TABLE cellSpacing=0 cellPadding=0 width=30>
                                    <TBODY>
                                        <TR>
                                            <TD width=30 height=4></TD>
                                        </TR>
                                        <TR>
                                            <TD height=207>
                                                <TABLE cellSpacing=0>
                                                    <TBODY>
                                                        <TR>
                                                            <TD style="PADDING-LEFT: 1px" width=24 height=29>
                                                                <IMG id=upbtn style="CURSOR: pointer" onfocus=this.blur() onclick=slideup();clearInterval(interval01); height=28 alt=UP src="scrollad_1.gif" width=24>
                                                            </TD>
                                                        </TR>
                                                        <TR>
                                                            <TD height=2></TD>
                                                        </TR>
                                                        <TR>
                                                            <TD class=NUM2 id=led1 height=19>1</TD>
                                                        </TR>
                                                        <TR>
                                                            <TD height=2></TD>
                                                        </TR>
                                                        <TR>
                                                            <TD class=NUM1 id=led2 height=19>2</TD>
                                                        </TR>
                                                        <TR>
                                                            <TD height=2></TD>
                                                        </TR>
                                                        <TR>
                                                            <TD class=NUM1 id=led3 height=19>3</TD>
                                                        </TR>
                                                        <TR>
                                                            <TD height=3></TD>
                                                        </TR>
                                                        <TR>
                                                            <TD style="PADDING-LEFT: 1px" height=29>
                                                                <IMG id=downbtn style="CURSOR: pointer" onfocus=this.blur() onclick=slidedown();clearInterval(interval01); height=29 alt=DOWN src="scrollad_4.gif" width=24>
                                                            </TD>
                                                        </TR>
                                                    </TBODY>
                                                </TABLE>
                                            </TD>
                                        </TR>
                                        <TR>
                                            <TD height=6></TD>
                                        </TR>
                                    </TBODY>
                                </TABLE>
                            </DIV>
                        </DIV>
                        <DIV id=main onmouseover=clearInterval(interval01); style="OVERFLOW: hidden; WIDTH: 748px; POSITION: relative; HEIGHT: 237px" onmouseout=iniautoslide(); noWrap>
                            <DIV id=f1 style="Z-INDEX: 10; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 0px; HEIGHT: 237px"><img src="wall1.jpg" width=750 onload=checkdamie(1)></DIV>

                            <DIV id=f2 style="DISPLAY: none; Z-INDEX: 10; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 237px; HEIGHT: 237px"><img src="wall2.jpg" width=750 onload=checkdamie(2)></DIV>
                            <DIV id=f3 style="DISPLAY: none; Z-INDEX: 10; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 474px; HEIGHT: 237px"><img src="wall3.jpg" width=750 onload=checkdamie(3)></DIV>
                        </DIV>
                    </TD>
                </TR>
            </TBODY>
        </TABLE>
        <SCRIPT language=JavaScript>
            //正在发生的。 标识符
            var currentF = 1;
            //默认的时侯是, 取得点击的图片箭头,设置CSS 隐藏 
            document.getElementById("upbtn").style.display = "none";
            //取得轮播图的区域
            var mainobj = document.getElementById("main");
            //轮播高度237
            var frameheight = 237;
            //滚动 0
            var scrolling = 0;
            //速度为20
            var speed = 20;

            //轮播图的数量3 array		
            var checkloaded = new Array(); //[1,2,3]
            // 把123通过for 全部加到空数组中。
            for (i = 1; i <= 3; i++) {
                checkloaded[i] = 0;
            }

            //  checkdamie(1)  checkdamie(2)  checkdamie(3)  
            function checkdamie(n) {
                checkloaded[n] = 1;

            }

            //currentF=1  alert("正在下载数据,请稍等"); 
            function alertloading(sdirection) {
                scrolling = 0; //开始滚动 为0  
                if (sdirection == "down") {
                    currentF--; //1--
                } else {
                    currentF++; //1++
                }
                //alert("正在下载数据,请稍等");
            }

            //这是 1 2 3 向下 向上标 的响应部分
            function scrolldown(f) { //1

                //有向下的滚动条的情况下,向下滚动的距离。
                //var a = document.documentElement.scrollTop;  alert(a);   
                switch (f) {
                    case 2: //1 != 2    2 === 2 
                        if (mainobj.scrollTop >= frameheight) { //内容向上滚动的像素数。
                            clearInterval(inter); //取消定时器的设置
                            mainobj.scrollTop = frameheight; //内容向上滚动的像素数。
                            scrolling = 0; //滚动 0
                        } else {
                            mainobj.scrollTop += speed; //内容向上滚动的像素数。  speed=20
                        }
                        break;
                    case 3:
                        if (mainobj.scrollTop >= frameheight * 2) {
                            mainobj.scrollTop = frameheight * 2;
                            clearInterval(inter);
                            scrolling = 0;
                        } else {
                            mainobj.scrollTop += speed;
                        }
                        break;
                }
            }


            function scrollup(f) {

                switch (f) {
                    case 1:
                        if (mainobj.scrollTop <= 0) {
                            clearInterval(inter1);
                            mainobj.scrollTop = 0;
                            scrolling = 0;
                        } else {
                            mainobj.scrollTop -= speed;
                        }
                        break;
                    case 2:
                        if (mainobj.scrollTop <= frameheight) {
                            mainobj.scrollTop = frameheight;
                            clearInterval(inter1);
                            scrolling = 0;
                        } else {
                            mainobj.scrollTop -= speed;
                        }
                        break;
                }

            }

            function slidedown() {
                if (scrolling == 0) {
                    scrolling = 1;
                    currentF++;
                    obj = eval("document.getElementById('f" + currentF + "')");
                    obj.style.display = "block";
                    if (checkloaded[currentF] == 1) {
                        inter = eval("setInterval('scrolldown(" + currentF + ")',5)");
                        document.getElementById("upbtn").style.display = "";
                        if (currentF == 3) {
                            document.getElementById("downbtn").style.display = "none";
                        }
                        for (i = 1; i <= 3; i++) {
                            eval("document.getElementById('led" + i + "').className='NUM1'");
                        }
                        eval("document.getElementById('led" + currentF + "').className='NUM2'");
                    } else {
                        alertloading("down");

                    }
                }
            }


            function slideup() {
                if (scrolling == 0) {
                    scrolling = 1;
                    currentF--;
                    obj = eval("document.getElementById('f" + currentF + "')");
                    obj.style.display = "block";
                    if (checkloaded[currentF] == 1) {
                        inter1 = eval("setInterval('scrollup(" + currentF + ")',5)");
                        document.getElementById("downbtn").style.display = "";
                        if (currentF == 1) {
                            document.getElementById("upbtn").style.display = "none";
                        }
                        for (i = 1; i <= 3; i++) {
                            eval("document.getElementById('led" + i + "').className='NUM1'");
                        }
                        eval("document.getElementById('led" + currentF + "').className='NUM2'");
                    } else {
                        alertloading("up");
                    }
                }
            }
            var direction = "down";
            var interval01;
            var autotime = 3000;

            function autoslide() {
                if (direction == "down") {
                    if (currentF == 2) {
                        direction = "up";
                    }
                    slidedown();
                }
                if (direction == "up") {
                    if (currentF == 2) {
                        direction = "down";
                    }
                    slideup();
                }

            }

            function iniautoslide() {
                interval01 = setInterval("autoslide()", autotime);
            }
        </SCRIPT>
    </CENTER>
</BODY>

</HTML>

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。