堆栈内存溢出
  简体   繁体   English

使用AJAX将滑块加载到div中

[英]Loading sliders into a div with AJAX

 原文  2014-02-17 01:35:46  3   2    javascript/ jquery/ ajax

问题描述

I want to load several different sliders within a div with AJAX but the sliders need JavaScript code and do not run the show . 我想在AJAX的div加载几个不同的滑块，但是这些滑块需要JavaScript代码，并且不运行show 。

Principal PHP document: 主要的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 : 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 : 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 个解决方案

解决方案1
 1 已采纳  2014-02-17 02:10:27

You can use $.load : 您可以使用$ .load ： 

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

解决方案2
 0  2014-02-17 07:10:07

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 加载块div Ajax - Loading a block div Ajax AJAX正在子分区中加载 - AJAX Loading in Child Div Ajax滑块和Javascript - ajax sliders and Javascript 在没有DIV的情况下加载AJAX响应 - Loading AJAX response without DIV Ajax异步响应未加载到div中 - Ajax asynchronous response not loading into div 在ajax加载时添加div - Add div while ajax loading 使用Laravel和AJAX-不加载DIV - Working with Laravel and AJAX - Not loading DIV Javascript未在Ajax div加载时加载 - Javascript not loading on Ajax div load ajax 表单帖子未加载到 div - ajax form post not loading in div 用AJAX加载div后无法执行Javascript代码 - Javascript code not executing after loading div with AJAX
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM