欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

织梦模板

当前位置:织梦模板 > 技术文档 > 程序代码 > 网页底部手机(wap)端网页底部漂浮固定悬浮广告带轮播特效代码
这篇文章主要为大家详细介绍了网页底部手机(wap)端网页底部漂浮固定悬浮广告带轮播特效代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

     这个代码是帮用户做的,感觉还不错因此织梦模板网分享出来给大家:

// 作者:www.ke361.com
// 网址:http://www.ke361.com
// 日期:2019-11-2
// QQ:71260368
// code:网页底部悬浮广告代码,带单独关闭
var fc_fw="800px";  //广告宽度,单位px,如自适应宽度就改为100%;
var fc_fh="100px";    //广告高度,单位px
var fc_fsrc=['http://www.ke361.com/gg/ad1.png','http://www.1357vip.com/ad/ad2.png','http://www.ke361.com/gg/1300ad.png'];//图片地址[个数要和链接个数对应]
var fc_fl=['http://www.ke361.com/','http://www.tao2t.com/','http://www.1357vip.com/'];//图片链接地址[个数要和图片地址个数对应] 
//样式
document.writeln("<style type=\"text/css\">");
document.writeln("*{margin:0;padding:0; list-style:none;}");
document.writeln(".fc_foot{width:100%; position:fixed; bottom:0px; z-index_f:9999;}");
document.writeln(".f_skyf{ width:"+fc_fw+"; height:"+fc_fh+"; margin:0px auto; position:relative; z-index_f:9000; overflow:hidden;}");
document.writeln(".f_skyf ul{position:absolute; left:0; top:0; width:"+fc_fw+"; height:"+fc_fh+";}");
document.writeln(".f_skyf ul li{ width:"+fc_fw+"; height:"+fc_fh+";}");
document.writeln(".f_skyf ol{ position:absolute; right:5px; bottom:10px;}");
document.writeln(".f_skyf ol li{width:15px; height:15px; line-height:15px; dispaly:inline-block;  background:#ddd;border:1px solid #969591;border-radius:50%; 
color:#959490;float:left; margin-left:5px; font-size:10px; text-align:center;cursor:pointer;}");
document.writeln(".f_skyf ul li img{width:"+fc_fw+"; height:"+fc_fh+";}");
document.writeln(".f_skyf ol .on{background:#8F9E9E;color:#fff;}");
document.writeln(".f_skyf .btn_closef{ position:absolute; width:38px; text-align:center; height:16px; line-height:16px; border:1px #bcbcbc solid; background-color:#d3d3d3; 
color:#666666; top:0; right:0; border-bottom-left-radius:6px; font-size:12px;filter:alpha(Opacity=50);-moz-opacity:0.7;opacity: 0.7;}");
document.writeln("</style>");
document.writeln("<div class=\"fc_foot\" id=\"fc_foot\">");
document.writeln("<div class=\"f_skyf\" id=\"f_skyf\">");
document.writeln("<ul id=\"f_str_f\">");
for(var k = 0; k < fc_fsrc.length; k++){
document.writeln("<li><a href=\""+fc_fl[k]+"\" target=\"_blank\"><img src=\""+fc_fsrc[k]+"\" /></a></li>");
}
document.writeln("</ul>");
document.writeln("<ol id=\"flist_f\">");
for(var h = 0; h < fc_fsrc.length; h++){
	if(h==0){
		document.writeln("<li class=\"on\">1</li>");
	}else{
		document.writeln("<li>"+(h+1)+"</li>");
	}
}
document.writeln("</ol>");
document.writeln("<span class=\"btn_closef\" id=\"btn_closef\">关闭X</span>");
document.writeln("</div>");
document.writeln("</div>");
	var f_skyf = document.getElementById('f_skyf'),f_str_f = document.getElementById('f_str_f'),
	flist_f = document.getElementById('flist_f').getElementsByTagName('li'),index_f = 0,time_f = null;
	// 若果有在等待的定时器,则清掉
	if(time_f){
		clearInterval(time_f);
		time_f = null;
	}
	// 自动切换
	time_f = setInterval(autoPlayfoot, 2000);
	// 定义并调用自动播放函数
	function autoPlayfoot(){
		index_f++;
		if(index_f >= flist_f.length){
			index_f = 0;
		}
		changeImg(index_f);
	}
	// 定义图片切换函数
	function changeImg(curindex_f){
		for(var j = 0; j < flist_f.length; j++){
			flist_f[j].className = "";
			//f_skyf.style.top=0;
		}
		// 改变当前显示索引
		flist_f[curindex_f].className = "on";
		f_str_f.style.marginTop = -fc_fh.substring(0,fc_fh.length-2)*curindex_f + "px"; //高度
		index_f = curindex_f;
	}
	// 鼠标划过整个容器时停止自动播放
	f_skyf.onmouseover = function(){
		clearInterval(time_f);
	}
	// 鼠标离开整个容器时继续播放至下一张
	f_skyf.onmouseout = function(){
		time_f = setInterval(autoPlayfoot, 2000);
	}
	
	// 遍历所有数字导航实现划过切换至对应的图片
     for (var i = 0; i < flist_f.length; i++){
		 flist_f[i].id = i;
         flist_f[i].onmouseover = function() {
             clearInterval(time_f);
             changeImg(this.id);
         }
     }
var btn_closef = document.getElementById("btn_closef");
var f_div_f = document.getElementById("fc_foot");
btn_closef.onclick = function(){
	if(f_div_f){
		f_div_f.style.display = "none";
	}
}
以上就是网页底部手机(wap)端网页底部漂浮固定悬浮广告带轮播特效代码的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

上一篇js根据域名判断后跳转到指定网址

下一篇HTML落地页单页面常用刷新页面随机显示一个微信号,并且可以点击复制

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在