我想使用 AJAX 在 div 中加载多个不同的 slider ，但 slider 需要 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>
最佳答案
您可以使用$.load :
function Cargar(url) {
$('#centro_galeria').load(url);
}
关于javascript - 使用 AJAX 将 slider 加载到 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21819313/