Ver Mensaje Individual
  #2 (permalink)  
Antiguo 22/04/2010, 16:20
Avatar de Jask
Jask
 
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 773
Antigüedad: 18 años
Puntos: 15
Respuesta: Problemas con CSS y JQuery (scroll de imágenes)

Aquí dejo el HTML como bien dije arriba

Código HTML:
<title>Autoescuela Ronda</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="style_ie.css" rel="stylesheet" type="text/css">
<![endif]-->

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

	//Set Default State of each portfolio piece
	$(".paging").show();
	$(".paging a:first").addClass("active");
		
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth = $(".window").width();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	
	//Adjust the image reel to its new size
	$(".image_reel").css({'width' : imageReelWidth});
	
	//Paging + Slider Function
	rotate = function(){	
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel").animate({ 
			left: -image_reelPosition
		}, 500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch = function(){		
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 7000); //Timer speed in milliseconds (3 seconds)
	};
	
	rotateSwitch(); //Run function on launch
	
	//On Hover
	$(".image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	
	
	//On Click
	$(".paging a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation
		return false; //Prevent browser jump to link anchor
	});	
	
});
</script>


</head>
<body>

<div class="dt main_t">
			<div class="header top_l">
	           	<embed src="flash/header_v7.swf" width="766" height="139" quality="high"></embed>
			</div>
<div class="dt mpct">
		<div class="dr">
			<div class="dc" style="width:501px">
				<div style="margin:0px 0px 0px 21px;">
                	<embed src="flash/header2_v7.swf" width="480" height="191" quality="high"></embed>
				</div>
		  </div>
			<div class="dc" style="width:265px">
				<div style="margin:0px 30px 0px 20px;">
					
                    <div class="textos_jq">	
                    

                        <div class="container">
                            <div class="folio_block">
                                <div class="main_view">
                                    <div class="window">	
                                        <div class="image_reel">
                                            <a href="#"><img src="images/texto_publi_1.jpg" /></a>
                                            <a href="#"><img src="images/texto_publi_2.jpg" /></a>
                                            <a href="#"><img src="images/texto_publi_3.jpg" /></a>
                                   		</div>
                                	</div>
                                    
                                    <div class="paging">
                                        <a href="#" rel="1">1</a>
                                        <a href="#" rel="2">2</a>
                                        <a href="#" rel="3">3</a>
                                    </div>
                                    
                            	</div>
                        	</div>
                         </div>                     
                    
                       
					<?php /* include 'textopubli.php'; echo $texto[0]."<br>".$texto[1]."<br>".$texto[2];*/ ?> 
                    </div>
                    

				</div>
			</div>
		</div>
	</div>
	<div class="dr">
		<div class="dc">
			<div class="cont">
				<img src="images/spacer.gif" width="1" height="24" alt="" /><br />
				<div class="dt mrg">
					<div class="dr">
						<div class="dc" style="width:240px;">
							<div style="background:url(images/bm.jpg) 0 0 repeat-y">
								<div style="background:url(images/b1t.jpg) 0 0 no-repeat">
									<div style="background:url(images/bb.jpg) bottom left no-repeat">
										<div class="cb">
											<img src="images/spacer.gif" width="1" height="180" alt="" /><br />
										  <br />
											<img src="images/spacer.gif" width="1" height="35" alt="" /><br />
											<a href="#"><img src="images/btn.jpg" align="top" alt="" style="margin:0px 0px 0px 25px;" /></a>
											<br /><img src="images/spacer.gif" width="1" height="25" alt="" /><br />
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="dc" style="width:240px">
							<div style="background:url(images/bm.jpg) 0 0 repeat-y">
								<div style="background:url(images/b2t.jpg) 0 0 no-repeat">
									<div style="background:url(images/bb.jpg) bottom left no-repeat">
										<div class="cb">
											<img src="images/spacer.gif" width="1" height="180" alt="" /><br />
										  <br />
											<img src="images/spacer.gif" width="1" height="35" alt="" /><br />
											<a href="#"><img src="images/btn.jpg" align="top" alt="" style="margin:0px 0px 0px 25px;" /></a>
											<br /><img src="images/spacer.gif" width="1" height="25" alt="" /><br />
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="dc" style="width:240px">
							<div style="background:url(images/bm.jpg) 0 0 repeat-y">
								<div style="background:url(images/b3t.jpg) 0 0 no-repeat">
									<div style="background:url(images/bb.jpg) bottom left no-repeat">
										<div class="cb">
											<img src="images/spacer.gif" width="1" height="180" alt="" /><br />
										  <br />
											<img src="images/spacer.gif" width="1" height="35" alt="" /><br />
											<img src="images/btn.jpg" align="top" alt="" style="margin:0px 0px 0px 25px;" />
											<br /><img src="images/spacer.gif" width="1" height="25" alt="" /><br />
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="dt mrg">
					<div class="dr">
						<div class="dc" style="line-height:11px; border-bottom:1px solid #cacac0">&nbsp;</div>
					</div>
					<div class="dr">
						<div class="dc" style="line-height:10px;">&nbsp;</div>
					</div>
				</div>
				<div class="dt mrg">
					<div class="dr">
						<div class="dc l" style="width:240px">
							<div style="margin:8px 15px 0px 0px;">
							<img src="images/0t1.jpg" align="top" alt="" /><br />
							
							<img src="images/spacer.gif" width="1" height="4" alt="" /><br />
							<b>Noticias </b><br />
