怎么实现广告切换效果

图片切换，代码很多，如JQUERY，flash结合XML
http://topic.csdn.net/u/20100519/09/525768dd-7ea5-43b5-a177-ad4889a515b0.html

这玩意用JS 就可以实现了,,....
去看看很多方式图片的切换...看自己需要那种..
http://js.alixixi.com/s/switch_1.shtml

这个Blog里面有几个可以满足你的要求
只需要你改图片就行了。。看看吧~
http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html

silverlight 装的人太少了我不用

保存为.html 直接运行就ok<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>picsGlide</title>
<style type="text/css">
body{ font-size:12px; color:#333;}
#picBox{width:610px; height:205px; margin:50px auto; overflow:hidden; position:relative;}
#picBox ul#show_pic{ margin:0; padding:0; list-style:none; height:205px; width:3050px; position:absolute;}
#picBox ul#show_pic li{ float:left; margin:0; padding:0; height:205px;}
#picBox ul#show_pic li img{ display:block;}
#icon_num{ position:absolute; bottom:0px; right:10px;}
#icon_num li{ float:left; background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0;width:15px; height:15px; list-style:none; color:#39F; text-align:center;  cursor:pointer; padding:0; margin:0;margin-right:5px;}
#icon_num li:hover,#icon_num li.active{ background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat 0 0; color:#fff;}
#picBox_top{width:610px; height:205px; margin:50px auto; position:relative; overflow:hidden;}
#picBox_top ul#show_pic_top{ margin:0; padding:0; list-style:none; height:205px; width:610px; position:absolute;}
#picBox_top ul#show_pic_top li{ float:left; margin:0; padding:0; height:205px;}
#picBox_top ul#show_pic_top li img{ display:block;}
#icon_num_top{ position:absolute; bottom:0px; right:10px;}
#icon_num_top li{ float:left; background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0;width:15px; height:15px; list-style:none; color:#39F; text-align:center;  cursor:pointer; padding:0; margin:0;margin-right:5px;}
#icon_num_top li:hover,#icon_num_top li.active{ background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat 0 0; color:#fff;}
</style>
</head>
<body>
<div id="picBox_top">
<ul id="show_pic_top" style="top:0;">
     <li><img src="http://inncache.soso.com/pc/images/manage.jpg" width="610" height="205" alt="" title="" /></li>
        <li><img src="http://inncache.soso.com/pc/images/player.jpg" width="610" height="205" alt="" title="" /></li>
        <li><img src="http://inncache.soso.com/pc/images/py.jpg" width="610" height="205" alt="" title="" /></li>
        <li><img src="http://inncache.soso.com/pc/images/xf.jpg" width="610" height="205" alt="" title="" /></li>
        <li><img src="http://inncache.soso.com/pc/images/TT.jpg" width="610" height="205" alt="" title="" /></li>
    </ul>
    <ul id="icon_num_top">
     <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<script type="text/javascript">
/**
*glide.layerGlide((oEventCont,oSlider,sSingleSize,sec,fSpeed,point);
*@param auto type:bolean 是否自动滑动当值是true的时候为自动滑动
*@param oEventCont type:object 包含事件点击对象的容器
*@param oSlider type:object 滑动对象
*@param sSingleSize type:number 滑动对象里单个元素的尺寸（width或者height）  尺寸是有point 决定
*@param second type:number 自动滑动的延迟时间  单位/秒
*@param fSpeed type:float   速率取值在0.05--1之间当取值是1时  没有滑动效果
*@param point type:string   left or top
*/
var glide =new function(){
function $id(id){return document.getElementById(id);};
this.layerGlide=function(auto,oEventCont,oSlider,sSingleSize,second,fSpeed,point){
  var oSubLi = $id(oEventCont).getElementsByTagName('li');
  var interval,timeout,oslideRange;
  var time=1;
  var speed = fSpeed
  var sum = oSubLi.length;
  var a=0;
  var delay=second * 1000;
  var setValLeft=function(s){
   return function(){
    oslideRange = Math.abs(parseInt($id(oSlider).style[point]));
    $id(oSlider).style[point] =-Math.floor(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';
    if(oslideRange==[(sSingleSize * s)]){
     clearInterval(interval);
     a=s;
    }
   }
  };
  var setValRight=function(s){
   return function(){
    oslideRange = Math.abs(parseInt($id(oSlider).style[point]));
    $id(oSlider).style[point] =-Math.ceil(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';
    if(oslideRange==[(sSingleSize * s)]){
     clearInterval(interval);
     a=s;
    }
   }
  }

  function autoGlide(){
   for(var c=0;c<sum;c++){oSubLi[c].className='';};
   clearTimeout(interval);
   if(a==(parseInt(sum)-1)){
    for(var c=0;c<sum;c++){oSubLi[c].className='';};
    a=0;
    oSubLi[a].className="active";
    interval = setInterval(setValLeft(a),time);
    timeout = setTimeout(autoGlide,delay);
   }else{
    a++;
    oSubLi[a].className="active";
    interval = setInterval(setValRight(a),time);
    timeout = setTimeout(autoGlide,delay);
   }
  }

  if(auto){timeout = setTimeout(autoGlide,delay);};
  for(var i=0;i<sum;i++){
   oSubLi[i].onmouseover = (function(i){
    return function(){
     for(var c=0;c<sum;c++){oSubLi[c].className='';};
     clearTimeout(timeout);
     clearInterval(interval);
     oSubLi[i].className="active";
     if(Math.abs(parseInt($id(oSlider).style[point]))>[(sSingleSize * i)]){
      interval = setInterval(setValLeft(i),time);
      this.onmouseout=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};
     }else if(Math.abs(parseInt($id(oSlider).style[point]))<[(sSingleSize * i)]){
       interval = setInterval(setValRight(i),time);
      this.onmouseout=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};
     }
    }
   })(i)
  }
}
}
glide.layerGlide(true,'icon_num_top','show_pic_top',205,2,0.1,'top');
</script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
<style type="text/css">
.container{
    width:280px;
    height:200px;
    border:1px solid #eee;
    position:relative;
}
#idPicText{
    background:#eee;
    line-height:25px;
    text-align:center;
    font-weight:bold;
    width:282px;
    white-space:nowrap;
    overflow:hidden;
    font-size:12px;
}
#idPicText a{
    text-decoration:none;
    color:#333;
    display:block;
}
#idPicList img{
    cursor:pointer;
    width:65px;
    height:50px;
    filter:alpha(opacity=50);
    -moz-opacity: .5;
    opacity: .5;
    border:0;
    margin:10px;
}
#idPicList img.on{
    filter:alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}#idNum{ position:absolute; right:5px; bottom:5px;}
