类淘宝广告轮显

用JQuery写的一个广告轮显类：

调用方法：

  var oAd, param;
  var param = {linkNum: 2, //连接数
      width: 320, //广告的宽
      height: 240 //广告的高
      };
  oAd  = new adrotate("ad", param);

//XML文件调用方式
  oAd.loadFXML("xml/adrotate.xml");

 

//JSON格式调用

 var images = {
     1:{name:'11111', src:'images/1.jpg', linkUrl:'www.jinbaoglass.cn'},
     2:{name:'33333', src:'images/2.jpg', linkUrl:'www.jinbaoglass.cn'},
     3:{name:'33333', src:'images/3.jpg', linkUrl:'www.jinbaoglass.cn'}
 };

oAd.loadFJSON(images);

 

JS类（ad.js）：

// JavaScript Document /* * 广告轮显类 * CREATE TIME: 12/7/2009 * AUTHOR: DAKER.W * @param JSON options:{linkNum, width; height} * @param int linkNum 连接数 * @param int width 显示的宽 * @param int height 显示的高 * return ad object */ function adrotate(element, options){ this.element = element; this.options = options; this.linkNum = this.options.linkNum; this.width = this.options.width + 'px'; this.height = this.options.height + 'px'; this.oAd = $("div#"+this.element); //广告根节点 this.oAd.css({"width":this.width, "height": this.height}); //设定高和宽 var html = '<ul class="slider" ></ul><ul class="num"></ul>'; this.oAd.append(html); oSlider = $("ul.slider"); //滑块节点 oNum = $("ul.num"); //链接节点 //向链接节点中插入链接块 var img, linkBox; for(var i = 1; i <= this.linkNum; i++){ linkBox = '<li>'+ i +'</li>'; img = '<li><a href=""><img src="" width="'+ this.width +'" height="'+ this.height +'" /></a></li>'; oSlider.append(img); oNum.append(linkBox); } } adrotate.prototype = { //动画效果函数 runRotate: function(){ var len = $("ul.num > li").length; var index = 0; var adTimer; var oAd = this.oAd; $("ul.num li").mouseover(function(){ index = $("ul.num li").index(this); showImg(index); }).eq(0).mouseover(); this.oAd.hover(function(){ clearInterval(adTimer); }, function(){ adTimer = setInterval(function(){ showImg(index); index++; if(index==len){index=0;} }, 2000//停留时间单位MS ); }).trigger("mouseleave"); function showImg(index){ var adHeight = oAd.height(); $("ul.slider").stop(true,false).animate({top : -adHeight*index},1000); //$("ul.slider").stop(true,false).fadeIn("slow"); $("ul.num li").removeClass("on").eq(index).addClass("on"); } }, //从JSON加载图片 loadFJSON: function(images){ var data, name, src, linkUrl, i, width, height; i = 0; width = this.width.toString(); height = this.height.toString(); for(key in images){ data = images[key]; name = data.name; src = data.src; linkUrl = data.linkUrl; $("ul.slider li").eq(i).children("a").attr("href", linkUrl); $("ul.slider li").eq(i).children("a").children("img").attr({src:src, alt:name}); i++; } this.runRotate(); }, //从xml文件加载图片 loadFXML: function(XMLUrl){ var images = []; var options = { async: false, cache: false, //是否从缓存中加载数据 url: XMLUrl, timeout: 3000, dataFilter: function(data, type){return data;}, dataType: "xml", error: function(oXML){ alert("loading xml failfure"); }, success: function(oXML){//oXML 返回的XML对象 var id, name, intor, src, linkUrl, image; $(oXML).find("item").each(function(){ id = $(this).attr("id"); name = $(this).find("name").text() || ''; intor = $(this).find("intor").text() || ''; src = $(this).find("src").text(); linkUrl = $(this).find("linkUrl").text(); image = {id:id, name:name, intor:intor, src:src, linkUrl:linkUrl}; images.push(image); }); } }; $.ajax(options); this.loadFJSON(images); }, //从后台（PHP）加载图片 loadFAJAX: function(ajaxUrl){} };

XML文件格式(adrotate.xml):

<?xml version="1.0" encoding="utf-8"?> <ad> <item id="1"> <name>5555</name> <intor>5555</intor> <src>images/1.jpg</src> <linkUrl>www.jinbaoglass.cn</linkUrl> </item> <item id="2"> <name>5555</name> <intor>5555</intor> <src>images/2.jpg</src> <linkUrl>www.jinbaoglass.cn</linkUrl> </item> <item id="3"> <name>5555</name> <intor>5555</intor> <src>images/2.jpg</src> <linkUrl>www.jinbaoglass.cn</linkUrl> </item> </ad>

CSS文件：

@charset "utf-8"; /* CSS Document */ ul a{ color:#F60; text-decoration:none; } ul a:hover{ color:#930; text-decoration:underline; } ul,li{ list-style:none; } div#ad { margin-bottom:10px; overflow:hidden; position:relative; } ul.slider, .num{ position:absolute; } ul.slider li{ list-style:none; display:inline; } ul.slider img{ border:none; display:block; } ul.num{ right:5px; bottom:5px; } ul.num li{ float: left; color: #FF7300; text-align: center; line-height: 16px; width: 16px; height: 16px; font-family: Arial; font-size: 12px; cursor: pointer; overflow: hidden; margin: 3px 1px; border: 1px solid #FF7300; background-color: #fff; } ul.num li.on{ color: #fff; line-height: 21px; width: 21px; height: 21px; font-size: 16px; margin: 0 1px; border: 0; background-color: #FF7300; font-weight: bold; }