Código de presentación de diapositivas de jquery: agregando clases anteriores y siguientes una mejor manera -- javascript campo con jquery campo con classes campo con css3 camp codereview Relacionados El problema

jQuery slideshow code - adding previous and next classes a better way


1
vote

problema

Español

Tengo una presentación de diapositivas en la imagen de conmutación de diapositivas de jquery automáticamente cada 5 segundos con transiciones CSS3. La imagen actual tiene la clase 99887766655443314 , la imagen anterior tiene la clase 998877766555443315 y la siguiente imagen tiene la clase 998877766555443316 . La primera imagen en la carga de la página tiene la clase 99887766655443317 para evitar la animación, y una clase 998877766555443318 cuando el usuario va al revés por el teclado o la paginación (necesita un estilo diferente como se ve a continuación). Esto es para diseñar las clases en CSS como esta:

  #include<stdio.h> #include<stdlib.h> #include<stdbool.h> #include "newAVL.h"  struct treenode {     int value;     int height;     node *left;     node *right;     node *parent; };  struct mytree {     node *root;     bool status; };  // functions provided by ADT  tree* new_tree() {     // constructor function for tree     tree *temp = (tree*)malloc(sizeof(tree));     temp->root = NULL;     temp->status = true;     return temp; }  node* getposition(node *ptr, int value) {     /*Return address of the node having value equal to "value", returns NULL if not found     ptr should be root of tree*/     if (ptr == NULL)     {         return NULL;     }     else if (value < ptr->value)     {         return getposition(ptr->left, value);     }     else if (value > ptr->value)     {         return getposition(ptr->right, value);     }     else     {         return (ptr);     }  }  node* parent(tree *obj, int value) {     //Returns parent of "ptr"     node *ptr = getposition(obj->root, value);     if (ptr)     {         return ptr->parent;     }     else     {         return NULL;     } }  bool isempty(tree *obj) {     return obj->status; }  node* leftchild(tree *obj, int value) {     //Returns leftchild of "ptr"     node *ptr = getposition(obj->root, value);     if (ptr)     {         return ptr->left;     }     else     {         return NULL;     } }  node* rightchild(tree *obj, int value) {     //Returns right child of "ptr"     node *ptr = obj->root;     if (ptr)     {         return ptr->right;     }     else     {         return NULL;     } }  void add(tree *obj, int value) {     // adds "value" to the tree, value must not be a member of set S. where S is set of all values     // stored in tree      if (obj->root == NULL)     {         node *temp = createnode(value);         obj->root = temp;         obj->status = false;     }     else     {         node *ptr = obj->root;         node *prev = NULL;         bool flag = true;         while (ptr != NULL)         {             if (value < ptr->value)             {                 flag = true;                 prev = ptr;                 ptr = ptr->left;             }             else             {                 flag = false;                 prev = ptr;                 ptr = ptr->right;             }         }          node *temp = createnode(value);         temp->parent = prev;         if (flag)         {             prev->left = temp;         }         else         {             prev->right = temp;         }          balance(obj, temp);     } }  void rmroot(tree *obj) {     //Removes root node of tree     if (obj->root)     {         rem(obj, obj->root);     } }  void rmnode(tree *obj, int value) {     //Removes node having value equal to "value" . no operation is performed if such a node is not found     node *temp = getposition(obj->root, value);     if (temp)     {         rem(obj, temp);     } }  void searchvalue(tree *obj, int value) {     //search the tree for value     node *temp = getposition(obj->root, value);     if (temp)     {         printf("  Value found  ");     }     else     {         printf("  Value not found  ");     } }  void inorder(tree *obj) {     /*Performs inorder traversal of tree*/     node *ptr = obj->root;     printf(" Inorder Traversal : ");     intraverse(ptr);     printf("  ");  }  void postorder(tree *obj) {     //Performs post order traversal of tree rooted at ptr     printf(" Postorder Traversal : ");     node *ptr = obj->root;     posttraverse(ptr);     printf("  "); }   // Helper functions for the ADT functions  static void posttraverse(node *ptr) {     if (ptr)     {         posttraverse(ptr->left);         posttraverse(ptr->right);         printf(" %d", ptr->value);     } }  static void intraverse(node *ptr) {     if (ptr)     {         intraverse(ptr->left);         printf(" %d", ptr->value);         intraverse(ptr->right);     } }  static void rem(tree *obj, node *ptr) {     /*Deletes node given by "ptr"*/      int var = nodetype(ptr);     node *father = ptr->parent;      switch (var)     {     case TYPEONE:         delntype1(obj);         break;     case TYPETWO:         delntype2(ptr);         break;     case TYPETHREE:         delntype3(ptr);         break;     case TYPEFOUR:         delntype4(ptr);         break;     case TYPEFIVE:         delntype5(obj, ptr);         break;     default:         break;      }      if (father)     {         if (isheightchanged(father))         {             setheight_toroot(father);         }         while (father)         {             if (isunbalanced(father))             {                 rearrange(obj, father);                 setheight_toroot(father);             }             father = father->parent;         }     } }  static node* createnode(int value) {     node *ptr = (node*)malloc(sizeof(node));     ptr->left = ptr->right = ptr->parent = NULL;     ptr->value = value;     ptr->height = 0;     return ptr; }  static int getheight(node *ptr) {     if (ptr == NULL)     {         return NULLHEIGHT;     }     else     {         return ptr->height;     } }  static void setheight_toroot(node *ptr) {     setheight(ptr, NULL); }  static void setheight(node *start, node *stop) {     //sets height of nodes beggining from start to stop(excluding)     while (start != stop)     {         start->height = findmax(getheight(start->right), getheight(start->left)) + 1;         start = start->parent;     }  }  static int getbalfac(node *ptr) {     //Returns balance factor of a node     if (ptr)     {         return (-(getheight(ptr->left)) + (getheight(ptr->right)));     }     else     {         return 0;     } }  static node* findpredecessor(tree *obj, node *ptr) {     if (ptr)     {         node *run = ptr->left;         node *father = ptr->parent;         if (run)         {             while (run->right)             {                 run = run->right;             }         }         else if ((father) && (ptr->value > father->value))         {             run = ptr->parent;         }         else         {             if (ptr->value > obj->root->value)             {                 run = obj->root;             }             else             {                 run = NULL;             }         }         return run;     }     else     {         return NULL;     } }  static bool isleftheavy(node *ptr) {     return (getheight(ptr->left) > getheight(ptr->right)); }  static bool isrightheavy(node *ptr) {     return (getheight(ptr->right) > getheight(ptr->left)); }  static bool isunbalanced(node *ptr) {     //Returns pointer to the first node which is unbalanced     int var = getbalfac(ptr);     if ((var < -1) || (var > 1))     {         return true;     }     else     {         return false;     } }  static bool isheightchanged(node *ptr) {     int first = ptr->height;     int second = findmax(getheight(ptr->left), getheight(ptr->right)) + 1;      if (first == second)     {         return false;     }     else     {         return true;     } }  static void rotateright(tree *obj, node *ptr) {     node *new_root = ptr->left;     ptr->left = new_root->right;      if (ptr->left)     {         ptr->left->parent = ptr;     }      new_root->right = ptr;      node *father = ptr->parent;     if (!father)     {         obj->root = new_root;         new_root->parent = NULL;     }     else     {         int var = childtype(ptr);         if (var == LEFTCHILD)         {             father->left = new_root;         }         else         {             father->right = new_root;         }         new_root->parent = father;     }     ptr->parent = new_root;  }  static void rotateleft(tree *obj, node *ptr) {     node *new_root = ptr->right;     ptr->right = new_root->left;      if (ptr->right)     {         ptr->right->parent = ptr;     }      new_root->left = ptr;      node *father = ptr->parent;     if (!father)     {         obj->root = new_root;         new_root->parent = NULL;     }     else     {         int var = childtype(ptr);         if (var == LEFTCHILD)         {             father->left = new_root;         }         else         {             father->right = new_root;         }         new_root->parent = father;     }     ptr->parent = new_root; }  static void rearrange(tree *obj, node *ptr) {     if (isleftheavy(ptr))     {         if (isrightheavy(ptr->left))         {             ptr->left->right->height++;             ptr->height -= 2;             ptr->left->height--;             rotateleft(obj, ptr->left);             rotateright(obj, ptr);         }          else         {             ptr->height -= 2;             rotateright(obj, ptr);         }     }      else if (isrightheavy(ptr))     {         if (isleftheavy(ptr->right))         {             ptr->right->left->height++;             ptr->height -= 2;             ptr->right->height--;             rotateright(obj, ptr->right);             rotateleft(obj, ptr);         }          else         {             ptr->height -= 2;             rotateleft(obj, ptr);         }     } }  static void balance(tree *obj, node *ptr) {     if (isheightchanged(ptr->parent))     {         while ((ptr) && (!isunbalanced(ptr)))         {             setheight(ptr, ptr->parent);             ptr = ptr->parent;         }          if (ptr)         {             setheight(ptr, ptr->parent);             rearrange(obj, ptr);         }     } }  static void delntype1(tree *obj) {     int var = roottype(obj->root);     node *temp = NULL;     switch (var)     {     case TYPETWO:         // root is leaf         free(obj->root);         obj->root = NULL;         obj->status = true;         break;      case TYPETHREE:         //root has only right child         temp = obj->root->right;         free(obj->root);         obj->root = temp;         obj->root->parent = NULL;         break;      case TYPEFOUR:         //root has only left child         temp = obj->root->left;         free(obj->root);         obj->root = temp;         obj->root->parent = NULL;         break;      case TYPEFIVE:         //root has both childs         delntype5(obj, obj->root);         break;     } }  static void delntype2(node *ptr) {     //this function deletes a leaf node     node *father = ptr->parent;     int var = childtype(ptr);      if (var == LEFTCHILD)     {         father->left = NULL;     }     else     {         father->right = NULL;     }      free(ptr);  }  static void delntype3(node *ptr) {     //this function deletes a internal node having only right child     node *father = ptr->parent;     int var = childtype(ptr);     if (var == LEFTCHILD)     {         father->left = ptr->right;     }     else     {         father->right = ptr->right;     }     ptr->right->parent = father;     free(ptr); }  static void delntype4(node *ptr) {     //this function delete an internal node having only left child     node *father = ptr->parent;     int var = childtype(ptr);     if (var == LEFTCHILD)     {         father->left = ptr->left;     }     else      {         father->right = ptr->left;     }     ptr->left->parent = father;     free(ptr); }  static void delntype5(tree *obj, node *ptr) {     node *temp = findpredecessor(obj, ptr);     int var = temp->value;     rmnode(obj, temp->value);     ptr->value = var; }   static int findmax(int a, int b) {     if (a > b)     {         return a;     }     else     {         return b;     } }  static int roottype(node *ptr) {     return findtype(ptr, 0); }  static int nodetype(node *ptr) {     return findtype(ptr, 1); }  static int findtype(node *ptr, int flag) {     /*Determines type of node. ex. leaf or internal*/     if ((ptr->parent == NULL) && (flag))     {         return TYPEONE;         //root     }     else if ((ptr->left == NULL) && (ptr->right == NULL))     {         return TYPETWO;         //leaf node     }     else if (ptr->left == NULL)     {         return TYPETHREE;         //internal node with right child     }     else if (ptr->right == NULL)     {         return TYPEFOUR;         //internal node with left child     }     else     {         return TYPEFIVE;         //internal node with left and right childs     }  }  static int childtype(node *ptr) {     /*Determine wether ptr is left child of its parent or right child*/     node *temp = ptr->parent;     if (temp)     {         if (temp->left == ptr)         {             return LEFTCHILD;         }         else         {             return RIGHTCHILD;         }     }     else     {         return 0;     } }  int main() {     tree *obj = new_tree();     for (int i = 0;i < 50;i++)     {         add(obj, i);     }      for (int i = 0;i < 40;i++)     {         rmroot(obj);     }      inorder(obj);     postorder(obj);      searchvalue(obj, 91);     return 0; } 9  

