菜鸟请教，如何在网页上做个图片自动切换效果，像幻灯片样的。

在网上搜索JS图片切换特效就OK了,说白了,就是用JS来实现

对楼主google"js图片切换" 有很多，应该可以满足你的要求

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片切换</title>
<SCRIPT language=Javascript>
   var bannerAD=new Array();
   var bannerADlink=new Array();
   var adNum=0;   bannerAD[0]="http://image2.sina.com.cn/home/images/sina_logo2.gif";
   bannerADlink[0]="http://www.sina.com.cn";
   bannerAD[1]="http://www.baidu.com/img/slogo.gif";
   bannerADlink[1]="http://www.baidu.com";
   bannerAD[2]="http://www.163.com/images/neteaselogo.gif";
   bannerADlink[2]="http://www.163.com";
   bannerAD[3]="http://cn.yimg.com/i/lg/cy_logo.gif";
   bannerADlink[3]="http://cn.yahoo.com/";

   var preloadedimages=new Array();
   for (i=1;i<bannerAD.length;i++){
      preloadedimages[i]=new Image();
      preloadedimages[i].src=bannerAD[i];
   }function setTransition(){
   if (document.all){
      bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
      bannerADrotator.filters.revealTrans.apply();
   }
}function playTransition(){
   if (document.all)
      bannerADrotator.filters.revealTrans.play()
}function nextAd(){
   if(adNum<bannerAD.length-1)adNum++ ;
      else adNum=0;
   setTransition();
   document.images.bannerADrotator.src=bannerAD[adNum];
   playTransition();
   theTimer=setTimeout("nextAd()", 5000);
}function jump2url(){
   jumpUrl=bannerADlink[adNum];
   jumpTarget='_blank';
   if (jumpUrl != ''){
      if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
      else location.href=jumpUrl;
   }
}
function displayStatusMsg() {
   status=bannerADlink[adNum];
   document.returnValue = true;
}
</SCRIPT>
</head><body>
　　<A onmouseover="displayStatusMsg();return document.returnValue" href="javascript:jump2url()"><IMG style="FILTER: revealTrans(duration=2,transition=20)" src="http://image2.sina.com.cn/home/images/sina_logo2.gif" border=0 name=bannerADrotator></a>
<SCRIPT language=JavaScript>nextAd()</SCRIPT>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%!--#include file="bottom.asp"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>轮换图片</title>
<style>
.ad3{ float:left; width:350px; height:245px; overflow:hidden; margin:0; padding:0;}
/*******轮换图片************/
.ad3right{ float:left; width:348px; height:243px; border:1px solid #CCCCCC; margin:0; padding:0; display:inline;}
.ad3right1{ float:left; width:348px; height:18px; background:#999999;position:relative; bottom:18px; left:0;filter:alpha(opacity=80);}
#biaoshi{ padding:0; margin:0; list-style-type:none; width:348px; position:relative; bottom:0; left:204px; float:left;}
#biaoshi li{ float:left; height:18px; padding:0 10px; text-align:center; display:block; background:#000000; color:#FFFFFF; cursor:hand; border-right:1px solid #FFFFFF;}
.ad3right2{ float:left; width:348px; height:243px;}
#pic{ padding:0; margin:0; list-style-type:none;}
.picimg{ float:left; width:348px; height:243px; overflow:hidden;}
.picimg img{ display:block; width:348px;}
#biaoshi #show{background:#dd9;color:#f00;}
</style>
<script language="javascript">
function cha(n){
for(i=0;i<biaoshi.childNodes.length;i++)
biaoshi.childNodes[i].id="";
biaoshi.childNodes[n].id="show";
for(i=0;i<pic.childNodes.length;i++){
pic.childNodes[n].style.filter="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=1,orientation=vertical)";
pic.childNodes[n].filters[0].Apply();
pic.childNodes[i].style.display="none";
pic.childNodes[n].filters[0].Play();
}
pic.childNodes[n].style.filter="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=1,orientation=vertical)";;
pic.childNodes[n].filters[0].Apply();
pic.childNodes[n].style.display="block";
pic.childNodes[n].filters[0].Play();
}
</script>
</head>
<body>
<div class="ad3">
<div class="ad3left"></div>
<div class="ad3right">
<ul id="pic">
<li class="picimg"><img src="a111.jpg"/></li>
<li class="picimg"><img src="a111.jpg"/></li>
<li class="picimg"><img src="a111.jpg"/></li>
<li class="picimg"><img src="a111.jpg"/></li>
<li class="picimg"><img src="a111.jpg"/></li>
</ul>
<div class="ad3right1">
<ul id="biaoshi">
<li onclick="cha(0)">1</li>
<li onclick="cha(1)">2</li>
<li onclick="cha(2)">3</li>
<li onclick="cha(3)">4</li>
<li onclick="cha(4)">5</li>
</ul>
</div>
</div>
</div>
<script language="javascript">cha(0)</script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>tab.html</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type="text/css">
            .subject {
                border: 1px solid black;
                width: 200px;
                height: 200px;
            }
        </style>
        <script type="text/javascript">
        var imgAry = new Array();
        imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af4f2677d1135e93.jpg");
        imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg");
        imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/cf4013658b43f3ccf7365493.jpg");
        imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg");
        imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af1f2677d0135e23.jpg");

        window.onload = function () {
            var oBox = document.getElementById("subjectBox");
            var oShowId = document.getElementById("showId").value;
            var subjectHtml = "";
            for (var i = 1; i <= 4; i++) {
                if (i == oShowId) {
                    subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: block;' class='subject'>" + i + "<img src='" + imgAry[i-1] + "'/></div>"
                } else {
                    subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: none;' class='subject'>" + i + "<img src='" + imgAry[i-1] + "'/></div>"
                }
            }
            oBox.innerHTML = subjectHtml;
            showSubject2("next");
        };

        function setHide() {
            var allDiv = document.getElementsByName("showDiv");
            for (var i = 0; i < allDiv.length; i++) {
                if (allDiv[i].style.display != "none") {
                    allDiv[i].style.display = "none";
                }
            }
        }


        //方法一：
        function showSubject(flag) {
            var oShowId = document.getElementById("showId").value;
            var allDiv = document.getElementsByName("showDiv");
            var len = allDiv.length;
            //alert(oShowId + ":" + len);
            setHide();//隐藏所有div
            if (flag == "next") {
                oShowId = eval(oShowId) + 1;
                if (oShowId > len) {
                    oShowId = 1;
                }
                document.getElementById("div_" + oShowId).style.display = "block";
            } else {
                oShowId = eval(oShowId) - 1;
                if (oShowId < 1) {
                    oShowId = len;
                }
                document.getElementById("div_" + oShowId).style.display = "block";
            }
            document.getElementById("showId").value = oShowId;
        }

        //方法二：
        function showSubject2(flag) {
            var allDiv = document.getElementsByName("showDiv");
            for (var i = 0, len = allDiv.length; i < len; i++) {
                if (allDiv[i].style.display == "block") {
                    allDiv[i].style.display = "none";
                    if (flag == "next") {
                        if (i < len) {
                            i += 1;
                        }
                        if (i >= len) {
                            i = 0;
                        }
                    } else {
                        if (i > 0) {
                            i -= 1;
                        }
                        if (i <= 0) {
                            i = len - 1;
                        }
                    }
                    allDiv[i].style.display = "block";
                    break;
                }
            }
            setTimeout("showSubject2('next')", 1000);//动态更换图片
        }
    </script>
    </head>

    <body>
        方法1：
        <input type="button" value="上" onclick="showSubject('prev')" />
        <input type="button" value="下" onclick="showSubject('next')" />
        <input type="hidden" id="showId" value="1" />
        <br />
        方法2：
        <input type="button" value="上" onclick="showSubject2('prev')" />
        <input type="button" value="下" onclick="showSubject2('next')" />
        <div id="subjectBox">
        </div>
    </body>
</html>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/IBM_hoojo/archive/2010/06/07/5653246.aspx

调试易

菜鸟请教，如何在网页上做个图片自动切换效果，像幻灯片样的。

解决方案 »