2011-12-11 13 views
0

Je suis en train de coder un effet de diaporama jQuery et j'ai besoin d'un peu d'aide. J'ai toutes les fonctionnalités sideshow qui fonctionnent correctement, mon seul problème est que je veux que mes flèches de navigation soient automatiquement positionnées de chaque côté de la boîte de diaporama (960px, centré sur l'écran).Positionnement automatique des flèches sur le diaporama

Le produit final devrait être quelque chose comme Kriesi fait ici: http://www.kriesi.at/themes/upscale/

Je l'ai regardé son code, mais ne peut pas comprendre tout à fait dehors. Toute aide serait appréciée!

Merci!

Répondre

1

Je ne comprends pas ce que vous entendez par "Je ne sais pas trop comment les positionner au départ sur le diaporama ... Si je le fais en CSS, cela ne fonctionnera pas sur toutes les résolutions d'écran. "...?

Si vous positionnez les flèches relatives au diaporama, il n'y aura pas de problème. Par exemple, pour les placer dans les coins supérieurs gauche et en haut à droite, sont les suivantes dans vos styles:

#slideshowcontainer{ 
    width: 960px; 
    height: 400px; 
    position: relative; 
} 
#leftarrow{ 
    position: absolute; 
    top: 0px; 
    left: -40px; /* position the arrow 40px to the left of the slideshow */ 
} 
#rightarrow{ 
    position: absolute; 
    top: 0px; 
    right: -40px; /* position the arrow 40px to the right of the slideshow */ 
} 

Évidemment, vous devrez ajuster les valeurs en fonction, en fonction de la taille de vos flèches et où vous voulez eux etc

+0

Oui, vous avez raison. Ma faute. Ça a été une longue journée:/ – GhostCode

+0

Pas de problème, nous pouvons tous aller un peu le cerveau mort de temps en temps :-) – FluffyKitten

1

Les flèches sont situées dans. Ce bloc est positionné comme absolu avec une valeur supérieure à 50% - 12px (margin-top: -12px); Ensuite, il y a une liste qui contient des images et d'autres données et affecte la hauteur de son parent. Donc, fondamentalement, dans le code, lorsque l'utilisateur clique sur une flèche, jQUery utilise probablement outerHeight() pour obtenir la hauteur des éléments li, puis utilise animate() pour changer la hauteur de la hauteur qui affecte la hauteur et dans son tour change doucement la position des flèches. Personnellement, je pense que c'est une mauvaise conception quand les flèches changent sa position. Très ennuyeux quand vous devez déplacer la souris de haut en bas chaque fois que vous voulez voir la diapositive suivante.

+0

Oui, je sais ce que vous voulez dire. Mes flèches devraient rester au même endroit, mais je ne sais pas trop comment les positionner au départ sur le diaporama ... Si je le fais en CSS, cela ne fonctionnera pas sur toutes les résolutions d'écran. – GhostCode

Questions connexes