如何使用jQuery中的缓存以另一种形式显示一种形式的图像

我想以另一种形式显示一种形式的图像。我有两个表格index.html和images.html。在index.html中，

<html>
<head>
    <title> demo </title>   
    <style type="text/css">
        #container{
            height:100%;
            width:100%;
            postion:relative;
        }
        .divclass{
            height:auto;
            width:auto;
            position:relative;
        }
        .divclass #imgdiv1{
            margin-top:30px;
            position:relative;
            height:200px;
            width:200px;
            border:1px solid #000;
        }
    </style>    
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){                                   
            $('#imgdiv1 img').click(function(){         
                var n=$('#imgdiv1 img').length; 
                $('#lightboxdiv').append(' ('+n+')');
            });
        });
    </script>
</head>
<body>
    <div id="#container">
        <div id="lightboxdiv">
            Light Box Images
        </div>
        <div class="divclass">          
            <div id="imgdiv1">
                <img src="001_19_3.jpg" style="width:150px;height:180px;position:absolute;visible:visible;z-index:1;">
                <img src="002_21_3.jpg" style="width:150px;height:180px;position:absolute;visible:hidden;">
                <img src="003_19_3.jpg" style="width:150px;height:180px;position:absolute;visible:hidden;">
                <img src="004_19_3.jpg" style="width:150px;height:180px;position:absolute;visible:hidden;">
            </div>
        </div>
    </div>
</body>
</html>

如果我单击图像，则图像计数将为5。如果我单击计数，则在下一个窗口中的图像。我想获得5个图像并显示图像，图像。html。有人可以帮忙吗？请！

好吧...您可以使用Querystring进行此操作...您的index.html页面看起来像这样..

<html>
<head>
<title></title>
<style type="text/css">
    .cont1
    {
        width:150px;
        height:80px;
        background-color:#bebebe;
    }
    img
    {
        display:none;
    }
    .ch:hover
    {
        cursor:pointer;
        text-decoration:underline;
    }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var count;
        var imgbox = [];
        $('.cont1').click(function () {
            var elem = $(this);
            if ($('.ch').html() == '') {
                count = elem.children('img').length;
                $('.ch').html(count);
                for (i = 0; i < elem.children('img').length; i++) {
                    imgbox.push(elem.children('img').eq(i).attr('src'));
                }
            }
            else {
                count = count + elem.children('img').length;
                $('.ch').html(count);
                for (i = 0; i < elem.children('img').length; i++) {
                    imgbox.push(elem.children('img').eq(i).attr('src'));
                }
            }
            elem.css('border', '2px solid #000');
            elem.unbind('click');
        });
        $('.ch').click(function () {
            window.location = "images.html?allimg=" + imgbox;
        });
     });
    </script>
    </head>
    <body>
    <div class="cont1">Div1
        <img alt="" src="Images/1.jpg" width="100px" height="70px" />
        <img alt="" src="Images/2.jpg" width="100px" height="70px" />
        <img alt="" src="Images/3.jpg" width="100px" height="70px" />
    </div>
    <br />
    <div class="cont1">Div2
        <img alt="" src="Images/1.jpg" width="100px" height="70px" />
        <img alt="" src="Images/2.jpg" width="100px" height="70px" />
        <img alt="" src="Images/3.jpg" width="100px" height="70px" />
        <img alt="" src="Images/3.jpg" width="100px" height="70px" />
    </div>
    <br />
    <div class="cont1">Div3
        <img alt="" src="Images/1.jpg" width="100px" height="70px" />
        <img alt="" src="Images/2.jpg" width="100px" height="70px" />
    </div>
    <br />
    Image Count : &nbsp;&nbsp;<span class="ch"></span>
    </body>
    </html>

和您的images.html看起来像这样..

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var url = window.location.toString();
        var img = url.split('?')[1].split('=')[1];
        var imgcount = img.split(',').length;
        for (i = 0; i < imgcount; i++) {
            $('body').append('<img alt="" src="' + img.split(',')[i] + '" width="200px" height="140px" />&nbsp');
        }
     });
</script>
</head>
<body>
</body>
</html>

说明：我们正在使用3个Divs与其中的图像使用。最初，通过使用CSS属性显示：无。现在，单击DIV后，它检查计数跨度是否为空。如果它为空，它充满了否。单击div中存在的图像。与此同时，我们正在使用数组。数组将填充单击div中所有图像的" SRC"并更改计数号。

或如果计数跨度不是空的，则将添加否。当前单击div中存在的图像，并附加数组中图像的" SRC"，并增加计数编号

和数量单击它会触发单击事件，我们使用window.location =" index2.htm？allimg =" imgbox。在这里，我们使用查询字符串将数组传输到下一页。

现在在images.html页面上在准备就绪的文档上，我们使用$ .split（）将URL分开并在页面上显示图像。

如果您发现任何困难。让我知道..您可以邮寄我 @ amit.kishoreda@gmail.com

相关内容

最新更新

热门标签：