Esto está funcionando bien, pero como está codificado por mí en 60 líneas, puede ser algunas cosas que podrían haber sido mejores. Estoy específicamente insinuando cómo se agregan las clases anteriores y siguientes. Actualmente, actualmente hay 3 diapositivas, debe ser así y se codifica de esa manera, pero si en un punto debería agregar más, o menos, las diapositivas, debería funcionar.

  class BaseClass { }; class FirstSubClass : public BaseClass { }; class SecondSubClass : public BaseClass { };  TypeStore<BaseClass> store;  // Each of these returns a pointer to the newly created instance store.Create<BaseClass>(); store.Create<FirstSubClass>(); store.Create<SecondSubClass>();  // Each of these fails (returning nullptr) as an instance already exists for the type store.Create<BaseClass>(); store.Create<FirstSubClass>(); store.Create<SecondSubClass>();  // Returns pointers to the instances for each type or nullptr if it is not present store.Get<BaseClass>(); store.Get<FirstSubClass>(); store>Get<SecondSubClass>(); 0  

Como puede ver, cuando se encuentra en la tercera diapositiva, la primera diapositiva debe obtener la siguiente clase, y cuando esté en la primera diapositiva, la última diapositiva debe obtener la clase anterior.

Esta no es una forma semántica de hacerlo, lo sé, pero funciona por ahora.

