运用场景:
第一次进来页面看到的是随机广告,然后每刷新页面替换一次广告。
思路:
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: ‘/’ });