一天只显示一次的JS卷屏广告代码

网上找了一个JS卷屏广告代码,自己修改了两个地方,一是用cookie控制广告时间间隔(比如一天只显示一次,这样刷新页面就不会每次都显示卷屏广告使人烦了,好像也可以用JS写cookie,我不懂,这个是PHP生成的),二是用DOMContentLoaded替换原代码中window.onload来触发JS特效(window.onload需要页面所有资源如图片加载完毕后才会执行JS,可能访客都翻到下页了才开始卷屏,很可能是看到页面向下滚动,却看不到想显示的广告,而DOMContentLoaded可理解为只要HTML代码加载完就能执行了,访客应该能看到广告)。onload和DOMContentLoaded区别可以参考 http://www.cnblogs.com/hh54188/archive/2013/03/01/2939426.html

广告代码演示地址:http://littlebar.tk/app/js-page-roller-ads-php-cookie/js-page-rolling-ads-cookie.php

代码如下:


<!--page roll Ads begin JungleHi 20141128-->
<?php if (!isset($_COOKIE&#91;'showaulolaads'&#93;)): ?>

    <!-- replace this whatever you want to show -->
	
	<script type="text/javascript" language="javascript">
    var time = 500;
    var h = 0;
    function addCount()
    {
        if(time>0)
        {
            time--;
            h = h+5;
        }
        else
        {
            return;
        }
        if(h>500)  //高度
        {
            return;
        }
        document.getElementById("aulolaads").style.display = "";
        document.getElementById("aulolaads").style.height = h+"px";
        setTimeout("addCount()",30); 
    }
    
	
	document.addEventListener("DOMContentLoaded", function showAds()//之前是用window.onload触发的
    {
        addCount();
        setTimeout("noneAds()",4000); //停留时间自己适当调整
    });
    </script>
    
    <script type="text/javascript" language="javascript">
    var T = 260;
    var N = 500; //高度
    function noneAds()
    {
        if(T>0)
        {
            T--;
            N = N-5;
        }
        else
        {
            return;
        }
        if(N<0)
        {
            document.getElementById("aulolaads").style.display = "none";
            return;
        }
        
        document.getElementById("aulolaads").style.height = N+"px";
        setTimeout("noneAds()",30); 
    }
    </script>
	
	<div id="aulolaads" style="margin:auto; display:none; width:900px; top:0px; height:0px; border:solid 1px #000; background-color:#fafafa; overflow:hidden; text-align:center;">
		首次访问显示卷屏广告-大图<br />
		<td width="900" height="280"><a href="#"><img src="Xmas-promotion-topledlight-15k.png" alt="Black Friday Promotion" width="900" height="500"></a></td>
    </div>

    <div style="margin:auto; width:900px; height:auto; border:solid 1px #000; background-color:#fafafa; text-align:center;">
		首次访问显示卷屏广告-横幅(图片是13年给前公司做的)<br />
		<img src="Xmas-promotion.png" alt="Black Friday Promotion" width="900" height="100">
    </div>

    <?php
    setcookie('showaulolaads', true,  time()+60); // 60秒
    ?>

<?php else : ?>

    <div style="margin:auto; width:900px; height:auto; border:solid 1px #000; background-color:#fafafa; text-align:center;">
		再次访问只显示小横幅广告(当前是60秒内不卷屏,之后建议6-12小时)<br />
		<img src="Xmas-promotion.png" alt="Black Friday Promotion" width="900" height="100">
    </div>
<?php endif; ?>
<!--page roll Ads begin JungleHi 20141128-->	

<hr />
页面代码如下</br >
<?php
    /* some code here */
    
    show_source(__FILE__);    
?>

Add a Comment

Your email address will not be published.