La creación de la más simple de las resbalador de comentarios
La creación de la más simple de las resbalador de comentarios le ayudará a Su sitio de ser más respetable y brillante. Y la facilidad de uso de la pondrá a disposición para aquellos que recién se comienza a estudiar el web-programación. En internet hay un montón de diferentes controles deslizantes. Aquí Usted no verá, pero la labor que realiza este script, lo hace muy bien, y es comprensible. Así que vamos a empezar.
La creación de la más simple slider para los comentarios
En primer lugar, estamos ampliando el script de orden y hagamos de él, para que pueda funcionar incluso si el usuario tiene desactivado JavaScript.
Primer paso
Creación de una completa estructura HTML. Voy a copiar y pegar el código que utilizó en su proyecto.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id="slideshow"> <div id="slidesContainer"> <div class="slide"> <div class="post_otzivy"> Respuesta 2 </div> </div> <div class="slide"> <div class="post_otzivy"> Respuesta 2 </div> </div> <div class="slide"> <div class="post_otzivy"> Respuesta 3 </div> </div> </div> </div> <a href="javascript:void(0);" class="control prev" id="leftControl">< La anterior reseña</a> <a href="javascript:void(0);" class="control next" id="rightControl">La siguiente reseña ></a> |
Desde el código de la muestra que utilizamos los elementos de control de nuestro sitio web a través de palabras. Pero, si todo esto se añade al sitio, entonces no va a funcionar. Todo esto lo vamos a hacer mediante un script, y hasta que el código CSS, que crea un estilo en nuestro código. Tenga en cuenta, qué pequeño nos resulta código.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/********************************** Slider *************************************/ #slideshow #slidesContainer { margin:0 auto; width:560px; height:263px; overflow:auto; /* Publicamos el desplazamiento */ position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; width:540px; height:263px; } /** * Slideshow controls style rules. */ .control { display:block; width: 190px; color: black; position: relative; cursor: pointer; } |
Slider de comentarios, si está deshabilitado javascript, simplemente hacer el desplazamiento de los comentarios de abajo. Es muy cómodo. Y ahora lo más interesante que hacer. Es necesario insertar el código javascript.
Pero, para empezar, es necesario asegurarse de que nos está conectada la biblioteca de jQuerry. Si no lo conectamos a ella.
|
1 |
<script src="https://code.jquery.com/jquery-latest.js"></script> |
Más adelante, en el comienzo de nuestro sitio, antes de cerrado de la etiqueta </head> pegamos el código en las etiquetas <script></script>. Todos los comentarios se indican en el código.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<script> $(document).ready(function(){ var currentPosition = 0; var slideWidth = 560; var slides = $('.slide'); var numberOfSlides = slides.length; // Arreglamos el desplazamiento $('#slidesContainer').css('overflow', 'hidden'); // Pegamos todo .slides en el bloque #slideInner slides .wrapAll('<div id="slideInner"></div>') // Float left to display horizontally, readjust .slides width .css({ 'float' : 'left', 'width' : slideWidth }); // Establecemos el ancho #slideInner, igual a la anchura de todas las diapositivas $('#slideInner').css('width', slideWidth * numberOfSlides); // Escondemos la flecha de la derecha cuando se carga el script. manageControls(currentPosition); // Cogemos clic en la clase .controls $('.control') .bind('click', function(){ // La definición de una nueva posición currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; // Oculta / muestra los elementos de control manageControls(currentPosition); // Move slideInner using margin-left $('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition) }); }); // manageControls: muestra y oculta de la aguja en función de los valores currentPosition function manageControls(position){ // Ocultar la flecha a la izquierda, si es de izquierda de la diapositiva. if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() } // Ocultar la flecha de la derecha, si es la última diapositiva if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() } } }); </script> |
Lea con cuidado este código. He tratado en detalle a comentar, pero si Usted tiene preguntas, preguntar en los comentarios.
Contact Us
You are used to see a contact form here. Almost everyone does it. But while examining the behavior of people, we came to the conclusion that the form is completely unnecessary. In any case, it all comes down to discuss your project on WhatsApp. Why should we waste your time filling out various forms?