> >

Στυλ ρυθμιστικών

Τα κουμπιά θα πάρουν τη θέση τους χάρη στην απόλυτη τοποθέτηση σε σχέση με το δοχείο.slider-box

Slider-box( θέση : σχετική ; πλάτος : 320 εικονοστοιχεία ; ύψος : 210 εικονοστοιχεία ; υπερχείλιση : κρυφό ; ) .ρυθμιστικό ( θέση : σχετική ; πλάτος : 10000 εικονοστοιχεία ; ύψος : 210 εικονοστοιχεία ; ) . ρυθμιστικό img ( float . αριστερά . .prev , .slider-box .next( position : absolute ; top : 100 px ; display : block ; πλάτος : 29 px ; ύψος : 29 px ; cursor : pointer ; ) .slider-box .prev( left : 10px ; background : : . ../images/slider_controls.png ) no-repeat 0 0 ; ) .slider-box .next( right : 10px ; background : url (../images/slider_controls.png ) no-repeat -29px 0 ; )

Γραφή

Το ρυθμιστικό μετακινείται αυτόματα. Από προεπιλογή, η κίνηση πηγαίνει από αριστερά προς τα δεξιά, αλλά εάν είναι απαραίτητο, μπορείτε να αλλάξετε την κατεύθυνση της κίνησής της χρησιμοποιώντας τη μεταβλητή πορείας. Όταν αλλάζετε την τιμή της μεταβλητής από 1 σε -1, η κατεύθυνση του ρυθμιστή θα αλλάξει.

Οι εικόνες σε ένα ρυθμιστικό δεν πρέπει να αλλάζουν όταν ο κέρσορας βρίσκεται μέσα στο ρυθμιστικό. Σε τι χρησιμεύει; Όλα είναι απλά. Εάν ο δρομέας του ποντικιού βρίσκεται στο ρυθμιστικό, σημαίνει ότι ο επισκέπτης του ιστότοπου ενδιαφέρεται για το περιεχόμενό του. Αυτή τη στιγμή, μην αλλάζετε τις διαφάνειες αυτόματα.

