当前位置:首页 > JavaScript > 正文内容

一个跨浏览器通用的JS广告轮显(通用的哦.)

canca18年前 (2007-11-06)JavaScript457
项目需要,无耐做了个通用的。当然无法与CSDN的那个比美。但我这个是通用的。不用写两句JS代码就可以实显广告轮显。
//------------------------------------------------------------
//CopyRight(C)CAnca Software Office.
//Created by CAnca Torvals.
//2007.11.5.
//版权所有,拿来用不究,删版权信息,请自究。
//----------------------------------------------------------
//将以下的JS代码保存到一个文件。
//文件:ad.js
//-------------------------------------------------------
var currentpointer = -1;
var url = "picnews.xml";
String.prototype.Trim = function () {
return this.replace(/(^\s*)|(\s*$)/g, "");
};
var xmlDoc;//判断是否为Firefox或IE
var moz = (typeof document.implementation != "undefined") && (typeof document.implementation.createDocument != "undefined");
var ie = (typeof window.ActiveXObject != "undefined");
function importXML(file) {
if (moz) {
  xmlDoc = document.implementation.createDocument("", "doc", null);
} else {
  if (ie) {
   xmlDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
   xmlDoc.async = false;
   while (xmlDoc.readyState != 4) {
   }
  }
}
xmlDoc.load(file);
}
importXML(url);
//下一幅
function next(){
var max = getMax();
if(++currentpointer > max - 1){
  currentpointer = 0;
}
updateImageNews();
}
//上一幅
function prev(){
if(--currentpointer < 0){
  currentpointer = 0;
}
updateImageNews();
}
­
//更新图片新闻区域.
function updateImageNews(){
if (moz) {
  var news = xmlDoc.getElementsByTagName("imgnews")[currentpointer];
  //------------获取新闻数据---------------------
  var url = news.getElementsByTagName("url")[0].firstChild.nodeValue;
  var target = news.getElementsByTagName("target")[0].firstChild.nodeValue;
  var img = news.getElementsByTagName("img")[0].firstChild.nodeValue;
  var title = news.getElementsByTagName("title")[0].firstChild.nodeValue;
  
  setImageSize(img);
  
  /*赋值*/
  imgobj["src"] = img.Trim();
  urlobj.setAttribute("href",url.Trim());
  urlobj.setAttribute('target',target.Trim());
  urlobj["firstChild"]["nodeValue"] = title.Trim();
}else{
  if(ie){
   var news = xmlDoc.documentElement.selectNodes("imgnews")[currentpointer];
   //------------获取新闻数据---------------------
   var url = news.selectNodes("url")[0].text;
   var target = news.selectNodes("target")[0].text;
   var img = news.selectNodes("img")[0].text;
   var title = news.selectNodes("title")[0].text;
   setImageSize(img);
  
   imgobj.filters.revealtrans.transition =  parseInt(Math.random() * 25);
   imgobj.filters.revealtrans.apply();
   imgobj.filters.revealtrans.play();
  
   /* 赋值*/
   imgobj["src"] = img.Trim();
   urlobj["href"] = url.Trim();
   urlobj["attributes"]["target"]["value"] = target.Trim();
   urlobj["firstChild"]["nodeValue"] = title.Trim();
  }
}
}
//设置图片大小
function setImageSize(imgsrc){
//建造图片对象--缩放图象
var imageobj = new Image();
//加载图片,获得图片大小并设置.
loadingImage(imageobj);
imageobj["src"] = imgsrc.Trim();
}
//加载监听
var loadtimeout;
var loadingImageBag;
function loadingImage(_imgobj){
loadingImageBag = function(){
  loadingImage(_imgobj);
}
if(null == _imgobj){
  return;
}
var width = _imgobj["width"];
var height = _imgobj["height"];
if(width > 0 && height > 0){
  var _image = new myImage(width,height);
  loadtimeout = null;
  fixImageSize(_image);
  _imgobj = null;
  return;
}
loadtimeout = window.setTimeout("loadingImageBag()",200,"javascript");
}
//显示指定新闻图片
function getAppointNews(newsNum){
window.clearTimeout(timeouts);
currentpointer = newsNum;
updateImageNews();
timeouts = window.setTimeout("showbegin()",lazytime,"javascript");
}
­
//默认导航条生成方法
function navigation(newsNumbers,methodName){
var blank = " ";
var content = "";
for(var i = 0 ; i < newsNumbers ; i++){
  var ahref = "<a href=&#92;"javascript:void(0);&#92;" onclick=&#92;"";
  var url = ahref + methodName;
  url += "(";
  url += i;
  url += ");&#92;">";
  url += (i + 1);
  url += "</a>";
  
  url += blank;
  content += url;
  
}
return content;
}
//初始化----------------------------------------------------------------------------
var imgobj,urlobj,fixWidth,fixHeight;
//导航条生成方法
var navigationMethod = navigation;
var navigationContext;
var lazytime = 5 * 1000;
function init(_navigationMethod,_navigationContext,imgname,url,times){
if(null != _navigationMethod && typeof _navigationMethod == "function"){
  navigationMethod = _navigationMethod;
}
if(null != _navigationContext && "" != _navigationContext){
  navigationContext = document.getElementById(_navigationContext)
}
//生成导航.
makeNavigation();
imgobj = document.getElementById(imgname);
urlobj = document.getElementById(url);
fixWidth = imgobj["width"];
fixHeight = imgobj["height"];
if(times != null && typeof times != 'undefined' ){
  lazytime = times * 1000;
}
showbegin();
}
//制造Navigation工厂.
function makeNavigation(){
if(typeof navigationContext == "undefined" || navigationContext == null){
  return ;
}
var max = getMax();
var content = navigationMethod(max,'getAppointNews');
navigationContext.innerHTML = content;
}
//-------------------------------------------------------------------------------------
function fixImageSize(myImageObject){
var picWidth = myImageObject["width"] * 1.0;
var picHeight = myImageObject["height"] * 1.0;
var fixh = fixHeight;
var fixw = fixWidth;
// 按比例计算出缩略图的宽度和高度
if (picWidth >= picHeight) {
  fixh = parseFloat(Math.floor((picHeight * fixWidth) / picWidth));
} else {
  fixw = parseFloat(Math.floor(picWidth * fixHeight / picHeight));
}
­
imgobj["width"] = fixw;
imgobj["height"] = fixh;
}
var timeouts;
function showbegin(){
next();
timeouts = window.setTimeout("showbegin()",lazytime,"javascript");
}
//获取最大值.即新闻个数
function getMax(){
var imgnews;
if(moz){
  imgnews = xmlDoc.getElementsByTagName("imgnews");
}else{
  if(ie){
   imgnews = xmlDoc.documentElement.selectNodes("imgnews");
  }
}
return imgnews.length;
}
//点击图片打开连接
function view(){
var href = urlobj["href"];
if(!urlobj){
  alert("连接对象不能加载!缺少对象.");
  return;
}
­
//如果是JAVAScript.就直接执行.
if(href.indexOf("javascript:") != -1){
  eval(href);
  return;
}
//否则打开窗口
var _target;
if(moz){
  _target = urlobj.getAttribute('target');
}else{
  if(ie){
   _target = urlobj["attributes"]["target"]["value"];
  }
}
­
if(null == _target || "_self" == _target || "" == _target){
  window.location.href = href;
}else{
  window.open(href,_target);
}
}
//image 对象
function myImage(width,height){
this.width = width;
this.height = height;
}
//-------------JS这里结束-------------------------
­
调用方法:
<html>
<!-- 参数说明
      init(_navigationMethod,_navigationContext,imgname,url,times)
      _navigationMethod :导航函数,可以自定义。null 或"" 即表示使用默认方法生成。
      _navigationContext :导航函数存放器ID。如果为NULL或为""即表示不使用导航。
      imgname:图片存放器ID。(必须)
      url:超链接ID。(必须)
      times:多少秒显示下一幅。默认5秒.
