esta es la pagina principal index.html llamo con load de jquery----
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Menu</title>
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#contenedor").load("inicio.html");
$("#menu a").each(function(){
var href = $(this).attr("href");
$(this).attr({ href: "#"});
$(this).click(function(){
$("#contenedor").load(href);
});
});
});
</script>
</head>
<body>
<header id="main-header" style="z-index:9">
<div id="header-menu">
<img id="logo" src="img/logo.jpg">
<ul id="menu" class="nav">
<li><a rel="stylesheet" href="inicio.html">Inicio</a></li>
<li><a href="b.html">Nosotros</a>
</li>
<li><a href="c.html">Productos</a>
</li>
<li><a href="b.html">Contactenos</a></li>
</ul>
</div>
</header>
<div id="contenedor">
</div>
<footer id="main-footer">
<div id="footer-menu">
<img id="logo" src="img/logo1.jpg">
<div id="footer-tit">
<p id="footer-t1">
</p>
<p id="footer-t2">
</p>
</div>
<div id="footer-dir">
<p id="footer-d1">
</p>
<p id="footer-d2">
</p>
</div>
</div>
</footer>
</body>
</html>
--------------
esta es la pagina de inicio.html que contiene el slider------
<!DOCTYPE html>
<html>
<head>
<title>Inicio</title>
<link rel="stylesheet" href="css/inicio.css">
<link rel="stylesheet" href="css/slider.css">
<!-- Scripts -->
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
});
</script>
</head>
<body id="pag-inicio" >
<div id="con-pag-inicio">
<div id="banner1">
<!-- Slider Container -->
<section class="slider-container">
<ul id="slider" class="slider-wrapper">
<li class="slide-current">
<img src="img/slider/img1.jpg" alt="Slider Imagen 1">
</li>
<li>
<img src="img/slider/img2.jpg" alt="Slider Imagen 1">
</li>
<li>
<img src="img/slider/img3.jpg" alt="Slider Imagen 1">
</li>
</ul>
<!-- Controles -->
<ul id="slider-controls" class="slider-controls"></ul>
</section>
</div>
<div id="ayuda-inicio">
<div id="banner2">
<div id="welcome">
<div id="tit-welcome">
</div>
<div id="img-welcome">
<img src="img/welcome/welcome2.jpg">
</div>
<div id="des-welcome">
<a href="#">.</a>
</div>
</div>
<div id="publication">
<div id="tit-publication">
Publicaciones
</div>
<div id="img-publication">
<img src="img/publication/publication1.jpg" >
</div>
<div id="des-publication">
<a href="#"></a>
</div>
</div>
</div>
<div id="banner3">
<div id="question">
<div id="tit-question">
</div>
<div id="img-question">
<img src="img/question/question1.jpg">
</div>
<div id="des-question">
<a href="#"></a>
</div>
</div>
<div id="tips">
<div id="tit-tips">
</div>
<div id="img-tips">
<img src="img/tips/tips1.jpg" >
</div>
<div id="des-tips">
<a href="#"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
-------------------------
slider.js ----------------------
$(function () {
var SliderModule = (function() {
var pb = {};
pb.el = $('#slider');
pb.items = {
panel: pb.el.find('li')
}
// Variables Necesarias
var SliderInterval,
currentSlider = 0,
nextSlider = 1,
lengthSlider = pb.items.panel.length;
// Initialize
pb.init = function(settings) {
this.settings = settings || {duration: 8000}
var output = '';
// Activamos nuestro slider
SliderInit();
for(var i = 0; i < lengthSlider; i++) {
if (i == 0) {
output += '<li class="active"></li>';
} else {
output += '<li></li>';
}
}
// Controles del Slider
$('#slider-controls').html(output).on('click', 'li', function (e){
var $this = $(this);
if (currentSlider !== $this.index()) {
changePanel($this.index());
};
});
}
var SliderInit = function() {
SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
}
pb.startSlider = function() {
var panels = pb.items.panel,
controls = $('#slider-controls li');
if (nextSlider >= lengthSlider) {
nextSlider = 0;
currentSlider = lengthSlider-1;
}
// Efectos
controls.removeClass('active').eq(nextSlider).addC lass('active');
panels.eq(currentSlider).fadeOut('slow');
panels.eq(nextSlider).fadeIn('slow');
// Actualizamos nuestros datos
currentSlider = nextSlider;
nextSlider += 1;
}
// Funcion para controles del slider
var changePanel = function(id) {
clearInterval(SliderInterval);
var panels = pb.items.panel,
controls = $('#slider-controls li');
// Comprobamos el ID
if (id >= lengthSlider) {
id = 0;
} else if (id < 0) {
id = lengthSlider-1;
}
// Efectos
controls.removeClass('active').eq(id).addClass('ac tive');
panels.eq(currentSlider).fadeOut('slow');
panels.eq(id).fadeIn('slow');
// Actualizamos nuestros datos
currentSlider = id;
nextSlider = id+1;
// Reactivamos el slider
SliderInit();
}
return pb;
}());
SliderModule.init({duration: 2000});
});
--------------
disculpa la demora