Complemento de ciclo jquery: ¿manipular los botones siguiente/anterior?

Creé una presentación de diapositivas jquery estándar a partir de jquery complemento de ciclo, que no cambié. Ahora todo funciona bien después de seguir así tutorial. Mi pregunta ahora es, ¿alguien sabe cómo cambiar el código de los complementos, que los botones anterior y siguiente no se muestran en mouseOver, sino solo uno de ellos, según en qué mitad de la presentación de diapositivas se encuentra el mouse?

Estaría muy contento si alguien me puede ayudar :)

preguntado el 01 de junio de 12 a las 12:06

¿Puede proporcionar algunos comentarios sobre las respuestas o marcar una de ellas como aceptada para futuros usuarios? Así es como funciona StackOverflow. -

2 Respuestas

Actualizar. No estaba contento con mi última actualización, ya que funcionó, pero podría haber sido un poco más limpio.

JSFiddle:

http://jsfiddle.net/lucuma/fg6d4/10/

$(document).ready(function() {
$('#sliders').hover(
function() {

    $('.controller', this).fadeIn();
}, function() {
    $('.controller', this).fadeOut();
});

$('#slideshow').cycle({
    prev: $('.controller .prev', this),
    next: $('.controller .next', this),
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
        // you can easily adapt this to hide prev on firstslide and next on last slide
        if (options.currSlide < options.slideCount / 2) {
            $(options.prev).hide();
            $(options.next).show();
        } else {
            $(options.prev).show();
            $(options.next).hide();
        }

    }

});

});

HTML:

<div id="sliders">

    <div id="slideshow">

      <div><img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" /></div>
      <div><img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" /></div>
      <div><img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" /></div>
   </div>
    <div class="controller">
      <a href="#" class="prev">prev</a>
      <a href="#" class="next">next</a>
    </div>
</div>
​

CSS:

#sliders{width:500px;height:500px;position:relative}
#slideshow {width:100%;height:100%;}
#sliders .controller {display:none;position:absolute;top:50px;z-index:100;width:100%;height:20px}
#sliders .controller a {background-color:white;padding:10px;color:red}
#sliders .controller a.next {position:absolute;right:0}

Respondido el 01 de junio de 12 a las 23:06

Creo que tendrá que agregar dos elementos superpuestos en la parte superior de la imagen y agregar un interruptor al pasar el cursor. El ciclo no alterna ni posiciona los botones automáticamente.

Respondido el 01 de junio de 12 a las 12:06

gracias por la respuesta rapida, podrias darme un ejemplo o decirme donde encontrar un tutorial, ya que acabo de empezar java y jquery con el tutorial de arriba.. - ibanes88

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.