简易图片切换 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #left {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            left: 20%;
            cursor: pointer;
        }

        #right {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            right: 20%;
            cursor: pointer;
        }

        #img_box {
            width: 50%;
            display: block;
            margin: auto auto;
            border: 1px solid #e0e0e0;
        }

        #append {
            display: block;
            margin-left: auto;
            margin-right: auto;
            max-height: 100%;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var img_box = document.getElementById("img_box");
            var h = document.body.offsetHeight;
            img_box.style.height = (h * 4) / 5 + "px";

            document.getElementById("left").onclick = function () {
                //阻止事件冒泡
                var e = event || window.event;
                e.stopPropagation();
                //设定变量
                var dcp = "dcp/", dzfy = "dzfy/", jpg = ".jpg", a, b, c;
                //获取放置图片的img里的图片路径
                var src = document.getElementById("append").getAttribute("src");
                //截取路径的前三位
                a = src.substr(0, 3);
                //判断
                if (a == "dcp") {
                    //将路径以"/"为界分为两个一维数组
                    b = src.split('/');
                    //给b赋值序号为1的第二个一维数组
                    b = b[1];
                    //把数组里的".jpg"替换成空（即"1.jpg"变为"1"）
                    b = b.replace('.jpg', '');
                    //将string类型转换为int类型
                    b = parseInt(b);
                    //判断
                    if (b == 1) {
                        c = 52;
                    } else {
                        c = b - 1;
                    }
                    //重新给id为append的img标签赋予新的图片路径
                    document.getElementById("append").setAttribute("src", dcp + c + jpg);
                }
            }
            document.getElementById("right").onclick = function () {
                //阻止事件冒泡
                var e = event || window.event;
                e.stopPropagation();
                //设定变量
                var dcp = "dcp/", dzfy = "dzfy/", jpg = ".jpg", a, b, c;
                //获取放置图片的img里的图片路径
                var src = document.getElementById("append").getAttribute("src");
                //截取路径的前三位
                a = src.substr(0, 3);
                //判断
                if (a == "dcp") {
                    //将路径以"/"为界分为两个一维数组
                    b = src.split('/');
                    //给b赋值序号为1的第二个一维数组
                    b = b[1];
                    //把数组里的".jpg"替换成空（即"52.jpg"变为"52"）
                    b = b.replace('.jpg', '');
                    //将string类型转换为int类型
                    b = parseInt(b);
                    //判断
                    if (b == 52) {
                        c = 1;
                    } else {
                        c = b + 1;
                    }
                    //重新给id为append的img标签赋予新的图片路径
                    document.getElementById("append").setAttribute("src", dcp + c + jpg);
                }
            }
        }
    </script>
</head>
<body>
    <img id="left" src="img/left.png" />
    <div id="img_box">
        <img id="append" src="dcp/1.jpg" />
    </div>
    <img id="right" src="img/right.png" />
</body>
</html>

 

posted @ 2017-04-25 10:13  露西&哈特菲利亚  阅读(102)  评论(0)    收藏  举报