纯js点选切换图片

最新推荐文章于 2024-11-16 14:11:26 发布

weixin_33928467

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量183

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/Mr-Joe/archive/2012/06/08/2541269.html

版权

代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        img
        {
            position: absolute;
            left: 50px;
            height: 290px;
            width: 300px;
        }

        #con
        {
            height: 300px;
            width: 400px;
        }

        #prev
        {
            background: url(image/prev.gif) 0 150px no-repeat;
            height: 100%;
            width: 7%;
            margin-top: auto 0;
            float: left;
        }

        #next
        {
            background: url(image/next.gif) 0 150px no-repeat;
            height: 100%;
            width: 7%;
            margin-top: auto 0;
            float: right;
        }

        #prev:hover
        {
            background: url(image/prev.gif) 0 150px no-repeat, rgba(221, 214, 214,0.4);
        }

        #next:hover
        {
            background: url(image/next.gif) 0 150px no-repeat, rgba(221, 214, 214,0.4);
        }
    </style>
</head>
<body>
    <div id="con">
        <div id="prev">上一张</div>
        <img src="images/1-1.png" id="3" />
        <img src="images/1-2.png" id="2" />
        <img src="images/2-1.png" id="1" />
        <div id="next">下一张</div>
    </div>
    <br />
    <div style="height: 100px; width: 100px; position: absolute; border: 1px solid red;"
        onclick="a(this)">
    </div>
    <script type="text/javascript">
        (function () {
            var gao = {
                prev: document.getElementById("prev"),
                next: document.getElementById("next"),
                img: document.getElementsByTagName("img"),
                current: 0,
                direction: 'no',
                count: document.getElementsByTagName("img").length,
                run: function (direction) {
                    if (direction == "next") {
                        if (gao.current < gao.count - 1) {
                            gao.current += 1;
                            gao.go(direction);
                        }
                    }
                    if (direction == "prev") {

                        if (gao.current > 0) {
                            gao.current -= 1;
                            gao.go(direction);
                        }
                    }
                },
                go: function (direction) {
                    if (direction == "prev") {
                        var cu = gao.count - gao.current - 1;
                        gao.img[cu].style.display = "block";
                        var prev = setInterval(function () {
                            if (parseInt(gao.img[cu].currentStyle.left, 10) > 50) {
                                gao.img[cu].style.left = parseInt(gao.img[cu].currentStyle.left, 10) - 10 + "px";
                            }
                            else { clearInterval(prev); }
                        }, 10);
                    }
                    else {
                        //  $("img:eq("+cu+")").animate({ left: '+=349px' }, 600, function () { img.style.display = "none"; });
                        var int = setInterval(function () {
                            var cu = gao.count - gao.current;
                            if (parseInt(gao.img[cu].currentStyle.left, 10) < 350) {
                                gao.img[cu].style.left = parseInt(gao.img[cu].currentStyle.left, 10) + 10 + "px";
                            }
                            else { gao.img[cu].style.display = "none"; clearInterval(int); }
                        }, 10);
                    }
                }
            };
            gao.next.addEventListener("click", function () { gao.run("next"); }, false);
            gao.prev.addEventListener("click", function () { gao.run("prev"); }, false);
        })();
    </script>
</body>
</html>