[JavaScript知识库]Jq实现刷新页面更换广告的简单效果

运用场景：

第一次进来页面看到的是随机广告，然后每刷新页面替换一次广告。

思路：

Math.random()生成随机数实现广告的随机，替换广告需用到cookie来记录已经出现过的广告。为保证入驻网页的广告的公平性，最后呈现的效果类似轮播，只不过出现的第一张是随机的。

大致效果：

Html代码：

<div class="box">
        <ul id="adver">
            <li>
                <img src="images/01.jpeg" alt="">
            </li>
            <li>
                <img src="images/02.jpeg" alt="">
            </li>
            <li>
                <img src="images/03.jpeg" alt="">
            </li>
        </ul>
    </div>

css代码：

.box{width: 400px;height: 200px;}
.box li{width: 400px;height: 200px;list-style: none;display: none;}
.box li img{width: 400px;height: 200px;}
.active{display: block !important;}

js代码（有对应场景的注释）：

<script src="jquery.js"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>  
<script>
    // 随机显示
    var randomBanner = function (ele) {
        var length = $(ele).find("li").length, // 广告总共张数
            index = getRandom(ele, length); // 当前该轮到的广告的索引
        $(ele).find("li").eq(index).addClass("active").siblings().removeClass("active"); // 使该索引的广告出现
    };
     //getRandom
     var getRandom = function (i, n) {
        var random = 0;
        var lastrandom = $.cookie("random" + i); // 从cookie获取当前广告索引值
        if (lastrandom) {
            random = parseInt(lastrandom);
            if (random < n - 1) {
                random = random + 1; // 索引值加1，以实现下次刷新出现下一张广告
            } else {
                random = 0; // 广告已经轮完一遍后，从头开始
            }
        } else { // 此情况出现于第一次进页面，cookie中尚未存值，所以索引值为随机
            random = Math.floor(Math.random() * n);
        }
        $.cookie("random" + i,random); // 在cookie记录当前广告索引值
        return random;  // 返回当前索引
    };
    randomBanner("#adver");
</script>

jquery.js和jquery.cookie.js可去官网下载。
拓展：

（1）读取cookie值： $.cookie(‘name’);
（2）读取所有cookie： $.cookie();
（3）删除cookie：
$.removeCookie(‘name’);
// 若写入时使用了属性 (path, domain)，读取也需要使用：
$.removeCookie(‘name’, { path: ‘/’ });
（4）创建cookie并设置cookie的有效时间和有效路径：
$.cookie(‘name’, ‘value’, { expires: 7, path: ‘/’ });