Aquí está el código completo:

  class BaseClass { }; class FirstSubClass : public BaseClass { }; class SecondSubClass : public BaseClass { };  TypeStore<BaseClass> store;  // Each of these returns a pointer to the newly created instance store.Create<BaseClass>(); store.Create<FirstSubClass>(); store.Create<SecondSubClass>();  // Each of these fails (returning nullptr) as an instance already exists for the type store.Create<BaseClass>(); store.Create<FirstSubClass>(); store.Create<SecondSubClass>();  // Returns pointers to the instances for each type or nullptr if it is not present store.Get<BaseClass>(); store.Get<FirstSubClass>(); store>Get<SecondSubClass>(); 1  
Original en ingles

I have a slideshow in jQuery slideshow switching picture automatically every 5 seconds with CSS3 transitions. The current picture has the current class, the previous picture has the forrige class and the next picture has the neste class. The first picture on page load has the first class to avoid animation, and a baklengs class when the user goes backwards by keyboard or pagination (needs different styling as seen below). This is to style the classes in CSS like this:

#slideshow article:not(.first) { transition: left 1s; } #slideshow article.current { left: 0; z-index: 3; } #slideshow article.forrige { left: -100%; } #slideshow article.neste { left: 100%; } #slideshow article.neste:not(.baklengs), #slideshow article.forrige.baklengs { z-index: 1; } #slideshow article.forrige:not(.baklengs), #slideshow article.neste.baklengs { z-index: 2; } 

This is working fine, but as it is coded by me in 60 lines, it may be some things that could have been better. I'm specifically hinting to how the previous and next classes are added. There are currently always 3 slides, it should be that way and is coded that way, but if I at one point should add more, or less, slides, it should work.

if(jQuery("#slideshow article:nth-of-type(2)").hasClass("current")) {     jQuery("#slideshow article:first-of-type").addClass("forrige");     jQuery("#slideshow article:nth-of-type(3)").addClass("neste"); } else if(jQuery("#slideshow article:first-of-type").hasClass("current")) {     jQuery("#slideshow article:last-of-type").addClass("forrige");     jQuery("#slideshow article:nth-of-type(2)").addClass("neste"); } else if(jQuery("#slideshow article:last-of-type").hasClass("current")) {     jQuery("#slideshow article:nth-of-type(2)").addClass("forrige");     jQuery("#slideshow article:first-of-type").addClass("neste"); } 

As you can see, when on the third slide, the first slide should get the next class, and when on the first slide, the last slide should get the previous class.

This isn't a semantic way of doing it, I know, but it works for now.

Here's the full code:

var stopp, baklengs, antall = jQuery("#slideshow article").length, index = 0; function slideTo(idx) {     jQuery("#slideshow article, #slideshow nav a").removeAttr("class").filter(':nth-of-type(' + (idx+1) + ')').addClass("current");     if(jQuery("#slideshow article:nth-of-type(2)").hasClass("current")) {         jQuery("#slideshow article:first-of-type").addClass("forrige");         jQuery("#slideshow article:nth-of-type(3)").addClass("neste");     }     else if(jQuery("#slideshow article:first-of-type").hasClass("current")) {         jQuery("#slideshow article:last-of-type").addClass("forrige");         jQuery("#slideshow article:nth-of-type(2)").addClass("neste");     }     else if(jQuery("#slideshow article:last-of-type").hasClass("current")) {         jQuery("#slideshow article:nth-of-type(2)").addClass("forrige");         jQuery("#slideshow article:first-of-type").addClass("neste");     }     if(index > idx && !(index == antall - 1 && idx == 0) || (index == 0 && idx == antall - 1)) {         jQuery("#slideshow article:not(.current)").addClass("baklengs");     }     index = idx; }; function startCycle() {     stopp = setInterval(function() {         jQuery("#slideshow article").stop(true, true);         var idx = index + 1 > antall - 1 ? 0 : index + 1;         slideTo(idx);     }, 5500); };  if (antall > 1) {     jQuery("#slideshow").append("<nav>");     jQuery("#slideshow article").each(function() {         jQuery("#slideshow nav").append("<a>&bull;</a>");     }).filter(":first-of-type").addClass("current first");     jQuery("#slideshow article:nth-of-type(2)").addClass("neste");     jQuery("#slideshow article:last-of-type").addClass("forrige");     startCycle();     jQuery("#slideshow nav a").click(function() {         clearInterval(stopp);         startCycle();         var idx = jQuery("#slideshow nav a").index(this);         if (index === idx) return;         slideTo(idx);     }).filter(":first-of-type").addClass("current");     jQuery(document).keyup(function(e) {         if (e.keyCode == 37) {             clearInterval(stopp);             startCycle();             var idx = index - 1 < 0 ? antall - 1 : index - 1;             slideTo(idx);         }          else if (e.keyCode == 39) {             clearInterval(stopp);             startCycle();             var idx = index + 1 > antall - 1 ? 0 : index + 1;             slideTo(idx);         }     }); } 
           

