使用JQuery和AJAX導航html文件之間的幻燈片過渡

Question

我想知道是否有一種簡單的方法可以在我網站上的許多單獨的html文件之間實現幻燈片過渡效果。 我一直在搜索數小時，但是如果沒有重新設計網站，就找不到我想做的事的例子。 我正在使用JQuery和AJAX來驗證頁面上的選擇，然后在進行一些服務器端驗證后移至所選內容。 我目前的設計有可能嗎？ 謝謝

//JavaScript function
function getValue(aval) {

    $.ajax({
        url: 'Services.aspx/getSelection',
        type: "POST",
        dataType: "json",
        data: '{"aSelection":"' + aval + '"}',
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            //alert(data.d);
            if (data.d == 1) {
                window.location.href = "InsuredReason.html";
            }
            if (data.d == 2) {
                window.location.href = "AgentInfo.html";
            }
            if (data.d == 3) {
                window.location.href = "ContratistaInfo.html";
            }
            if (data.d == 4) {
                window.location.href = "VisitorInfo.html";
            }
        },
        error: function (er) {
            //alert(er.d);
        }
    });

  }

<!--HTML-->
    <nav id="razonAseg">
        <br>
        <img src="images/2.jpg" alt="Asegurado" width="315" height="628" class="smooth" id="Asegurado" border="0" onclick="getValue('1')"/>
        <img src="images/1.jpg" alt="Agente" width="315" height="628" class="smooth" id="Agente" border="0" onclick="getValue('2')"/>
        <img src="images/3.jpg" alt="Contratista" width="315" height="628" class="smooth" id="Contratista" border="0" onclick="getValue('3')"/>
        <img src="images/4.jpg" alt="Visitante" width="315" height="628" class="smooth" id="Visitante" border="0" onclick="getValue('4')"/>
    </nav>

Answer 1

您不需要重定向，最好用html文件的內容更新頁面的某些區域。

HTML可以是：

<nav id="razonAseg">
    <br>
    <img src="images/2.jpg" alt="Asegurado" width="315" height="628" class="smooth" id="Asegurado" border="0" onclick="getValue('1')"/>
    <img src="images/1.jpg" alt="Agente" width="315" height="628" class="smooth" id="Agente" border="0" onclick="getValue('2')"/>
    <img src="images/3.jpg" alt="Contratista" width="315" height="628" class="smooth" id="Contratista" border="0" onclick="getValue('3')"/>
    <img src="images/4.jpg" alt="Visitante" width="315" height="628" class="smooth" id="Visitante" border="0" onclick="getValue('4')"/>
</nav>
<div id="content"></div>

而javascript不會重定向，但會更新內容：

function getValue(aval) {
    if (aval == 1) {
        filename = "InsuredReason.html";
    }
    if (aval == 2) {
        filename  = "AgentInfo.html";
    }
    if (aval == 3) {
        filename  = "ContratistaInfo.html";
    }
    if (aval == 4) {
        filename  = "VisitorInfo.html";
    }
    $.ajax({
        url: 'Services.aspx/'+filename,
        type: "GET",
        success: function (data) {
            //alert(data);
            $('#content').html(data);//where data is content of html file
        },
        error: function (er) {
            //alert(er.d);
        }
   });

}