$(function () ( var slider = $(".slider" ) , sliderContent = slider.html () , // Περιεχόμενο ρυθμιστικού slideWidth = $(".slider-box") .outerWidth() , // Πλάτος ολίσθησης slideCount = $(".slider img") .length, // Αριθμός διαφανειών prev = $(".slider-box .prev") , // Κουμπί επιστροφής επόμενο = $(".slider-box .next") , // Κουμπί προώθησης sliderInterval = 3300, // Διάστημα αλλαγής διαφανειών animateTime = 1000, // Ώρα για αλλαγή διαφανειώνμάθημα = 1 // Κατεύθυνση κίνησης ολισθητήρα (1 ή -1)περιθώριο = - πλάτος διαφάνειας; // Αρχική μετατόπιση διαφανειών$(".slider img:last" ) .clone () .prependTo (."slider" ) ; // Ένα αντίγραφο της τελευταίας διαφάνειας τοποθετείται στην αρχή.$(".slider img" ) .eq (1 ) .clone () .appendTo (."slider" ) ; // Ένα αντίγραφο της πρώτης διαφάνειας τοποθετείται στο τέλος.$(".slider" ) .css ("margin-left" , - slideWidth) ; // Container.slider μετατοπίζεται προς τα αριστερά κατά το πλάτος μιας διαφάνειας.συνάρτηση nextSlide() ( // Εκτελεί τη συνάρτηση animation() για να εκτελέσει τη μετάβαση της διαφάνειας. interval = window.setInterval (animate, sliderInterval) ; ) συνάρτηση animate() ( if (margin==- slideCount* slideWidth- slideWidth) ( // Εάν το ρυθμιστικό έχει φτάσει στο τέλος slider.css (( "marginLeft" :- slideWidth) ); // τότε το block.slider επιστρέφει στην αρχική του θέση margin=- slideWidth* 2 ; ) αλλιώς εάν (περιθώριο== 0 && πορεία==- 1 ) ( // Εάν το ρυθμιστικό βρίσκεται στην αρχή και πατηθεί το κουμπί πίσω slider.css (( "marginLeft" :- slideWidth* slideCount) ); // στη συνέχεια το block.slider μετακινείται στην τελική θέση margin=- slideWidth* slideCount+ slideWidth; ) άλλο ( // Εάν οι παραπάνω συνθήκες αποτύχουν, margin = περιθώριο - slideWidth* (μάθημα) ; Η τιμή του περιθωρίου // ορίζεται για να εμφανίζεται η επόμενη διαφάνεια) slider.animate (( "marginLeft" : margin) , animateTime) ; // Το Block.slider μετακινείται προς τα αριστερά κατά 1 διαφάνεια.) συνάρτηση sliderStop() ( // Λειτουργία διακοπής του ρυθμιστικού window.clearInterval(interval); )prev.click(function()( // Πατήθηκε το κουμπί Πίσω var course2 = πορεία; πορεία = - 1 ; animate() ; // Κλήση της συνάρτησης animate().πορεία = πορεία2 ; ) ) ; next.click(function()( // Πατήθηκε το κουμπί Πίσω if (slider.is (":animated" ) ) ( return false ; ) // Εάν δεν εμφανίζεται κινούμενη εικόνα var course2 = πορεία; // Προσωρινή μεταβλητή για την αποθήκευση της τιμής φυσικάπορεία = 1 ; // Ορίστε την κατεύθυνση του ρυθμιστικού από τα δεξιά προς τα αριστερά animate() ; // Κλήση της συνάρτησης animate().πορεία = πορεία2 ; // Η μεταβλητή course επιστρέφει στην αρχική της τιμή) ) ; slider.add(next) .add(prev) .hover(function()( // Εάν ο δρομέας του ποντικιού βρίσκεται μέσα στο ρυθμιστικό sliderStop() ; // Η συνάρτηση sliderStop() καλείται για παύση του ρυθμιστικού) , nextSlide); // Όταν ο δρομέας φεύγει από το ρυθμιστικό, η κίνηση συνεχίζεται. nextSlide() ; // Κλήση της συνάρτησης nextSlide(). } ) ;

Αποδείχθηκε ένα τέτοιο ρυθμιστικό με τα κουμπιά "εμπρός" και "πίσω"

Ο χρόνος δεν σταματά και μαζί του και η πρόοδος. Αυτό επηρέασε και το Διαδίκτυο. Μπορείτε ήδη να παρατηρήσετε πώς αλλάζει η εμφάνιση των τοποθεσιών και η προσαρμοστική σχεδίαση είναι ιδιαίτερα δημοφιλής. Για το λόγο αυτό, προσαρμοστικό ρυθμιστικά ιστότοπουέγινε πολύ δημοφιλής και σχετικός. Υπήρξαν αρκετά νέα αποκριτικά ρυθμιστικά jquery, γκαλερί και καρουζέλ.

Εάν θέλετε να εγκαταστήσετε τη γενική ολισθητήςή στροβιλοδρόμιομπορείτε να μεταβείτε στον ιστότοπό σας από

Ρυθμιστικά για τον ιστότοπο

1. Ρυθμιστικό Responsive Horizontal Posts

Οριζόντιο καρουζέλ με απόκριση με λεπτομερείς οδηγίες εγκατάστασης. Είναι φτιαγμένο σε απλό στυλ, αλλά μπορείτε να το διαμορφώσετε μόνοι σας.

2. Ρυθμιστικό στο Glide.js

Αυτό το ρυθμιστικό είναι κατάλληλο για κάθε ιστότοπο. Χρησιμοποιεί ανοιχτού κώδικα Glide.js. Τα χρώματα του ρυθμιστικού μπορούν εύκολα να αλλάξουν.

Responsive ρυθμιστικά για έναν ιστότοπο με περιεχόμενο. Το αποκορύφωμα αυτού του ρυθμιστικού είναι το 3d εφέ των εικόνων, καθώς και διάφορα κινούμενα σχέδια τυχαίας εμφάνισης.

4. Ρυθμιστικό με χρήση καμβά HTML5

Πολύ όμορφο και εντυπωσιακό ρυθμιστικό με διαδραστικά σωματίδια. Φτιαγμένο με καμβά HTML5

5. Ρυθμιστικό μορφοποίησης εικόνας

Ρυθμιστικό εφέ Morph. Σε αυτό το παράδειγμα, το ρυθμιστικό είναι κατάλληλο για το χαρτοφυλάκιο ενός προγραμματιστή ιστού ή ενός web studio με τη μορφή χαρτοφυλακίου.

6. Κυκλικό ρυθμιστικό

Ρυθμιστικό σε μορφή κύκλου με εφέ αναστροφής της εικόνας.

7. Θολό ρυθμιστικό φόντου

Αποκριτικό ρυθμιστικό με εναλλαγή και θάμπωμα φόντου.

8. Αποκριτικό ρυθμιστικό μόδας

Απλό, ελαφρύ και ανταποκρινόμενο ρυθμιστικό ιστότοπου.

9. Slicebox - slider εικόνας jQuery 3D(ΕΠΙΚΑΙΡΟΠΟΙΗΜΕΝΟ)

Ενημερωμένη έκδοση του Slicebox ρυθμιστικό με διορθώσεις και νέες δυνατότητες.

Ένα πρόσθετο jQuery για τη δημιουργία ενός ευέλικτου πλέγματος εικόνων που θα αλλάζει λήψεις χρησιμοποιώντας διαφορετικά κινούμενα σχέδια και χρονισμούς.

Ρυθμιστικά για την τοποθεσία το δεύτερο μέρος.

11.Ρυθμιστικό Flex

Καθολική δωρεάν προσθήκη για τον ιστότοπό σας. Αυτό το πρόσθετο διατίθεται σε πολλαπλές επιλογές ρυθμιστικού και καρουζέλ.

12. Κορνίζα

Φωτόραμαείναι ένα καθολικό πρόσθετο. Έχει πολλές ρυθμίσεις. Όλα λειτουργούν γρήγορα και εύκολα, υπάρχει και η δυνατότητα προβολής διαφανειών σε πλήρη οθόνη. Το ρυθμιστικό μπορεί να χρησιμοποιηθεί τόσο σε σταθερό μέγεθος όσο και προσαρμοστικό, με και χωρίς μικρογραφίες, με και χωρίς κυκλική κύλιση και πολλά άλλα. Με βάση το πλαίσιο φωτογραφιών, μπορείτε να δημιουργήσετε ενδιαφέροντα προσαρμοστικά ρυθμιστικά για τον ιστότοπο.

ΥΣΤΕΡΟΓΡΑΦΟ.Έβαλα το ρυθμιστικό αρκετές φορές και νομίζω ότι είναι από τα καλύτερα

13. Δωρεάν και αποκριτικό ρυθμιστικό 3D Thumbnail Gallery.

Πειραματική συλλογή slider 3DPanelLayoutμε πλέγμα και ενδιαφέροντα εφέ κινουμένων σχεδίων.

14. Ρυθμιστικό στο css3

Αποκριτικό ρυθμιστικό κατασκευασμένο με χρήση css3 με ομαλή εμφάνιση περιεχομένου και ελαφριά κινούμενη εικόνα.

είναι ένα ρυθμιστικό εικόνας με εκπληκτικά γραφικά και κινούμενα σχέδια.

17.Ελαστικό

Ελαστικό ρυθμιστικό με πλήρη απόκριση και μικρογραφίες διαφανειών.

18. Σχισμός

Αυτό είναι ένα ρυθμιστικό που ανταποκρίνεται σε πλήρη οθόνη που χρησιμοποιεί κινούμενα σχέδια css3. Το slider έγινε σε δύο εκδόσεις και το animation έγινε αρκετά ασυνήθιστα.

19. Responsive photo gallery plus

Απλή δωρεάν συλλογή ρυθμιστικών με μεταφόρτωση εικόνων.

20. Αποκριτικό ρυθμιστικό για WordPress

Αποκριτικό και δωρεάν ρυθμιστικό για WP.

21. Ρυθμιστικό περιεχομένου Parallax

Ρυθμιστικό με εφέ παράλλαξης και έλεγχος κάθε στοιχείου με CSS3.

22. Ρυθμιστικό με δέσιμο μουσικής

Ρυθμιστικό με χρησιμοποιώντας το JPlayer ανοιχτού κώδικα. Αυτό το ρυθμιστικό μοιάζει με παρουσίαση με μουσική.

Ρυθμιστικά για τον ιστότοπο το τρίτο μέρος.

23. Ρυθμιστικό με jmpress.js

Αποκριτικό ρυθμιστικό με βάση jmpress.js και ως εκ τούτου θα επιτρέψει την εφαρμογή μερικών ενδιαφέροντων τρισδιάστατων εφέ στις διαφάνειες.

24. Fast Hover Slideshow

Παρουσίαση διαφανειών με γρήγορη εναλλαγή διαφανειών. Διακόπτης slides σε λειτουργία αιώρησης.

Ακορντεόν εικόνας με css3.

Αυτή είναι μια αποκριτική συλλογή που είναι βελτιστοποιημένη για συσκευές αφής.

29.Μοντάζ εικόνας με jQuery

Αυτόματη διάταξη εικόνων ανάλογα με το πλάτος της οθόνης. Ένα πολύ χρήσιμο και ενδιαφέρον πράγμα κατά την ανάπτυξη ενός ιστότοπου χαρτοφυλακίου.

33. Φωτογραφικός χάρτης πολλαπλών επιπέδων.

Αυτός είναι ένας χάρτης πολλαπλών επιπέδων - η συλλογή εικόνων σάς επιτρέπει να εμφανίζετε εικόνες που σχετίζονται με την τοποθεσία τους. Βασισμένο στους χάρτες google. Η δεξιά πλευρά δείχνει μια μικρογραφία εικόνας που μπορεί να προβληθεί σε ένα φωτεινό πλαίσιο όταν κάνετε κλικ σε αυτήν.

34. Συλλογή μικρογραφιών πλήρους οθόνης

Αποκριτική συλλογή ρυθμιστικών με μικρογραφία και περιγραφή διαφανειών.

Τα ρυθμιστικά για τον ιστότοπο ενημερώνονται συνεχώς και ο αριθμός τους αυξάνεται καθημερινά. Αν έχετε τα αγαπημένα σας ρυθμιστικά ή ίσως δεν βρήκατε αυτό που ψάχνατε, τότε γράψτε στα σχόλια και θα προσπαθήσω να σας βοηθήσω.

Από τον συγγραφέα:παρά τις φήμες για τον υποτιθέμενο «θάνατο» του τμήματος των ιστοσελίδων που είναι ορατό χωρίς κύλιση, η ανάγκη για ένα καλό ρυθμιστικό δεν έχει εξαφανιστεί πουθενά. Ας είμαστε ειλικρινείς για ένα δευτερόλεπτο - τα ρυθμιστικά είναι διασκεδαστικά. Επιπλέον, τίποτα άλλο, σε αντίθεση με το μετακινούμενο περιεχόμενο, δεν προκαλεί ένα φαινόμενο "wow" στον χρήστη. Όλα τα ρυθμιστικά είναι ένα σύνολο πολλών διαφανειών που αντικαθιστούν το ένα το άλλο και είναι εξαιρετικά σημαντικό ο κωδικός του ρυθμιστικού να είναι όσο το δυνατόν πιο ελαφρύς. Εδώ είναι χρήσιμο το jQuery.

Ρίξτε μια ματιά σε 20 ρυθμιστικά jQuery από το Envato Market και θα δείτε ότι υπάρχουν ρυθμιστικά που είναι κάτι περισσότερο από ένα απλό μπλοκ ρυθμιστικών.

1. RoyalSlider - Συλλογή εικόνων με οθόνη αφής με jQuery

Τώρα ένα ρυθμιστικό με απόκριση που είναι επίσης φιλικό στην οθόνη αφής σημαίνει πολύ περισσότερα από ό,τι παλιά. Το RoyalSlider συνδυάζει και τα δύο χαρακτηριστικά: προσαρμοστικότητα και εργασία με οθόνες αφής. Μια καλή επιλογή καθώς η συλλογή είναι γραμμένη σε HTML5 και CSS3.

Μερικά ενδιαφέροντα χαρακτηριστικά:

Πώς να δημιουργήσετε έναν ιστότοπο μόνοι σας;

Βελτιστοποίηση SEO

Υψηλή προσαρμοστικότητα

Πάνω από 10 πρότυπα εκκίνησης

Υπάρχει μια εναλλακτική για τις μεταβάσεις CSS3

Κατά τη γνώμη μου, το πιο ωραίο χαρακτηριστικό είναι η "αρθρωτή αρχιτεκτονική σεναρίων", η οποία σας επιτρέπει να απενεργοποιήσετε περιττά πράγματα από το κύριο αρχείο JS, μειώνοντας έτσι το βάρος. Το RoyalSlider, μια συλλογή εικόνων με οθόνη αφής jQuery, είναι ένα ισχυρό ρυθμιστικό JavaScript που πρέπει να είναι απαραίτητο για την εργαλειοθήκη οποιουδήποτε προγραμματιστή.

2. Slider Revolution Responsive jQuery Plugin

Δεν είναι εύκολο να κάνεις κάτι «επαναστατικό» με ένα slider. Όσον αφορά τα ρυθμιστικά, υπάρχουν τόσες πολλές δυνατότητες που μπορείτε να προσθέσετε σε αυτά. Ωστόσο, το Slider Revolution είναι μια πραγματικά καλή προσπάθεια. Μεταξύ των ρυθμιστικών jQuery, αυτή η εμφάνιση ικανοποιεί όλες τις πιθανές απαιτήσεις σας.

Η λίστα με τα χαρακτηριστικά του ρυθμιστικού είναι τόσο μεγάλη, οπότε θα απαριθμήσω μόνο τα καλύτερα:

Εφέ Parallax και προσαρμοσμένη κινούμενη εικόνα

Απεριόριστα επίπεδα και διαφάνειες με συνδέσμους

έτοιμα προς χρήση, βαθιά προσαρμόσιμα στυλ

και πολλα ΑΚΟΜΑ

Η δυνατότητα προσθήκης εικόνας, ενσωματωμένου προγράμματος αναπαραγωγής βίντεο και συνδέσμων μέσων κοινωνικής δικτύωσης καθιστά το Slider Revolution μία από τις πιο ευέλικτες και προσαρμόσιμες επιλογές στον Ιστό.

3. LayerSlider Responsive jQuery slider plugin

Ο τίτλος "LayerSlider Responsive jQuery Slider Plugin" δεν ανταποκρίνεται πραγματικά σε αυτό το ρυθμιστικό.
200+ 2D και 3D μεταβάσεις διαφανειών θα γυρίσουν το κεφάλι οποιουδήποτε.

Μερικά αξιοσημείωτα χαρακτηριστικά:

13 skins και 3 τύπους μενού

Δυνατότητα τοποθέτησης σταθερής εικόνας πάνω από το ρυθμιστικό

Και εναλλακτικό jQuery

Και πολλα ΑΚΟΜΑ

Όπως και με το προηγούμενο ρυθμιστικό, μπορεί να προστεθεί σχεδόν οποιοδήποτε περιεχόμενο, ακόμη και περιεχόμενο πολυμέσων μόνιμο HTML5. Το LayerSlider ζωντανεύει τα ρυθμιστικά και είναι επίσης πολύ όμορφο.

4. jQuery Banner Rotator / Slideshow

Το jQuery Banner Rotator / Slideshow είναι ένα αρκετά απλό ρυθμιστικό που δεν θυσιάζει καμία από τις βασικές λειτουργίες.

Δυνατότητες:

Συμβουλές εργαλείων, ένθετα κειμένου κ.λπ.

Προεπισκόπηση και διάφορες επιλογές για την προβολή στοιχείων

Χρονοδιακόπτης με καθυστέρηση για ένα ρυθμιστικό ή για όλους

Πολλαπλές μεταβάσεις για όλες τις διαφάνειες ή διαφορετικές μεταβάσεις για κάθε μία ξεχωριστά

Το jQuery Banner Rotator / Slideshow έχει μόνο βασικές λειτουργίες σε σύγκριση με άλλα ρυθμιστικά jQuery, αλλά δεν πρέπει να το ξεχάσετε.

5. All In One Slider - Responsive jQuery Slider Plugin

Κάθε ρυθμιστικό που εμφανίζεται στον Ιστό έχει το δικό του μοναδικό όραμα και επιλύει τυχόν προβλήματα στον τομέα του. Όχι όμως αυτό. Το All In One Slider μπορεί να ονομαστεί "all inclusive".

Νομίζω ότι οι περισσότεροι προγραμματιστές και σχεδιαστές ιστού έχουν μια δοκιμασμένη λύση, αλλά πάντα αναζητούν κάτι νέο. Και αυτό το «κάτι νέο» περιλαμβάνει:

Περιστροφέας πανό

πανό προεπισκόπησης

Πανό λίστας αναπαραγωγής

Ρυθμιστικό περιεχομένου

Στροβιλοδρόμιο

Όλοι οι τύποι ρυθμιστικών υποστηρίζουν τις περισσότερες, αν όχι όλες, τις λειτουργίες που απαιτούνται από τα ρυθμιστικά jQuery. Το All In One Slider θα είναι το All Inclusive σας;

6. UnoSlider - Αποκριτικό ρυθμιστικό οθόνης αφής

Εάν το ρυθμιστικό σας δεν αποκρίνεται και δεν υποστηρίζει οθόνες αφής, τότε έχετε λάθος ρυθμιστικό. Το UnoSlider είναι σωστό.

Αυτό το ρυθμιστικό έχει βρει τη θέση του στον ήλιο ανάμεσα στην απλότητα και το πλούσιο σύνολο χαρακτηριστικών. Λειτουργίες:

Υποστήριξη θεμάτων

12 προκατασκευασμένα θέματα

40 μεταβάσεις

Υποστήριξη IE6+

Όλες οι λειτουργίες με έμφαση στη σχεδίαση και το στυλ, καθιστώντας το UnoSlider ένα εξαιρετικό ρυθμιστικό περιεχομένου με δυνατότητα προσθήκης θεμάτων.

7. Master Slider - slider οθόνης αφής jQuery

Ψάχνετε για "ένα ρυθμιστικό jQuery για να τα κυβερνά όλα"; Δοκιμάστε το Master Slider – ρυθμιστικό οθόνης αφής jQuery για διαφορετικά μεγέθη οθόνης…

Όταν πρόκειται για καλό σχεδιασμό, αυτό το παράδειγμα είναι ένα από τα καλύτερα:

Πάνω από 25 πρότυπα

Επιταχυνόμενες μεταβάσεις υλικού

Αγγίξτε και σύρετε την υποστήριξη

Και πολλα ΑΚΟΜΑ

Διαδραστικές μεταβάσεις, κινούμενα επίπεδα και hotspot σίγουρα θα τραβήξουν την προσοχή σας. Το Master Slider είναι ένα έργο τέχνης.

8. TouchCarousel - κύλιση και ρυθμιστικό περιεχομένου jQuery

Το TouchCarousel προσελκύει με δωρεάν υποστήριξη και ενημερώσεις. Ωστόσο, δεν είναι όλα αυτά τα χαρακτηριστικά αυτού του ελαφρού ρυθμιστικού καρουζέλ jQuery.

Εάν το όνομα περιέχει τη λέξη "touch", μπορείτε να μαντέψετε ότι το ρυθμιστικό αποκρίνεται πλήρως και υποστηρίζει την αφή. Αλλα χαρακτηριστικά:

Βελτιστοποίηση SEO

Έξυπνη αυτόματη αναπαραγωγή

CSS3 επιταχυνόμενες μεταβάσεις υλικού

Προσαρμόσιμο UI και 4 skins για Photoshop

Το TouchCarousel, λόγω της μοναδικής φυσικής κύλισης διαφανειών, είναι ένα εντελώς νέο επίπεδο εμπειρίας σε κινητές συσκευές.

9. Advanced Slider - jQuery XML Slider

Τα ρυθμιστικά jQuery μπορούν να χρησιμοποιηθούν για περισσότερα από ιστοσελίδες. Μπορούν επίσης να είναι χρήσιμα σε διαδικτυακές εφαρμογές. Το Advanced Slider σάς επιτρέπει να το κάνετε αυτό.

Με τη σήμανση HTML ή XML, αυτό το προηγμένο ρυθμιστικό κάνει μια μόνιμη εντύπωση:

Κινούμενα επίπεδα και έξυπνο βίντεο

100+ μεταβάσεις και 150+ προσαρμοσμένες ιδιότητες

15 slider skins, 7 skinbars scrollbar και υποστήριξη native lightbox

Πλοήγηση με πληκτρολόγιο, υποστήριξη αφής και πλήρης προσαρμογή

Και πολλα ΑΚΟΜΑ

Ωστόσο, το καλύτερο χαρακτηριστικό είναι το Advanced Slider, το jQuery XML Slider API, το οποίο κάνει το ρυθμιστικό την τέλεια επιλογή για την εφαρμογή web σας.

10. jQuery Slider Zoom In/Out Εφέ Πλήρως απόκριση

Ένα από αυτά τα slider jQuery που θα σας κάνουν να θέλετε να παρακολουθήσετε ένα demo πριν ξεκινήσετε να διαβάζετε για τις δυνατότητές του. Απλώς θέλετε να καταλάβετε τι σημαίνει αυτό το «φαινόμενο μεγέθυνσης/σμίκρυνσης».

Το εφέ ζουμ είναι μάλλον αδύναμο, αλλά προσθέτει μια αίσθηση ελέγχου και μια πραγματική πινελιά στην εικόνα, ενώ το υπόλοιπο ρυθμιστικό είναι στατικό. Χαρακτηριστικά ρυθμιστικού:

Μεταβάσεις επιπέδου CSS3

Επιλογή τέλους κινούμενης εικόνας για επίπεδα

Επιλογές σταθερού πλάτους, πλήρους οθόνης και πλήρους πλάτους

Κινούμενο κείμενο με μορφοποίηση HTML και CSS

Τα περισσότερα ρυθμιστικά προσπαθούν να συσκευάσουν όσο το δυνατόν περισσότερα εφέ και το jQuery Slider Zoom In/Out Effect Fully Responsive έχει μόνο εφέ Ken Burns, αλλά έχει εφαρμοστεί καλά.

11. jQuery Carousel Evolution

Όπως το προαναφερθέν Advanced Slider - jQuery XML Slider, το jQuery Carousel Evolution έχει το δικό του API που μπορεί να χρησιμοποιηθεί για τη βελτίωση της λειτουργικότητας ή την ενσωμάτωση του ρυθμιστικού σε άλλο έργο.

Πώς να δημιουργήσετε έναν ιστότοπο μόνοι σας;

Ποιες τεχνολογίες και γνώσεις χρειάζονται σήμερα για να δημιουργήσετε μόνοι σας ιστοσελίδες; Μάθετε Εντατικά!

Με εικόνες, σήμανση HTML, βίντεο YouTube και Vimeo, λαμβάνετε επίσης:

Βελτιστοποίηση SEO

9 στυλ καρουζέλ

Εφέ σκιάς και αντανάκλασης

Το μέγεθος της εικόνας μπορεί να ρυθμιστεί, τόσο μπροστά όσο και πίσω

Το jQuery Carousel Evolution είναι ένα απλό καρουζέλ με πολλές χρήσεις.

12 Sexy Slider

Το Sexy Slider δεν είναι τόσο σέξι όσο πριν. Ωστόσο, λόγω της ηλικίας του, αυτό το ρυθμιστικό είναι αξιόπιστο.

Με την πρώτη ματιά, το ρυθμιστικό δεν είναι πολύ εντυπωσιακό, αλλά αν είναι καλά διαμορφωμένο, θα ταιριάζει τέλεια στο σχέδιό σας. Δυνατότητες:

Αυτόματη αναπαραγωγή διαφανειών

Λεζάντες εικόνων

Συνεχής αναπαραγωγή διαφανειών

6 εφέ μετάβασης

Το Sexy Slider σας περιμένει να ξεκλειδώσετε την πλήρη ισχύ του και να απελευθερώσετε τις δυνατότητές του.

13. jQuery Image & Content Scroller με Lightbox

Με όλα αυτά τα φιλικά προς κινητά σχέδια και την υποστήριξη οθόνης αφής, είναι ωραίο να βλέπετε ένα ρυθμιστικό jQuery που δεν έχει ξεχάσει την επιφάνεια εργασίας.

Το jQuery Image & Content Scroller w/ Lightbox υποστηρίζει την είσοδο πληκτρολογίου και τον τροχό του ποντικιού, μεταξύ άλλων χαρακτηριστικών:

Οριζόντιος και κάθετος προσανατολισμός

Λεζάντες κειμένου μέσα ή έξω από το ρυθμιστικό

Δυνατότητα ορισμού ορισμένου αριθμού διαφανειών ορατών κάθε φορά

Ενσωματωμένες εικόνες, Flash, iframe, Ajax και περιεχόμενο ενσωματωμένο

Το ρυθμιστικό έχει επίσης ενσωματωμένο lightbox. Προαιρετικά, στο jQuery Image & Content Scroller w/ Lightbox, δεν μπορείτε να εκκινήσετε το ίδιο το ρυθμιστικό, αλλά να εκκινήσετε το lightbox ξεχωριστά.

14. Ημιδιαφανές - Responsive Banner Rotator / Slider

Τα περισσότερα ρυθμιστικά jQuery έχουν τη δική τους σχεδίαση. Μπορείτε να το προσαρμόσετε μόνοι σας, αλλά μερικές φορές θέλετε απλώς τα πάντα να βρίσκονται μέσα στο ρυθμιστικό. Η προσοχή σας αντιπροσωπεύεται από το Translucent.

Το ρυθμιστικό έχει πολλές προεπιλογές. Ίσως χρειαστεί απλώς να ορίσετε ορισμένες ρυθμίσεις και αυτό είναι. Δυνατότητες:

6 διαφορετικά στυλ

4 εφέ μετάβασης

2 μεταβάσεις ολίσθησης

Προσαρμόσιμα κουμπιά και ετικέτες

Όπως και άλλοι, αυτό το ρυθμιστικό έχει δυνατότητα αφής, απόκριση και επιτάχυνση υλικού. Το Translucent είναι ένα ρυθμιστικό με μίνιμαλ σχεδιασμό που βάζει το ίδιο το περιεχόμενο στην πρώτη γραμμή.

15. FSS - Προσθήκη συρόμενης ιστοσελίδας σε πλήρη οθόνη

Θέλετε να δημιουργήσετε έναν ιστότοπο σε πλήρη οθόνη με διαφάνειες; Τότε χρειάζεστε FSS.

Στην πραγματικότητα, είναι εξαιρετικά εύκολο να δημιουργήσετε έναν ιστότοπο με ρυθμιστικό πλήρους οθόνης χρησιμοποιώντας αυτό το ρυθμιστικό jQuery. Δυνατότητες:

Υποστήριξη AJAX

Γραμμή κύλισης

Υποστήριξη για τεχνολογία βαθιάς σύνδεσης

2 διαφορετικά εφέ μετάβασης

Αξίζει επίσης να δώσετε προσοχή στην υποστήριξη πληκτρολογίου και έναν οδηγό 11 σελίδων. Ωστόσο, η πραγματική εντύπωση είναι το βάρος του FSS, μόνο 5Kb.

16. Zozo Accordion - Ρυθμιστικό οθόνης αφής με απόκριση

Ένα άλλο παράδειγμα ενός ρυθμιστικού jQuery με εστίαση στο στυλ που κάνει καλά τη δουλειά. Το Zozo Accordion είναι απαραίτητο για όποιον αναζητά ένα καλό ρυθμιστικό ακορντεόν με δυνατότητα αλλαγής στυλ.

Αυτή η ομορφιά κινουμένων σχεδίων CSS3 έχει επίσης μια αρκετά μεγάλη γκάμα χαρακτηριστικών:

Οριζόντιο και κάθετο ακορντεόν

Σημασιολογική HTML5 και βελτιστοποίηση SEO

Υποστήριξη αφής, πληκτρολογίου και WAI-ARIA

Πάνω από 10 skins και 6 layouts

Και πολλα ΑΚΟΜΑ

Το Zozo Accordion έχει δωρεάν υποστήριξη και συνεχείς ενημερώσεις, καθώς και όλες τις δυνατότητες που θέλετε να δείτε σε ένα ακορντεόν jQuery.

17.jQuery Responsive OneByOne Slider Plugin

Το jQuery Responsive OneByOne Slider Plugin μοιάζει περισσότερο με ένα απλό κινούμενο σχέδιο παρά με ένα ρυθμιστικό. Αντί να εμφανίζεται μία διαφάνεια τη φορά, αυτή η περίπτωση γεμίζει σταδιακά την οθόνη με διαφάνειες έως ότου δεν υπάρχει χώρος στην περιοχή πριν προχωρήσετε στην επόμενη διαφάνεια.

Το κινούμενο σχέδιο CSS3 λειτουργεί μέσα από το Animate.css, είναι ελαφρύ, έχει πολλαπλά επίπεδα και είναι φιλικό προς κινητά. Πολλαπλά χαρακτηριστικά:

Υπάρχει επίσης μια επιλογή πλοήγησης με μεταφορά και απόθεση. Το jQuery Responsive OneByOne Slider Plugin τροφοδοτείται από το καρουσέλ του Twitter Bootstrap.

18. Accordionza - Πρόσθετο jQuery

Δεν υπάρχει πιο εύκολο ρυθμιστικό jQuery από αυτό. Χρειάζονται μόνο 3 Kb ρυθμιστικού για να λειτουργήσει, καθιστώντας το Accordionza το ελαφρύτερο ρυθμιστικό τύπου ακορντεόν.

Εάν δεν σας αρέσουν οι τρεις επιλογές στυλ, μπορείτε να τροποποιήσετε μόνοι σας το HTML και το CSS. Δυνατότητες:

Πλοήγηση με πληκτρολόγιο

Εύκολη προσαρμογή εφέ και κουμπιών

Τεχνική προοδευτικής βελτίωσης - λειτουργεί χωρίς JavaScript

Λάβετε υπόψη ότι το Accordionza μπορεί να εμφανίσει πολλές παραλλαγές μικτού περιεχομένου, καθιστώντας το εξαιρετικά ευέλικτο.

19. mightySlider - Responsive Multipurpose Slider

Το MightySlider είναι ένα πραγματικά ισχυρό ρυθμιστικό. Μπορεί να χρησιμοποιηθεί όχι μόνο ως απλό ρυθμιστικό εικόνας, αλλά και ως ρυθμιστικό μονής κατεύθυνσης πλήρους οθόνης με πλοήγηση στοιχείων μενού. Με αυτό, μπορείτε να δημιουργήσετε έναν υπέροχο ιστότοπο μιας σελίδας.

Κάτω από την κουκούλα θα βρείτε πολλές επιλογές:

Υποστήριξη πληκτρολογίου, ποντικιού και αφής

CSS3 επιταχυνόμενες μεταβάσεις υλικού

Καθαρίστε έγκυρη σήμανση και βελτιστοποίηση SEO

Απεριόριστες διαφάνειες, επίπεδα λεζάντας και εφέ

Το API είναι πολύ ισχυρό και φιλικό προς τους προγραμματιστές, το οποίο ανοίγει διάφορους τρόπους χρήσης του. Το MightySlider είναι ένα εξαιρετικό προοδευτικό ρυθμιστικό jQuery με καθαρό και καλά σχολιασμένο κώδικα.

20. Parallax Slider - Responsive jQuery Plugin

Το Parallax Slider λειτουργεί όπως το jQuery Responsive OneByOne Slider Plugin και σας επιτρέπει να κάνετε κίνηση σε κάθε επίπεδο ξεχωριστά μέσα στην ίδια διαφάνεια. Μπορείτε να κάνετε κίνηση σε όλες τις διαφάνειες ή ακόμα και μόνο μία προσθέτοντας κινούμενα σχέδια parallax.

Το κιτ συνοδεύεται από 4 ρυθμιστικά διαφορετικών τύπων, όλα με εφέ parallax. Όπως και άλλα ρυθμιστικά jQuery έχει:

Πλήρης δυνατότητα προσαρμογής

Υποστήριξη αφής

Πλήρως απόκριση, απεριόριστα επίπεδα

Αυτόματη αναπαραγωγή, επαναφορά, ρύθμιση ύψους και πλάτους και χρονόμετρο

Τα κινούμενα επίπεδα δεν είναι απλώς κείμενο ή εικόνες. Μπορείτε επίσης να προσθέσετε βίντεο YouTube, Vimeo και HTML5. Το Parallax Slider είναι ένα άλλο καλό παράδειγμα για το πώς μπορείτε να προσομοιώσετε τα εφέ Flash ακόμα καλύτερα από το ίδιο το Flash, το οποίο επίσης υποστηρίζεται σε όλες τις συσκευές.

συμπέρασμα

Είναι ενδιαφέρον να δούμε πώς τα ρυθμιστικά jQuery έχουν εξελιχθεί από κάτι που απλώς αντικαθιστά μια εικόνα με μια άλλη, σε ένα τεράστιο σύνολο δημιουργικών εργαλείων. Τώρα υπάρχουν ρυθμιστικά 3D, ρυθμιστικά parallax, ρυθμιστικά πλήρους σελίδας, ρυθμιστικά με απόκριση και αυτά που μπορούν να προβληθούν τόσο σε επιτραπέζιους υπολογιστές όσο και σε smartphone.

Εάν δεν σας αρέσει κανένα από τα ρυθμιστικά αυτής της λίστας, μπορείτε πάντα να περάσετε από το jQuery Code Tutorial στο Envato και να αναπτύξετε κάτι εντελώς νέο και μοναδικό.

Ή δείτε τα άλλα ρυθμιστικά στο Envato Market για να διαλέξετε. Ποιο είναι το αγαπημένο σας ρυθμιστικό jQuery και γιατί;

Χρειαζόμαστε ένα απλό ρυθμιστικό με αυτόματη κύλιση. Ας αρχίσουμε...

Περιγραφή του ρυθμιστικού.

Οι διαφάνειες θα ευθυγραμμιστούν και μετά από ένα ορισμένο χρονικό διάστημα θα πραγματοποιήσουν κύλιση.

Το κόκκινο πλαίσιο δείχνει το ορατό μέρος του ρυθμιστικού.

Στο τέλος του ρυθμιστικού, πρέπει να αντιγράψετε την πρώτη διαφάνεια. Αυτό είναι απαραίτητο για να διασφαλιστεί η κύλιση από την τρίτη διαφάνεια στην πρώτη. Πρέπει επίσης να προσθέσετε την τελευταία διαφάνεια στην αρχή, ώστε να μπορείτε να κάνετε κύλιση προς τα πίσω από την πρώτη διαφάνεια στην τρίτη. Το ρυθμιστικό προς τα εμπρός φαίνεται παρακάτω.

Όταν το ρυθμιστικό φτάσει στο τέλος, το αντίγραφό του από την αρχή του ρυθμιστικού τοποθετείται αμέσως στη θέση της τελευταίας διαφάνειας. Στη συνέχεια ο κύκλος επαναλαμβάνεται ξανά. Αυτό δημιουργεί την ψευδαίσθηση ενός άπειρου ρυθμιστικού.

Σήμανση HTML

Αρχικά, ας φτιάξουμε ένα απλό ρυθμιστικό με αυτόματη κύλιση. Χρειάζεται δύο δοχεία για να λειτουργήσει. Το πρώτο θα ορίσει το μέγεθος της ορατής περιοχής του ρυθμιστικού και το δεύτερο χρειάζεται για να τοποθετήσετε τα ρυθμιστικά σε αυτό. Η διάταξη του ρυθμιστικού θα μοιάζει με αυτό:

> >

Στυλ ρυθμιστικών

.slider-box( πλάτος : 320 px ; ύψος : 210 px ; υπερχείλιση : κρυφό ; ) .slider( θέση : σχετική ; πλάτος : 10000 px ; ύψος : 210 px ; ) .slider img( float : αριστερά ;- ;-

Το container.slider-box καθορίζει το μέγεθος του ρυθμιστικού. Η ιδιότητα overflow:hidden αποκρύπτει όλα τα στοιχεία που δεν εμπίπτουν στο πεδίο εφαρμογής του στοιχείου.

Το ρυθμιστικό container.slider έχει ρυθμιστεί σε μεγάλο πλάτος. Αυτό είναι απαραίτητο για να χωρέσουν όλες οι διαφάνειες σε αυτό.

Οι διαφάνειες ευθυγραμμίζονται χρησιμοποιώντας την ιδιότητα float:left.

Η σχηματική διάταξη των μπλοκ ρυθμιστικών φαίνεται παρακάτω.

Γραφή

Η μετακίνηση των διαφανειών θα γίνει αλλάζοντας ομαλά την ιδιότητα margin-left του container.slider.

$(function () ( var width= $(".slider-box" ) .width () ; // Πλάτος ολισθητήρα.διάστημα = 4000 ; // Διάστημα αλλαγής διαφανειών.$(".slider img:last" ) .clone () .prependTo (."slider" ) ; // Ένα αντίγραφο της τελευταίας διαφάνειας τοποθετείται στην αρχή.$() .eq (1 ) .clone () .appendTo (."slider" ) ; // Ένα αντίγραφο της πρώτης διαφάνειας τοποθετείται στο τέλος. // Container.slider μετατοπίζεται προς τα αριστερά κατά το πλάτος μιας διαφάνειας. setInterval("animation()" , interval) ; // Εκτελεί τη συνάρτηση animation() για να εκτελέσει τη μετάβαση της διαφάνειας.) ) ; function animation() ( var margin = parseInt($(".slider" ) .css ("marginLeft") ); // Τρέχον μπλοκ offset.slider width= $(".slider-box" ).width() , // Πλάτος ολισθητήρα. slidersAmount= $(".slider" ) .children () .length ; // Αριθμός διαφανειών στο ρυθμιστικό. if (περιθώριο!= (- πλάτος* (slidersAmount- 1 ) ) ) // Εάν η τρέχουσα διαφάνεια δεν είναι η τελευταία,( margin= margin-width; // τότε η τιμή του περιθωρίου μειώνεται κατά το πλάτος της διαφάνειας.) άλλο ( // Εάν εμφανίζεται η τελευταία διαφάνεια,$(".slider" ) .css("margin-left" , -width) ; // τότε το block.slider επιστρέφει στην αρχική του θέση,περιθώριο=- πλάτος* 2 ; ) $(".slider" ) .animate (( marginLeft: margin) , 1000 ); // Το Block.slider μετακινείται προς τα αριστερά κατά 1 διαφάνεια. } ;

Το αποτέλεσμα είναι ένα απλό ρυθμιστικό με άπειρη αυτόματη κύλιση.