急 求相册特效

http://d.lanrentuku.com/down/js/jiaodiantu-772/类似这种相册特效 放大功能不要
但是有自动播放功能的 自动跳到下一个图片的

解决方案 »

  1.   

    http://blog.csdn.net/IBM_hoojo/archive/2010/06/07/5653246.aspx
      

  2.   

    <!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