CSS+JS滚动图片功能代码案例解析

发表于 作者 jiukeshuju 
变量属性：

当前位置的标识符

当前移动后的标识符。

海报的高度

变量属性：

当前位置的标识符

当前移动后的标识符。

海报的高度

海报的数量数组

每次滚动的尺寸是多少

取得这个海报的场景div的id

方法：

检查每个海报图中是否在这个数组中

检查海报的滚动方向，是向上还是向下

向下海报图和视窗的滚动

向上海报图和视窗的滚动

向上海报图的滚动效果

向下海报图的滚动效果

自动向上向下滚动


<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;
                //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的高度。
                        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;
                            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) { //如果海报图，相对于视窗位置为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>

发表评论

邮箱地址不会被公开。