Lista de respuestas

0
 
vote
vote
La mejor respuesta
 

Lo puse trabajando después de un rato obligándome a usar la parte lógica de mi cerebro. Así que esto:

  if(jQuery("#slideshow article:nth-of-type(2)").hasClass("current")) {     jQuery("#slideshow article:first-of-type").addClass("forrige");     jQuery("#slideshow article:nth-of-type(3)").addClass("neste"); } else if(jQuery("#slideshow article:first-of-type").hasClass("current")) {     jQuery("#slideshow article:last-of-type").addClass("forrige");     jQuery("#slideshow article:nth-of-type(2)").addClass("neste"); } else if(jQuery("#slideshow article:last-of-type").hasClass("current")) {     jQuery("#slideshow article:nth-of-type(2)").addClass("forrige");     jQuery("#slideshow article:first-of-type").addClass("neste"); }   

se convirtió en este simple código:

  jQuery("#slideshow article:nth-of-type(" + (idx > 0 ? idx : antall) + ")").addClass("forrige"); jQuery("#slideshow article:nth-of-type(" + (idx < antall - 1 ? idx + 2 : 1) + ")").addClass("neste");   

Ahora, cuando agrego más diapositivas, todo continúa trabajando.

Gracias por no ayudándome, jaja. Sin embargo, si tiene otras sugerencias para mejorar el código, hágamelo saber (y voy a expulsar su respuesta, por supuesto).

 

