[SOLUCIONADO] Novato en Jquery

diegoAlexan1 · #1 (**permalink**) 15/12/2015, 07:45

Hola a todos,

Bueno soy nuevo en jquery y estoy tratando de aprender a utilizar los efectos para crear un slide sencillo sin usar plugins, el codigo que tengo es el siguiente:

Código:

$(document).ready(inicioeventos);
var actual = 1;

function inicioeventos(){
	var x;
	x=$('#ant');
	x.click(anterior);
	x=$('#sig');
	x.click(siguiente);
}

function siguiente(){
	var x;
	actual++;
	if (actual>3){
		actual=1;
	}
	x=$('.slide').children('img');
	x.eq(0).hide();
	x.eq(1).attr("src","slider/sl"+actual+".jpg").slideDown('slow');
	
}

el problema es que el efecto es realizado solo para la primera imagen, luego cuando hago clic cambia la imagen pero esta vez sin el efecto slideDown, debe ser por la seleccion del elemento del DOM pero no se como solucionarlo.

infoturnosya · #2 (**permalink**) 15/12/2015, 08:23

podrias colocar el codigo html?

diegoAlexan1 · #3 (**permalink**) 15/12/2015, 08:31

Claro, este el html, el error esta en que cuando inserta el img vacio despues solo le cambia el atributo src, pero la solución ??

Código:

<DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"></meta>
		<title>Bienvenido</title>
		<link rel="stylesheet" href="css/style.css"></link>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js" ></script>
		<script type="text/javascript" src="scripts/slide.js"></script>
	</head>
	<body>
		<header>
			<img id="logo" src="img/img1.jpg"></img>
			<nav>
				<ul>
					<li><a href="#">Inicio</a></li>
					<li><a href="#">Item 1</a></li>
					<li><a href="#">Item 2</a></li>
					<li><a href="#">Item 3</a></li>
				</ul>
			</nav>
			<section class='slide'>
				<img src='slider/sl1.jpg'></img>
				<img id='next'></img>
				<p id="ant">Anterior</p>
				<p id="sig">Siguiente</p>
			</section>
		</header>
	</body>
</html>

diegoAlexan1 · #4 (**permalink**) 15/12/2015, 09:43

Lo solucione añadiendo como parametro a la funcion fadeOut otra funcion en el callback...

Código Javascript:

Ver original$(document).ready(inicioeventos);
var actual = 1;
var elemento;
 
function inicioeventos(){
    var x;
    x=$('#ant');
    x.click(anterior);
    x=$('#sig');
    x.click(siguiente);
    elemento = 0;
}
 
 
function siguiente(){
    var x;
    x=$('.slide').children('img');
    x.attr("src","slider/sl"+actual+".jpg").fadeOut('slow',mostrar);
    actual++;
    if (actual>3){
        actual=1;
    }
    
}
 
function mostrar(){
    var x;
    x=$('.slide').children('img');
    x.attr("src","slider/sl"+actual+".jpg").fadeIn('fast');
}