使用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);
        }
   });

}