#idNum li{
    float: left;
    list-style:none;
    color: #fff;
    text-align: center;
    line-height: 16px;
    width: 16px;
    height: 16px;
    font-family: Arial;
    font-size: 12px;
    cursor: pointer;
    margin: 1px;
    border: 1px solid #707070;
    background-color: #060a0b;
}
#idNum li.on{
    line-height: 18px;
    width: 18px;
    height: 18px;
    font-size: 14px;
    border: 0;
    background-color: #ce0609;
    font-weight: bold;
}
</style><script type="text/javascript">
var isIE = (document.all) ? true : false;var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};var Class = {
    create: function() {
        return function() { this.initialize.apply(this, arguments); }
    }
}var Extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
}var Bind = function(object, fun) {
    return function() {
        return fun.apply(object, arguments);
    }
}var Each = function(list, fun){
    for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
//ie only
var RevealTrans = Class.create();
RevealTrans.prototype = {
  initialize: function(container, options) {
    this._img = document.createElement("img");
    this._a = document.createElement("a");

    this._timer = null;//计时器
    this.Index = 0;//显示索引
    this._onIndex = -1;//当前索引

    this.SetOptions(options);

    this.Auto = !!this.options.Auto;
    this.Pause = Math.abs(this.options.Pause);
    this.Duration = Math.abs(this.options.Duration);
    this.Transition = parseInt(this.options.Transition);
    this.List = this.options.List;
    this.onShow = this.options.onShow;

    //初始化显示区域
    this._img.style.visibility = "hidden";//第一次变换时不显示红x图
    this._img.style.width = this._img.style.height = "100%"; this._img.style.border = 0;
    this._img.onmouseover = Bind(this, this.Stop);
    this._img.onmouseout = Bind(this, this.Start);
    isIE && (this._img.style.filter = "revealTrans()");

    this._a.target = "_blank";

    $(container).appendChild(this._a).appendChild(this._img);
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
        Auto:        true,//是否自动切换
        Pause:        1000,//停顿时间(微妙)
        Duration:    1,//变换持续时间(秒)
        Transition:    23,//变换效果(23为随机)
        List:        [],//数据集合,如果这里不设置可以用Add方法添加
        onShow:        function(){}//变换时执行
    };
    Extend(this.options, options || {});
  },
  Start: function() {
    clearTimeout(this._timer);
    //如果没有数据就返回
    if(!this.List.length) return;
    //修正Index
    if(this.Index < 0 || this.Index >= this.List.length){ this.Index = 0; }
    //如果当前索引不是显示索引就设置显示
    if(this._onIndex != this.Index){ this._onIndex = this.Index; this.Show(this.List[this.Index]); }
    //如果要自动切换
    if(this.Auto){
        this._timer = setTimeout(Bind(this, function(){ this.Index++; this.Start(); }), this.Duration * 1000 + this.Pause);
    }
  },
  //显示
  Show: function(list) {
    if(isIE){
        //设置变换参数
        with(this._img.filters.revealTrans){
            Transition = this.Transition; Duration = this.Duration; apply(); play();
        }
    }
    this._img.style.visibility = "";
    //设置图片属性
    this._img.src = list.img; this._img.alt = list.text;
    //设置链接
    !!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");
    //附加函数
    this.onShow();
  },
  //添加变换对象
  Add: function(sIimg, sText, sUrl) {
    this.List.push({ img: sIimg, text: sText, url: sUrl });
  },
  //停止
  Stop: function() {
    clearTimeout(this._timer);
  }
};
</script> </HEAD> <BODY>
  <div id="idShow" class="container">
