Tema: Problema carga carrusel: imágenes apiladas
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/01/2012, 18:54
moniliformis
 
Fecha de Ingreso: enero-2012
Mensajes: 3
Antigüedad: 12 años, 3 meses
Puntos: 0
Pregunta Problema carga carrusel: imágenes apiladas
Hola a todos,
Resulta que en la página donde quiero poner un carrusel de jquery, éste se carga mal: no funciona y las imágenes aparecen apiladas. No sé si se trata de algún conflicto o no, pero esto ya no lo sé solucionar sólo. Gracias por la ayuda que me podáis prestar.
Aquí está el código html:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Fixed Header &amp; Footer: Cross Browser</title>
  6. <link href="css/estilo.css" rel="stylesheet" type="text/css" />
  7.  
  8.  
  9. <script type="text/javascript" src="js/jquery.js"></script> >
  10.     jQuery.noConflict();
  11.  
  12.     jQuery.fn.infiniteCarousel = function () {
  13.  
  14.     function repeat(str, num) {
  15.         return new Array( num + 1 ).join( str );
  16.     }
  17.   
  18.     return this.each(function () {
  19.         var jQuery.wrapper = jQuery('> div', this).css('overflow', 'hidden'),
  20.             jQuery.slider = jQuery.wrapper.find('> ul'),
  21.             jQuery.items = jQuery.slider.find('> li'),
  22.             jQuery.single = jQuery.items.filter(':first'),
  23.             
  24.             singleWidth = jQuery.single.outerWidth(), 
  25.             visible = Math.ceil(jQuery.wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
  26.             currentPage = 1,
  27.             pages = Math.ceil(jQuery.items.length / visible);            
  28.  
  29.  
  30.         // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
  31.         if ((jQuery.items.length % visible) != 0) {
  32.             jQuery.slider.append(repeat('<li class="empty" />', visible - (jQuery.items.length % visible)));
  33.             jQuery.items = jQuery.slider.find('> li');
  34.         }
  35.  
  36.         // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
  37.         jQuery.items.filter(':first').before(jQuery.items.slice(- visible).clone().addClass('cloned'));
  38.         jQuery.items.filter(':last').after(jQuery.items.slice(0, visible).clone().addClass('cloned'));
  39.         jQuery.items = jQuery.slider.find('> li'); // reselect
  40.         
  41.         // 3. Set the left position to the first 'real' item
  42.         jQuery.wrapper.scrollLeft(singleWidth * visible);
  43.         
  44.         // 4. paging function
  45.         function gotoPage(page) {
  46.             var dir = page < currentPage ? -1 : 1,
  47.                 n = Math.abs(currentPage - page),
  48.                 left = singleWidth * dir * visible * n;
  49.             
  50.             jQuery.wrapper.filter(':not(:animated)').animate({
  51.                 scrollLeft : '+=' + left
  52.             }, 500, function () {
  53.                 if (page == 0) {
  54.                     jQuery.wrapper.scrollLeft(singleWidth * visible * pages);
  55.                     page = pages;
  56.                 } else if (page > pages) {
  57.                     jQuery.wrapper.scrollLeft(singleWidth * visible);
  58.                     // reset back to start position
  59.                     page = 1;
  60.                 } 
  61.  
  62.                 currentPage = page;
  63.             });                
  64.             
  65.             return false;
  66.         }
  67.         
  68.         jQuery.wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
  69.         
  70.         // 5. Bind to the forward and back buttons
  71.         jQuery('a.back', this).click(function () {
  72.             return gotoPage(currentPage - 1);                
  73.         });
  74.         
  75.         jQuery('a.forward', this).click(function () {
  76.             return gotoPage(currentPage + 1);
  77.         });
  78.         
  79.         // create a public interface to move to a specific page
  80.         jQuery(this).bind('goto', function (event, page) {
  81.             gotoPage(page);
  82.         });
  83.     });  
  84. };
  85.  
  86. jQuery(document).ready(function () {
  87.   jQuery('.infiniteCarousel').infiniteCarousel();
  88. });
  89. </script>
  90. <link href="css/estil.css" rel="stylesheet" type="text/css" />
  91. <!--[if IE 6]>
  92. <link href="css/ie6.css" rel="stylesheet" type="text/css" />
  93. <![endif]-->
  94. <script language="JavaScript" type="text/JavaScript">
  95. <!--
  96. function MM_preloadImages() { //v3.0
  97.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  98.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  99.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  100. }
  101.  
  102. function MM_findObj(n, d) { //v4.01
  103.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  104.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  105.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  106.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  107.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  108. }
  109.  
  110. function MM_nbGroup(event, grpName) { //v6.0
  111.   var i,img,nbArr,args=MM_nbGroup.arguments;
  112.   if (event == "init" && args.length > 2) {
  113.     if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
  114.       img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
  115.       if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
  116.       nbArr[nbArr.length] = img;
  117.       for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
  118.         if (!img.MM_up) img.MM_up = img.src;
  119.         img.src = img.MM_dn = args[i+1];
  120.         nbArr[nbArr.length] = img;
  121.     } }
  122.   } else if (event == "over") {
  123.     document.MM_nbOver = nbArr = new Array();
  124.     for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
  125.       if (!img.MM_up) img.MM_up = img.src;
  126.       img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
  127.       nbArr[nbArr.length] = img;
  128.     }
  129.   } else if (event == "out" ) {
  130.     for (i=0; i < document.MM_nbOver.length; i++) {
  131.       img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  132.   } else if (event == "down") {
  133.     nbArr = document[grpName];
  134.     if (nbArr)
  135.       for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
  136.     document[grpName] = nbArr = new Array();
  137.     for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
  138.       if (!img.MM_up) img.MM_up = img.src;
  139.       img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
  140.       nbArr[nbArr.length] = img;
  141.   } }
  142. }
  143.  
  144. function MM_goToURL() { //v3.0
  145.   var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  146.   for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
  147. }
  148. //-->
  149. </script>
  150. </head>
  151. <body onload="MM_preloadImages('imatges/barranaveg/inici2.jpg','imatges/barranaveg/serveis2.jpg','imatges/barranaveg/tarifa2.jpg','imatges/barranaveg/clients2.jpg','imatges/barranaveg/contacte2.jpg','Image1')">
  152. <body onLoad="MM_preloadImages('imatges/barranaveg/clients2.jpg','imatges/barranaveg/contacte2.jpg')">
  153.     <div id="page-background"><img src="imatges/logobo.jpg" alt="Smile" name="Image1" width="100%" height="100%">
  154.       <table id="content"; border="0" align="center" cellpadding="0" cellspacing="0">       
  155.           <td><a href="blanc.htm" target="_top" onclick="MM_goToURL('parent','blanc.htm');return document.MM_returnValue;MM_nbGroup('down','group1','inici1','',1)" onMouseOver="MM_nbGroup('over','inici1','imatges/barranaveg/inici2.jpg','Image1',1)" onMouseOut="MM_nbGroup('out')"><img src="imatges/barranaveg/inici1.jpg" alt="" name="inici1" width="100%" height="34" border="0"></a></td>
  156.           <td><a href="javascript:;" onMouseOver="MM_nbGroup('over','serveis1','imatges/barranaveg/serveis2.jpg','Image1','imatges/barranaveg/serveis2.jpg',1)" onMouseOut="MM_nbGroup('out')"><img src="imatges/barranaveg/serveis1.jpg" alt="" name="serveis1" width="100%" height="34" border="0" onload=""></a></td>
  157.           <td><a href="javascript:;" onMouseOver="MM_nbGroup('over','tarifa1','imatges/barranaveg/tarifa2.jpg','Image1','imatges/barranaveg/tarifa2.jpg',1)" onMouseOut="MM_nbGroup('out')"><img src="imatges/barranaveg/tarifa1.jpg" alt="" name="tarifa1" width="100%" height="34" border="0" onload=""></a></td>
  158.           <td><a href="javascript:;" onMouseOver="MM_nbGroup('over','clients1','imatges/barranaveg/clients2.jpg','Image1','imatges/barranaveg/clients2.jpg',1)" onMouseOut="MM_nbGroup('out')"><img src="imatges/barranaveg/clients1.jpg" alt="" name="clients1" width="100%" height="34" border="0" onload=""></a></td>
  159.           <td><a href="javascript:;" onMouseOver="MM_nbGroup('over','contacte1','imatges/barranaveg/contacte2.jpg','Image1','imatges/barranaveg/contacte2.jpg',1)" onMouseOut="MM_nbGroup('out')"><img src="imatges/barranaveg/contacte1.jpg" alt="" name="contacte1" width="100%" height="34" border="0" onload=""></a></td> 
  160.     </table>
  161. </div>
  162. <!-- <div id="ie6pagewrap"> -->
  163. <div id="ie6pagecontainer">
  164.     <div id="page-background2"><img src="imatges/fonsbo.jpg" width="100%" height="100%" alt="Smile" /> </div>  
  165.     <div id="content2" align="center">
  166.                 <h1>Sed ut perspiciatis unde</h1>
  167.         <div class="carouselc" id="carouselc">
  168.         <h1>Infinite Carousel</h1>
  169.          
  170.         <div class="Carousel Infinito">
  171.           <div style="overflow: hidden;" class="wrapper">
  172.             <ul>
  173.               <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/1.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
  174.          
  175.                   <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/2.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
  176.          
  177.  
  178.             </ul>
  179.               </div><a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>
  180.         </div>
  181.         </div>
  182.                
  183.                 <h1>Lorem ipsum dolor sit amet</h1>
  184.                 
  185.  
  186.     </div>
  187.      <!--END CONTENT2-->                
  188. </div>
  189.  
  190. <!-- </div> -->
  191. </body>
  192. </html>