Question

我想在点击同一页面和页面中心时放大缩略图，然后再次点击隐藏时只使用window.setinterval和window.clearinterval函数而不是setTimeout，所以我没有继续在动画的每一步调用它。我也不想使用Jquery。

任何人都可以帮助我以及我做错了什么。

到目前为止，我的HTML代码：

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="img.css" />
 <script src="img.js"></script>

</head>

<body>

    <img src="untitled11.png" style="cursor:pointer"
         onclick="showImage(this.src, '1_large.png');" />
    <img src="untitled21.png" style="cursor:pointer"
         onclick="showImage(this.src, '2_large.png');" />
    <img src="untitled31.png" style="cursor:pointer"
         onclick="showImage(this.src, '3_large.png');" />

    <div id="largeImgPanel" onclick="this.style.display='none'">
        <img id="largeImg"
             style="height:100%; margin:0; padding:0;" />
    </div>
</body>
</html>

我的JavaScript（需要帮助）

    smSrc=document.getElementById('largeImg').src;
lgSrc=document.getElementById('largeImg').src;
var myVar;

    function showImage(smSrc, lgSrc) {
    myVar = window.setInterval(showLargeImage(), 1000); }
            unselectAll();


        function showLargeImage() {
           document.getElementById('largeImgPanel').style.display = 'block';

function setTimeout() {
     window.clearInterval(myVar); } 
        }
        function unselectAll() {
            if(document.selection)
                document.selection.empty();
            if(window.getSelection)
                window.getSelection().removeAllRanges();

        }

我的CSS（就像我说的那样希望图像在页面中央放大）

            #largeImgPanel {
            text-align: center;
            display: none;
            position: fixed;
            z-index: 100;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(100,100,100, 0.5);
        }

http://jsfiddle.net/DcRTh/1/ 上面的链接是我的编码，但图像没有显示。但是到目前为止，我可以在我的网站上告诉你，它会显示缩略图，但点击时却没有。

请使用window.setinterval而不是Jquery和setTmeout来帮助我纠正我的javascript，因为我已经在线查看我的问题，但没有找到所需的结果。我是编程的新手，所以我不太好。在此先感谢:)

如何使用window.setinterval和window.clearinterval / No Jquery放大缩略图

0 个答案: