类淘宝广告轮显

用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;}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！