Phasellus porta. Fuscius mi magnparturient. montes, nascur ridic mus. Nulla dui. Fusce feugiat mesuada oi nunc odio, gravida.<br />
							<img src="images/spacer.gif" width="1" height="12" alt="" /><br />
							<div align="right">		
								
							</div>
							</div>
						</div>
						<div class="dc" style="width:239px">
							<div style="margin:8px 0px 0px 16px; width:185px">
								<img src="images/0t2.jpg" align="top" alt="" /><br />
								<img src="images/spacer.gif" width="1" height="13" alt="" /><br />
								<ul>
									<li><a href="#">Corporate Information</a></li>
									<li><a href="#">Investor Relations</a></li>
									<li><a href="#">Corporate Governance</a></li>
									<li><a href="#">Corporate Values</a></li>
									<li><a href="#">Motivating Employees</a></li>
									<li><a href="#">Internal Communication</a></li>
									<li><a href="#">Careers</a></li>
								</ul>
								<img src="images/spacer.gif" width="1" height="17" alt="" /><br />
								<div align="right">		
									<a href="#" class="rdmr">learn more</a>
								</div>
							</div>
						</div>
						<div class="dc" style="width:241px">
							<div style="background:url(images/b4m.jpg) 0 0 repeat-y">
								<div style="background:url(images/b4t.jpg) 0 0 no-repeat">
									<div style="background:url(images/b4b.jpg) bottom left no-repeat">
										<img src="images/spacer.gif" width="1" height="22" alt="" /><br />
										<img src="images/0t3.gif" align="top" alt="" style="margin:0px 0px 0px 15px;" /><br />
										<img src="images/spacer.gif" width="1" height="17" alt="" /><br />
										<div style="margin:0px 0px 0px 22px; width:200px">
										<strong>Aenean nonummy henrit mauris. </strong><br /><img src="images/spacer.gif" width="1" height="15" alt="" /><br />

Phasellus porta cipit varius mi. Cum sociis na pen dui. Fus ugiat male odiorbnc odio, gviarsus nuctu lorem enaqorci pemagna. Donec clesumetm onstetuer adscing elit. Mrisntum dicm magnareet aliqu am leo.<br /><img src="images/spacer.gif" width="1" height="17" alt="" /><br />
											<div align="right">
												<strong style="color:5486a9">Stella White, <a href="#" style="color:#5486a9">IT Industries.</a></strong>
											</div>
											<img src="images/spacer.gif" width="1" height="22" alt="" /><br />
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="dr"><div class="dc"><img src="images/spacer.gif" width="1" height="15" alt="" /><br /></div></div>
	
</div>
	
</body>
</html> 
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?