I got it working after a while by forcing me to use the logical part of my brain. So this:

if(jQuery("#slideshow article:nth-of-type(2)").hasClass("current")) {     jQuery("#slideshow article:first-of-type").addClass("forrige");     jQuery("#slideshow article:nth-of-type(3)").addClass("neste"); } else if(jQuery("#slideshow article:first-of-type").hasClass("current")) {     jQuery("#slideshow article:last-of-type").addClass("forrige");     jQuery("#slideshow article:nth-of-type(2)").addClass("neste"); } else if(jQuery("#slideshow article:last-of-type").hasClass("current")) {     jQuery("#slideshow article:nth-of-type(2)").addClass("forrige");     jQuery("#slideshow article:first-of-type").addClass("neste"); } 

Became this simple code:

jQuery("#slideshow article:nth-of-type(" + (idx > 0 ? idx : antall) + ")").addClass("forrige"); jQuery("#slideshow article:nth-of-type(" + (idx < antall - 1 ? idx + 2 : 1) + ")").addClass("neste"); 

Now when I add more slides, everything continues to work.

Thanks for not helping me, haha. However, if you have other suggestions to improve the code, please let me know (and I will upvote your answer, of course).

 
 

Relacionados problema

10  Sitio web de tritium  ( Tritium website ) 
Estoy trabajando en mi sitio web de tritium ( organizado en GitHub : Siéntase libre de bifurcarse y enviar solicitudes de tracción), y ahora estoy buscando ...

0  Etiquetado de grupo de radio y semántica  ( Radio group labelling and semantics ) 
Parece que no puedo obtener fieldset 's para reaccionar correctamente cuando se usa display:table y display:table-cell3 Incluso si reinicio los valores ...

3  Mostrando un hilador sobre contenido: desaparece algunos elementos y deshabilita haciendo clic en algunos elementos  ( Showing a spinner over content fade out some elements and disable clicking on ) 
Estoy mostrando un girador de carga dentro de varios elementos. Hay cuatro estados potenciales que un elemento podría estar en: reducción de la opacidad; n...

6  Simplificación algorítmica de las columnas de Miller  ( Algorithmic simplification of miller columns ) 
Fondo Insatisfecho con Implementaciones existentes de Miller columnas (usado para editar datos jerárquicos), decidí reinventa la rueda. Problema L...

2  Efecto simple pero increíble de desplazamiento de paralaje  ( Simple yet incredible parallax scrolling effect ) 
Quería aprender a crear efectos de desplazamiento increíble de desplazamiento de paralaje, así que decidí buscar cómo hacerlo, después de algunas buscando, pr...

5  CSS Mask Clipping y superposición SVG para lograr un efecto dos  ( Css mask clipping and overlay svg to achieve a two effect ) 
Actualmente estoy tratando de crear una superposición / enmascaramiento de dos SVG como la imagen a continuación: He creado un SVG para la superposición....

2  jquery y css3 presentación de diapositivas  ( Jquery and css3 slideshow ) 
He construido una presentación de diapositivas con jQuery y CSS3. jQuery se usa para activar los cambios de clase ( .slide1, .slide2 ... ) en el contenedor ...

7  Página web para la demostración posterior al blog  ( Web page for blog post demonstration ) 
Soy un CSS y HTML5 Newbie. Estoy creando una página web mínima para demostrar algo en una publicación de blog. Entonces, aunque no necesita mirarlo GRANDE , ...

3  MENÚ DESPUÉS DE RESPONSIVO Página con JavaScript  ( Responsive menu highlights page with javascript ) 
Este es un menú de navegación receptivo (CSS puro), que destaca la página con un corto javascript que encontré en línea. Lo tengo todo trabajando, pero el CSS...

4  Reduciendo las consultas @media  ( Reducing media queries ) 
En mi página web, tengo el siguiente @media consultas: /* Smartphones (iPhone 3GS/4 and others; portrait and landscape) */ @media only screen and (min-wi...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos