jQuery刷新不同的图像

时间:2011-12-08 03:10:21

标签: jquery html image

我知道在PHP中,您可以拥有一堆不同的图像,当您离开页面并返回或刷新它时,您会得到不同的图像。是否可以在jQuery中执行此操作?

抱歉,我没有测试代码,我只是不知道从哪里开始

3 个答案:

答案 0 :(得分:1)

是的,这是可能的。

假设你想做客户端的一切,我认为你有两个选择。一种是每次随机显示不同的图片。

其次是存储cookie并根据cookie值显示图像。

答案 1 :(得分:1)

你可以做这样简单的事情

var random = Math.floor(Math.random()*3);

if(random == 0){
    $('#one').show();
}

if(random == 1){
    $('#two').show();
}

if(random == 2){
    $('#three').show();
}

示例http://jsfiddle.net/LBDAw/

(再次单击RUN以查看更改,这与页面重新加载相同,因为这将被称为onLoad)

答案 2 :(得分:1)

如果您想使用cookie方法确保用户永远不会获得相同的两次,我会将您的所有信息都粘贴到json中,如果需要,您可以从ajax请求中获取。

但这对你所需要的东西来说可能太过分了!

示例

    <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">

//JSON with your image data

            var imageJson = {"images": [
        {"imgSrc": "image1.jpg", "imgAlt": "Image one"},
        {"imgSrc": "image2.jpg", "imgAlt": "Image two"},
        {"imgSrc": "image3.jpg", "imgAlt": "Image three"}
                ]
            };

//Wait for dom to load then do our stuff

            $(document).ready(function() {
                moveCookie();
            });

//Name off your cookie      
            var cookieName = "counteuoi1dff";
//Id off your image tag
            var imgId = "img1";

        function moveCookie(){
            if(getCookie(cookieName) != undefined){
                var lastImage = parseInt(getCookie(cookieName));

            if(lastImage > imageJson.images.length-1){
                setCookie(cookieName,0,365);
                lastImage = 0;              
            }
                $("#"+imgId).attr("src",imageJson.images[lastImage].imgSrc);
                $("#"+imgId).attr("alt",imageJson.images[lastImage].imgAlt);

                setCookie(cookieName,lastImage+1,365);              
            }else{
                setCookie(cookieName,1,365);
                lastImage = 1;
            }
        }

//Default cookie functions for javascript dont worry about these

            function setCookie(c_name,value,exdays)
                {
                    var exdate=new Date();
                    exdate.setDate(exdate.getDate() + exdays);
                    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
                    document.cookie=c_name + "=" + c_value;
                }
            function getCookie(c_name)
                {
                    var i,x,y,ARRcookies=document.cookie.split(";");
                        for (i=0;i<ARRcookies.length;i++)
                            {
                                x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
                                y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
                                x=x.replace(/^\s+|\s+$/g,"");
                                if (x==c_name)
                                    {
                                        return unescape(y);
                                    }
                            }
                    }   

        </script>
    </head>
    <body>
        <img src="image1.jpg" alt="Image one" id="img1"/>
    </body>

</html>

关闭它的示例是here,只需保持刷新