</div><div id="idPicShow" class="container">
  <ul id="idNum">
  </ul>
</div>
<div id="idPicText"></div>
<div id="idPicList"></div>
</BODY>
<script>
var r = new RevealTrans("idShow");//添加变换对象
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html');
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');r.Start();//////////////////////var rvt = new RevealTrans("idPicShow");//添加变换对象
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html');
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');
var oList = $("idPicList"), oText = $("idPicText"), arrImg = [];var oNum = $("idNum"), arrNum = [];//设置图片列表
Each(rvt.List, function(list, i){
    //图片式
    var img = document.createElement("img");
    img.src = list["img"]; img.alt = list["text"];
    arrImg[i] = img;
    oList.appendChild(img);
    //按钮式
    var li = document.createElement("li");
    li.innerHTML = i + 1;
    arrNum[i] = li;
    oNum.appendChild(li);
    //事件设置
    img.onmouseover = li.onmouseover = function(){ rvt.Auto = false; rvt.Index = i; rvt.Start(); };
    img.onmouseout = li.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };
});//设置图片列表样式文本显示区域
rvt.onShow = function(){
    var i = this.Index, list = this.List[i];
    //图片式
    Each(arrImg, function(o){ o.className = ""; }); arrImg[i].className = "on";
    //按钮式
    Each(arrNum, function(o){ o.className = ""; }); arrNum[i].className = "on";
    //文本区域
    oText.innerHTML = !!list.url ? "<a href='" + list.url + "' target='_blank'>" + list.text + "</a>" : list.text;
}//文本显示区域
oText.onmouseover = function(){ rvt.Auto = false; rvt.Stop(); };
oText.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };rvt.Start();</script></HTML>

能不能都注释下哪里换图片地址哪里改长和宽最好body上面不要设属性
弄好后这个分就给你了

调试易

怎么实现广告切换效果

解决方案 »