CSS+JS原生滚动图片功能代码分析

发表于 作者 jiukeshuju
<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>
                                                        <!– 数字123 –>
                                                        <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)
            //  checkloaded[1] = 1;  checkloaded[2] = 1;  checkloaded[3] = 1;
            //  alert(checkloaded);
            //  alert(“正在下载数据,请稍等”);
            //  alert(checkloaded[1]);  alert(checkloaded[2]);  alert(checkloaded[3]);
            function checkdamie(n) {
                checkloaded[n] = 1;
                //alert(checkloaded);
            }
            // 检查滚动的方向。先是向上还是向下。
            //currentF=1  alert(“正在下载数据,请稍等”);
            function alertloading(sdirection) {
                // 视窗的初始位置为0
                scrolling = 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) {
                    // 当是1 1是不动。
                    case 2: //1 != 2    2 === 2
                        //内容向下滚动的像素数 大于等于237的高度。
                        //alert(mainobj.scrollTop);  0,20,40,60-237
                        if (mainobj.scrollTop >= frameheight) { //内容向上滚动的像素数。
                            // 取消定时器
                            clearInterval(inter); //取消定时器的设置
                            // 视窗的到图的值等于237
                            mainobj.scrollTop = frameheight; //内容向上滚动的像素数。
                            // 海报在视窗的位置0
                            scrolling = 0; //滚动 0
                        } else {
                            // 视窗的滚动速度+=20
                            mainobj.scrollTop += speed; //内容向上滚动的像素数。  speed=20
                        }
                        break;
                    case 3:
                        // 如果图相对于视窗位置大于237*2  就是2个海报图的尺寸。
                        if (mainobj.scrollTop >= frameheight * 2) {
                            // 图相对于视窗的位置=237*2
                            mainobj.scrollTop = frameheight * 2;
                            // 取消定时器
                            clearInterval(inter);
                            // 图在视窗的值等于0
                            scrolling = 0;
                        } else {
                            // 图相对于视窗的效果尺寸+=20
                            mainobj.scrollTop += speed;
                        }
                        break;
                }
            }
            // 向上海报图和视窗的滚动
            function scrollup(f) {
                switch (f) {
                    case 1:
                        if (mainobj.scrollTop <= 0) {
                            clearInterval(inter1);
                            mainobj.scrollTop = 0;
                            // 视窗的位置0
                            scrolling = 0;
                        } else {
                            // 视窗的滚动速度-=20
                            mainobj.scrollTop -= speed;
                        }
                        break;
                    case 2:
                        if (mainobj.scrollTop <= frameheight) {
                            mainobj.scrollTop = frameheight;
                            clearInterval(inter1);
                            scrolling = 0;
                        } else {
                            mainobj.scrollTop -= speed;
                        }
                        break;
                }
            }
            // 海报图向下运动
            function slidedown() {
                // 如果当前位置等于3 则不动。
                // 视窗的位置0
                if (scrolling == 0) { //如果海报图，相对于视窗位置为0
                    scrolling = 1; // 海报图，相对于视窗位置变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>

发表评论

邮箱地址不会被公开。