使用AJAX将滑块加载到div中

时间：2014-02-17 01:35:46

标签： javascript jquery ajax

我想使用AJAX在div内加载几个不同的滑块，但滑块需要JavaScript代码而不运行show。

主要PHP文档：

<!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=utf-8" />
<title>BLOG</title>
<link href="estilo-pagina-css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script language="javascript">
$(document).ready(function() {
    $('#slider1').cycle({
        fx:      'fade', //'scrollLeft,scrollDown,scrollRight,scrollUp',blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, none, scrollUp,scrollDown,scrollLeft,scrollRight,scrollHorz,scrollVert,shuffle,slideX,slideY,toss,turnUp,turnDown,turnLeft,turnRight,uncover,ipe ,zoom
        speed:   '600',
        timeout: '7000',
        next:    '#next',
        prev:    '#prev',
        pager:   '#thumb',
        pauseOnHover: false,                 // if you hover pauses the slider
        startClockOnMouseOut: false,         // if clock should start on MouseOut
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"><img src="' + slide.src + '" width="43" height="29" /></a></li>';
        }
    });
});
</script>
<script>
function nuevoAjax() {
    var xmlhttp = false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(E) {
            xmlhttp = false;
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

function Cargar(url) {
    var centro_galeria = document.getElementById('centro_galeria');
    ajax = nuevoAjax();
    ajax.open("GET", url, true);
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4) {
            centro_galeria.innerHTML = ajax.responseText;
        }
    }
    ajax.send(null);
}
</script>
<style type="text/css">
#contenedor {
    width: 900px;
    margin: 0 auto;
    height: 100%;
    background-color: #000000;
}
</style>
<link href="estilo-galeria.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">
    <div id="button" >
        <ul class="menu-galeria">
            <li><a href="#" onclick="Cargar('galeria1.php');">GALERIA1</a></li>
            <li><a href="#" onclick="Cargar('galeria2.php'');">GALERIA2</a></li>
        </ul>
    </div>
    <div id="centro_galeria"><?php include("galeria1.php"); ?>
    </div>
</div>
</body>
</html>

galeria1.php：

<div class="container">
    <div class="slider">
        <div id="slider1">
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/2.jpg" />
            <img src="imagenes-galeria/3.jpg" />
            <img src="imagenes-galeria/4.jpg" />
            <img src="imagenes-galeria/5.jpg" />
            <img src="imagenes-galeria/6.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
        </div>
    </div>
    <ul id="thumb"></ul>
    <div id='next' class="slider_next">
        <img src="imagenes-presentacion/next.png" width="78" height="100" alt="next image" />
    </div>
    <div id='prev' class="slider_prev">
        <img src="imagenes-presentacion/prev.png" width="78" height="100" alt="previous image" />
    </div>
</div>

galeria2.php：

<div class="container">
    <div class="slider">
        <div id="slider1">
            <img src="imagenes-galeria/2.jpg" />
            <img src="imagenes-galeria/2.jpg" />
            <img src="imagenes-galeria/3.jpg" />
            <img src="imagenes-galeria/4.jpg" />
            <img src="imagenes-galeria/5.jpg" />
            <img src="imagenes-galeria/6.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
            <img src="imagenes-galeria/7.jpg" />
        </div>
        <ul id="thumb"></ul>
        <div id='next' class="slider_next">
            <img src="imagenes-presentacion/next.png" width="78" height="100" alt="next image" />
        </div>
        <div id='prev' class="slider_prev">
            <img src="imagenes-presentacion/prev.png" width="78" height="100" alt="previous image" />
        </div>
    </div>
</div>

2 个答案:

答案 0 :(得分：1)

您可以使用$.load：

function Cargar(url) {
    $('#centro_galeria').load(url);
}

答案 1 :(得分：0)

<!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=utf-8" />
<title>BLOG</title>
<link href="estilo-pagina-css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script language="javascript">
$(document).ready(function() {
 MySlider();
});
function MySlider()
{
    $('#slider1').cycle({
        fx:      'fade', //'scrollLeft,scrollDown,scrollRight,scrollUp',blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, none, scrollUp,scrollDown,scrollLeft,scrollRight,scrollHorz,scrollVert,shuffle,slideX,slideY,toss,turnUp,turnDown,turnLeft,turnRight,uncover,ipe ,zoom
        speed:   '600',
        timeout: '7000',
        next:    '#next',
        prev:    '#prev',
        pager:   '#thumb',
        pauseOnHover: false,                 // if you hover pauses the slider
        startClockOnMouseOut: false,         // if clock should start on MouseOut
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"><img src="' + slide.src + '" width="43" height="29" /></a></li>';
        }
    });
}
</script>
<script>
function nuevoAjax() {
    var xmlhttp = false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(E) {
            xmlhttp = false;
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

function Cargar(url) {
    var centro_galeria = document.getElementById('centro_galeria');
    ajax = nuevoAjax();
    ajax.open("GET", url, true);
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4) {
            centro_galeria.innerHTML = ajax.responseText;
           MySlider();
        }
    }
    ajax.send(null);
}
</script>
<style type="text/css">
#contenedor {
    width: 900px;
    margin: 0 auto;
    height: 100%;
    background-color: #000000;
}
</style>
<link href="estilo-galeria.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">
    <div id="button" >
        <ul class="menu-galeria">
            <li><a href="#" onclick="Cargar('galeria1.php');">GALERIA1</a></li>
            <li><a href="#" onclick="Cargar('galeria2.php'');">GALERIA2</a></li>
        </ul>
    </div>
    <div id="centro_galeria"><?php include("galeria1.php"); ?>
    </div>
</div>
</body>
</html>
相关问题
最新问题