图片的控制显示小问题

<!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=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div class="left1" style="height:210px; float:left; width:328px; border: 1px solid #cccccc; overflow:hidden">
<table width=325 border=0 cellpadding=0 cellspacing=0>
  <tr valign=top>
    <td colspan=3><a onClick="gotoshow()" onMouseOver="tu_ove()" onMouseOut="ou()" style="cursor:hand"><img src="images/ad-01.jpg" width=325 height=190 name="slide" border=0></a></td>
  </tr>
  <tr>
    <td width=229 height="19" align=center bgcolor=#f4f4f4 class="white"><div id=textslide>焦点图标题层</div></td>
    <td width=1 bgcolor=#7C7C7C><div style="position:relative">
      <div style="position:absolute;top:10px">
        <table width=95 border=0 cellpadding=0 cellspacing=0>
          <tr valign=top align=center>
            <td width="19" height="0"><div style="position:relative">
              <div id=xiaotu1 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan1 width=10 height=3 border=0></div>
            </div></td>
            <td width="19" height="0"><div style="position:relative">
              <div id=xiaotu2 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan2 width=10 height=3></div>
            </div></td>
            <td width="19" height="0"><div style="position:relative">
              <div id=xiaotu3 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan3 width=10 height=3></div>
            </div></td>
            <td width="19" height="0"><div style="position:relative">
              <div id=xiaotu4 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan4 width=10 height=3></div>
            </div></td>
            <td width="19" height="0"><div style="position:relative; left: 1px;">
              <div id=xiaotu5 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan5 width=10 height=3></div>
            </div></td>
          </tr>
        </table>
      </div>
    </div></td>
    <td width=95 height="19"><table width=95 border=0 cellpadding=0 cellspacing=0>
      <tr valign=top>
        <td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(0)" onMouseOut="ou()"><img src="images/1.gif" width="19" height="19" border=0></a></td>
        <td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(1)" onMouseOut="ou()"><img src="images/2.gif" width="19" height="19" border=0></a></td>
        <td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(2)" onMouseOut="ou()"><img src="images/3.gif" width="19" height="19" border=0></a></td>
        <td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(3)" onMouseOut="ou()"><img src="images/4.gif" width="19" height="19" border=0></a></td>
        <td width="19" height="19"><a style="cursor:hand" onMouseOver="ove(4)" onMouseOut="ou()"><img src="images/5.gif" width="19" height="19" border=0></a></td>
      </tr>
    </table></td>
  </tr>
</table>
<script language=JavaScript src="js/5adpics.js"></script>
</div>
</body>
</html>这是5adpics.js的代码，图片想要我再发给你
//slideimages数组为变换的图
var slideimages=new Array();
slideimages[0]="images/ad-01.jpg";
slideimages[1]="images/ad-02.jpg";
slideimages[2]="images/ad-03.jpg";
slideimages[3]="images/ad-04.jpg";
slideimages[4]="images/ad-05.jpg";//slidetext数组为变换的文字
var slidetext=new Array();
slidetext[0]="动画";
slidetext[1]="漫画";
slidetext[2]="剧集";
slidetext[3]="手机动漫";
slidetext[4]="手机游戏";//slidetext数组为点击大图后跳到的地址
var slidelinks=new Array();
slidelinks[0]="http://www.webacg.com";
slidelinks[1]="http://www.webacg.com";
slidelinks[2]="http://www.webacg.com";
slidelinks[3]="http://www.webacg.com";
slidelinks[4]="http://www.webacg.com";//焦点图初始内容－－start
var slidespeed=3000var slidesanjiaoimages=new Array("images/bian2.gif","images/bian1.gif");
var slidesanjiaoimagesname=new Array("xiaosan1","xiaosan2","xiaosan3","xiaosan4","xiaosan5");var filterArray=new Array();
filterArray[0]="progid:DXImageTransform.Microsoft.Pixelate (enabled=false,duration=2,maxSquare=25 )";
filterArray[1]="progid:DXImageTransform.Microsoft.Stretch (duration=1,stretchStyle=PUSH)";
filterArray[2]="progid:DXImageTransform.Microsoft.Stretch(duration=1)";
filterArray[3]="progid:DXImageTransform.Microsoft.Slide(bands=8, duration=1)";
filterArray[4]="progid:DXImageTransform.Microsoft.Fade ( duration=1,overlap=0.25 )";var imageholder=new Array()
var ie55=window.createPopup
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}function tu_ove(){clearTimeout(setID)}
function ou(){slideit()} var whichlink=0
var whichimage=0