-->
<body >
        <a href="" id="urlnews" target="">新闻标题</a></td>
<img src="picnewsbg.gif" id="picnews" class="powerpoint"  width="210" height="200"/>
div align="right" id="newsnav"></div>
</body>
.....
<html>
 
//广告信息
//picnews.xml
//---------------------------
<?xml version='1.0' encoding='gb2312'?>
<imagenews>
 <imgnews>
  <url>http://www.beareyes.com.cn/2/lib/200710/29/536/DSC_0097.jpg</url>
  <target>_blank</target>
  <img>http://www.beareyes.com.cn/2/lib/200710/29/536/DSC_0097.jpg</img>
  <title>广东</title>
 </imgnews>
 <imgnews>
  <url>http://bbs.lupaworld.com/1123517557/Fid_65/65_2646.jpg</url>
  <target>_self</target>
  <img>http://bbs.lupaworld.com/1123517557/Fid_65/65_2646.jpg</img>
  <title>上海</title>
 </imgnews>
 <imgnews>
  <url>http://www.baidu.com</url>
  <target>_self</target>
  <img>http://botu.bokee.com/photodata/2006-7-19/001/502/687/2382111/2382111.jpg</img>
  <title>东莞</title>
 </imgnews>
</imagenews>

扫描二维码推送至手机访问。

版权声明:本文由Ant.Master's Blog发布,如需转载请注明出处。

本文链接:https://iant.work/post/529.html

标签: JavaScript
分享给朋友:

“一个跨浏览器通用的JS广告轮显(通用的哦.)” 的相关文章

《Dom Scripting》读书笔记

  《Dom Scripting》读书笔记 Canca         最近看了一本《Jeremy Keith: DOM Scripting, Web design with JavaScript and the DOM. Apr...

javascript MailTo 邮件技巧

调用email的方法 //<a href="mailto:talantlee@126.com">Email</a>window.location.href="mailto:talantlee@126.com";myform.action="mailto:talant...

javascript IE与FireFox 一些兼容写法

1>获取控件用document.getElementById,不用document.all(FF等浏览器不支持)2><button> 会被firefox解释为提交form或者刷新页面,需要写标准<button type="button">3>使用childN...

Javascript 逻辑表达式

1>逻辑表达式    看例子:     var cc;      var  dd=new Object();      var false1="false...

javascript在IE和Firefox中的兼容考虑

1.document.formName.item("itemName") 问题说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];Firefox下,只能使用docum...

JavaScript 为网页添加快捷键

为网页添加快捷键即为网页添加onkeydown事件。 FireFox里获取键入键的ASCII码与IE获取是有些差别的。因为FF里没有Event对象。 但FF里事件触发方法中默认传送其事件对象。 即我们在JS里写该事件方法时,要多加一个参数。 例: <script type="text/java...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。