function gotoshow(){
window.open(slidelinks[whichlink]);
}

function slideit(){

document.images.slide.style.filter=filterArray[whichimage];
//alert(document.images.slide.style.filter);
pixeldelay=(ie55)? (document.images.slide.filters[0].duration*1000) : 0
//alert(pixeldelay);
if (!document.images) return

if (ie55) {
document.images.slide.filters[0].apply();
document.images.slide.filters[0].play();

}
document.images.slide.src=imageholder[whichimage].src

document.getElementById("textslide").innerText=slidetext[whichimage];

document.getElementById("xiaosan1").src=slidesanjiaoimages[0];
document.getElementById("xiaosan2").src=slidesanjiaoimages[0];
document.getElementById("xiaosan3").src=slidesanjiaoimages[0];
document.getElementById("xiaosan4").src=slidesanjiaoimages[0];
document.getElementById("xiaosan5").src=slidesanjiaoimages[0];

document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1];

if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setID=setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()
function ove(n){
clearTimeout(setID)
whichimage=n;
document.images.slide.src=imageholder[whichimage].src

document.getElementById("textslide").innerText=slidetext[whichimage];
document.getElementById("xiaosan1").src=slidesanjiaoimages[0];
document.getElementById("xiaosan2").src=slidesanjiaoimages[0];
document.getElementById("xiaosan3").src=slidesanjiaoimages[0];
document.getElementById("xiaosan4").src=slidesanjiaoimages[0];
document.getElementById("xiaosan5").src=slidesanjiaoimages[0];
document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1];
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 图片切换效果</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<style type='text/css'>
.bigon{background:url(http://mat1.qq.com/ent/ent2007/ent2-04.gif);color:#C9000E;}
    .bigoff{background:url(http://mat1.qq.com/ent/ent2007/ent2-03.gif);color:#3C3C3C;}
</style></HEAD><BODY>
<table width="350" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="344">
    <table width="332" border="0" align="center" cellpadding="0" cellspacing="1">
            <tr>
              <td width="330" style="border:1px solid #4F4F4F;"><div id="fc" style="width:328px;height:240px;filter:progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 );"><div style="display:block;">
<a href="http://ent.qq.com/a/20080618/000007.htm" target="_blank"><img src="http://mat1.qq.com/ent/upday2008/06182.jpg" width="328" height="240" border="0" onMouseOver="ClearTime();" onMouseOut="ImgChange()" /></a></div>
<div style="display:none;">
<a href="http://ent.qq.com/a/20080618/000104.htm" target="_blank"><img src="http://mat1.qq.com/ent/upday2008/06188.jpg" width="328" height="240" border="0" onMouseOver="ClearTime();" onMouseOut="ImgChange()" /></a></div>
<div style="display:none;"><a href="http://ent.qq.com/a/20080618/000002.htm" target="_blank"><img src="http://mat1.qq.com/ent/upday2008/06184.jpg" width="328" height="240" border="0" onMouseOver="ClearTime();" onMouseOut="ImgChange()" /></a></div><div style="display:none;">
<a href="http://ent.qq.com/a/20080618/000048.htm" target="_blank"><img src="http://mat1.qq.com/ent/upday2008/06187.jpg" width="328" height="240" border="0" onMouseOver="ClearTime();" onMouseOut="ImgChange()" /></a></div><div style="display:none;">
<a href="http://ent.qq.com/a/20080618/000109.htm" target="_blank"><img src="http://mat1.qq.com/ent/upday2008/06186.jpg" width="328" height="240" border="0" onMouseOver="ClearTime();" onMouseOut="ImgChange()" /></a></div>
    </div>
</td>
            </tr>
            <tr>
              <td height="31" background="http://mat1.qq.com/ent/ent2007/ent2-02.gif"><table width="328" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="228" align="center" onmouseover="ClearTime();" onMouseOut="ImgChange()"><div id="con"><div style="display:block;">
<a href="http://ent.qq.com/a/20080618/000007.htm" target="_blank" class="bla">关之琳穿花裙高调亮相灿烂醉笑日渐显老</a></div>
<div style="display:none;">
<a href="http://ent.qq.com/a/20080618/000104.htm" target="_blank" class="bla">《嫂嫂19岁》导演李昌汉要在内地选女主角</a></div>
<div style="display:none;">
<a href="http://ent.qq.com/a/20080618/000002.htm" target="_blank" class="bla">《剑蝶》迟到引不满吴尊阿sa感情甚好</a></div>
<div style="display:none;">
<a href="http://ent.qq.com/a/20080618/000048.htm" target="_blank" class="bla">成龙与儿子合作拳打脚踢为《熊猫》配音</a></div>
<div style="display:none;">
<a href="http://ent.qq.com/a/20080618/000109.htm" target="_blank" class="bla">林嘉欣踏入三十岁希望早点结婚生孩子</a></div>
                </div></td>
                    <td width="100"><table width="83" border="0" align="center" cellpadding="0" cellspacing="3" class="lhn" id="num">
                        <tr>
                          <td width="13" height="19" align="center" background="http://mat1.qq.com/ent/ent2007/ent2-04.gif" class="bigon" onclick="ChangeStart(0);" onmouseover="ClearTime();" onmouseout="ImgChange()" style="cursor:pointer;">1</td>
                          <td width="13" align="center" background="http://mat1.qq.com/ent/ent2007/ent2-03.gif" class="bigoff" onclick="ChangeStart(1);" onmouseover="ClearTime();" onmouseout="ImgChange()" style="cursor:pointer;">2</td>
                          <td width="13" align="center" background="http://mat1.qq.com/ent/ent2007/ent2-03.gif" class="bigoff" onclick="ChangeStart(2);" onmouseover="ClearTime();" onmouseout="ImgChange()" style="cursor:pointer;">3</td>
                          <td width="13" align="center" background="http://mat1.qq.com/ent/ent2007/ent2-03.gif" class="bigoff" onclick="ChangeStart(3);" onmouseover="ClearTime();" onmouseout="ImgChange()" style="cursor:pointer;">4</td>
                          <td width="13" align="center" background="http://mat1.qq.com/ent/ent2007/ent2-03.gif" class="bigoff" onclick="ChangeStart(4);" onmouseover="ClearTime();" onmouseout="ImgChange()" style="cursor:pointer;">5</td>
     </tr>
    </table></td>
    </tr>
</table></td>
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
var n = 0;
var Timer = null;
var oBackImg = document.getElementById('num');//初始化函数
function InitParm(){
   n++;
   if(n>4)n=0;
   ChangeStart(n);
}
function ChangeStart(value){   n = value;
   ImgSel(value);//图片切换
   LinkChange(value);//超链接切换
   BackImg(value);//小图片背景切换
}
// 定时图片切换
function ImgSel(num){
   with(fc){
    filters[0].Apply();//初始化滤镜
    for(var i = 0;i < 5; i++) (i == num) ? (childNodes[i].style.display = "block") : (childNodes[i].style.display = "none");
    filters[0].play();//滤镜使用
   }
}// 定时超链接切换
function LinkChange(num){
   with(con){
    for(var i = 0;i < 5; i++) i == num?childNodes[i].style.display = "block":childNodes[i].style.display = "none";
   }

}
// 定时小背景图片切换
function BackImg(len){
for(var i=0;i<5;i++)
   if(len==i){
   oBackImg.getElementsByTagName("td")[i].className='bigon';
   }
else{
   oBackImg.getElementsByTagName("td")[i].className='bigoff';
   }
}//清除定时器
function ClearTime(){
   clearInterval(Timer);
}function ImgChange(){
   Timer = window.setInterval("InitParm()",3000);
}ImgChange();
//-->
</SCRIPT>
</BODY>
</HTML>以前写的垃圾代码,但是能用!

<!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=gb2312" />
<title>JavaScript 图片切换展示效果</title>
</head>
<body>
<style type="text/css">
.container, .container *{margin:0; padding:0;} .container{width:408px; height:168px; overflow:hidden;} .slider{position:absolute;}
.slider li{ list-style:none;display:inline;}
.slider img{ width:408px; height:168px; display:block;} .slider2{width:2000px;}
.slider2 li{float:left;} .num{ position:absolute; right:5px; bottom:5px;}
.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;
}
.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;
}
</style>
<div class="container" id="idTransformView">
<ul class="slider" id="idSlider">
<li><img src="/uploads/Image/specially_effect/1.jpg"/></li>
<li><img src="/uploads/Image/specially_effect/2.jpg"/></li>
<li><img src="/uploads/Image/specially_effect/3.jpg"/></li>
</ul> <ul class="num" id="idNum">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="container" id="idTransformView2">
<ul class="slider slider2" id="idSlider2">
<li><img src="/uploads/Image/specially_effect/1.jpg"/></li>
<li><img src="/uploads/Image/specially_effect/2.jpg"/></li>
<li><img src="/uploads/Image/specially_effect/3.jpg"/></li>
</ul>
<ul class="num" id="idNum2">
<li>1</li> <li>2</li>
<li>3</li>
</ul>
</div>
<div>
<input id="idStop" type="button" value=" 停止自动 " />
<input id="idStart" type="button" value=" 开始自动 " />
<input id="idPre" type="button" value=" <- 上一个 " />
<input id="idNext" type="button" value=" 下一个 -> " />

切换速度：
<input id="idFast" type="button" value=" + 加速 " />
<input id="idSlow" type="button" value=" - 减速 " />

代码太长你合一下
这个能让你更好的理解学习，可自己修改时间、速度

停顿时间：
<input id="idAdd" type="button" value=" + 加时间 " />
<input id="idReduce" type="button" value=" - 减时间 " />
<input id="idReset" type="button" value=" Reset " />
</div> <script type="text/javascript">
var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
}; var Class = {
create: function() {
    return function() {
     this.initialize.apply(this, arguments);
    }
}
} Object.extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
} var TransformView = Class.create();
TransformView.prototype = {
//容器对象,滑动对象,切换参数,切换数量
initialize: function(container, slider, parameter, count, options) {
    if(parameter <= 0 || count <= 0) return;
    var oContainer = $(container), oSlider = $(slider), oThis = this;     this.Index = 0;//当前索引

    this._timer = null;//定时器
    this._slider = oSlider;//滑动对象
    this._parameter = parameter;//切换参数
    this._count = count || 0;//切换数量
    this._target = 0;//目标参数

    this.SetOptions(options);

    this.Up = !!this.options.Up;
    this.Step = Math.abs(this.options.Step);
    this.Time = Math.abs(this.options.Time);
    this.Auto = !!this.options.Auto;
    this.Pause = Math.abs(this.options.Pause);
    this.onStart = this.options.onStart;
    this.onFinish = this.options.onFinish;

    oContainer.style.overflow = "hidden";
    oContainer.style.position = "relative";

    oSlider.style.position = "absolute";
    oSlider.style.top = oSlider.style.left = 0;
},
//设置默认属性
SetOptions: function(options) {
    this.options = {//默认值
        Up:            true,//是否向上(否则向左)
        Step:        5,//滑动变化率
        Time:        10,//滑动延时
        Auto:        true,//是否自动转换
        Pause:        2000,//停顿时间(Auto为true时有效)
        onStart:    function(){},//开始转换时执行
        onFinish:    function(){}//完成转换时执行
    };
    Object.extend(this.options, options || {});
},
//开始切换设置
Start: function() {
    if(this.Index < 0){
        this.Index = this._count - 1;
    } else if (this.Index >= this._count){ this.Index = 0; }

    this._target = -1 * this._parameter * this.Index;
    this.onStart();
    this.Move();
},
//移动
Move: function() {
    clearTimeout(this._timer);
    var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow);

    if (iStep != 0) {
        this._slider.style[style] = (iNow + iStep) + "px";
        this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
    } else {
        this._slider.style[style] = this._target + "px";
        this.onFinish();
        if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); }
    }
},
//获取步长
GetStep: function(iTarget, iNow) {
    var iStep = (iTarget - iNow) / this.Step;
    if (iStep == 0) return 0;
    if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
    return iStep;
},
//停止
Stop: function(iTarget, iNow) {
    clearTimeout(this._timer);
    this._slider.style[this.Up ? "top" : "left"] = this._target + "px";
}
}; window.onload=function(){
    function Each(list, fun){
        for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
    };

    var objs = $("idNum").getElementsByTagName("li");

    var tv = new TransformView("idTransformView", "idSlider", 168, 3, {
        onStart : function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) }//按钮样式
    });

    tv.Start();

    Each(objs, function(o, i){
        o.onmouseover = function(){
            o.className = "on";
            tv.Auto = false;
            tv.Index = i;
            tv.Start();
        }
        o.onmouseout = function(){
            o.className = "";
            tv.Auto = true;
            tv.Start();
        }
    })

    ////////////////////////test2

    var objs2 = $("idNum2").getElementsByTagName("li");

    var tv2 = new TransformView("idTransformView2", "idSlider2", 408, 3, {
        onStart: function(){ Each(objs2, function(o, i){ o.className = tv2.Index == i ? "on" : ""; }) },//按钮样式
        Up: false
    });

    tv2.Start();

    Each(objs2, function(o, i){
        o.onmouseover = function(){
            o.className = "on";
            tv2.Auto = false;
            tv2.Index = i;
            tv2.Start();
        }
        o.onmouseout = function(){
            o.className = "";
            tv2.Auto = true;
            tv2.Start();
        }
    })

    $("idStop").onclick = function(){ tv2.Auto = false; tv2.Stop(); }
    $("idStart").onclick = function(){ tv2.Auto = true; tv2.Start(); }
    $("idNext").onclick = function(){ tv2.Index++; tv2.Start(); }
    $("idPre").onclick = function(){ tv2.Index--;tv2.Start(); }
    $("idFast").onclick = function(){ if(--tv2.Step <= 0){tv2.Step = 1;} }
    $("idSlow").onclick = function(){ if(++tv2.Step >= 10){tv2.Step = 10;} }
    $("idReduce").onclick = function(){ tv2.Pause-=1000; if(tv2.Pause <= 0){tv2.Pause = 0;} }
    $("idAdd").onclick = function(){ tv2.Pause+=1000; if(tv2.Pause >= 5000){tv2.Pause = 5000;} }

    $("idReset").onclick = function(){
        tv2.Step = Math.abs(tv2.options.Step);
        tv2.Time = Math.abs(tv2.options.Time);
        tv2.Auto = !!tv2.options.Auto;
        tv2.Pause = Math.abs(tv2.options.Pause);
    }

}
</script>
</body>
</html>

类似这样的点击1234换图片的, 现在多数都用FLASH来做了.比JS简单多了,网上很多类似的模版.下载下来改一下就是了

调试易

图片的控制显示小问题

解决方案 »