ადაპტირება, ან თუ გინდათ, საპასუხო ვებ-დიზაინი ახლა არ არის მხოლოდ კიდევ ერთი დიზაინერი ტენდენცია, ეს უკვე გარკვეული სტანდარტია განვითარებადი საიტების განვითარებისთვის, ვებ-გვერდებზე, ჰარმონიული ვიზუალური აღქმა სხვადასხვა მომხმარებლის მოწყობილობების ეკრანებზე. ცოტა ხნის წინ, როდესაც განვითარებადი ადაპტური თარგიმე მქონდა გაუმკლავდე სხვადასხვა სირთულეებს გარკვეული სლაიდების და სურათების გალერეების ინტეგრაციისას, საერთო დიზაინის სტილის დარღვევის გარეშე. ახლა ყველაფერი ბევრად უფრო ადვილია, არსებობს დიდი რაოდენობით მზა გადაწყვეტილებები ქსელში და რაც განსაკუთრებით მოხარულია, მათი უმრავლესობა თავისუფალია ღია წყაროდან.
შემოთავაზებული ხელსაწყოების მრავალფეროვნების გამო, მე შევიკრიბეთ პატარა მიმოხილვა ადაპტაციური jQuery sliders of images, რომელიც გამოჩნდა ბოლო დროს და გავრცელდა ყოველგვარი შეზღუდვების გარეშე, I.E. აბსოლუტურად უფასოა.
Wow slider.
სურათების ადაპტური jQuery სლაიდერი ვიზუალური ეფექტების ბრწყინვალე კომპლექტით (მონაცვლეობით, გამგზავრების, ბუნდოვანი, სპირალების, ბლაინდების და ა.შ. ...) და ბევრი მზა ნიმუშები. დახმარების გაწევისას Wower აშენდა wower, თქვენ შეგიძლიათ მარტივად და მარტივად შექმნათ განსაცვიფრებელი slideshows რამდენიმე წუთში. დეველოპერის ვებგვერდს აქვს ყველა საჭირო დოკუმენტაცია რუსულ ენაზე დანამატების პარამეტრების და გამოყენების შესახებ, შესანიშნავი გამოცდილების შესანიშნავი მაგალითები. ასევე ხელმისაწვდომია ცალკე მოდული WordPress და მოდული Joomla. დარწმუნებული ვარ, რომ ბევრი მოსწონს ეს მშვენიერი სლაიდერი, ორივე დამწყები და სახელმძღვანელო სიტყვა.
Hislider.
HTML5, JQuery Slider და Image გალერეა, აბსოლუტურად უფასო მოდული პირადი გამოყენების საიტებზე გაშვებული პოპულარული სისტემები - WordPress, Joomla, Drupal. ამ მარტივი, არამედ ფუნქციონალური ინსტრუმენტი, თქვენ შეგიძლიათ მარტივად შექმნათ ჩვენი საიტების გვერდებზე, საოცარი და ნათელი slideshows, სანახაობრივი პრეზენტაციები და ახალი შეტყობინებების განცხადებები. რამდენიმე მზა ნიმუშები და ტყავი სლაიდერი, განსაცვიფრებელი გარდამავალი ეფექტები (ცვლილება) შინაარსი, სხვადასხვა მულტიმედიური შემცველობა: ვიდეო YouTube და Vimeo, მოქნილი საბაჟო პარამეტრები და ა.შ.
Nivo სლაიდერი.
Nivo Slider არის ძველი კეთილი, ასევე ცნობილია ყველას, ვინც არის სათაური, ერთ ერთი ყველაზე ლამაზი და ადვილად გამოყენების სლაიდერი გამოსახულებები. JQuery Nivo Slider მოდული უფასოა ჩამოტვირთოთ და შემდგომი გამოყენება, განაწილებული ქვეშ MIT ლიცენზია. ასევე არსებობს ცალკე მოდული WordPress, მაგრამ სამწუხაროდ უკვე გადახდილი და ჩამოაგდეს off მას ექნება $ 29 ლიცენზია. უმჯობესია გავაკეთოთ ცოტა up wp თემა ფაილი და დამაგრებითი უფასო jQuery ვერსია Nivo Slider მოდული თქვენს ბლოგზე, სარგებელი ინფორმაცია როგორ გავაკეთოთ ეს ქსელში საკმარისი.
რაც შეეხება ფუნქციურობას, ყველაფერი სრულყოფილია. JQuery v1.7 + ბიბლიოთეკა გამოიყენება სამუშაოს, ლამაზი გარდამავალი ეფექტების, მარტივი და ძალიან მოქნილი პარამეტრების, ადაპტაციური განლაგების, ავტომატური გამოსახულების ჩამოსხმის და ბევრად უფრო.
სლაიდერის იდეა შთაგონებულია დეველოპერების მიერ, რომელიც ცნობილია Apple- ის პროდუქციის მთელი სტილისთვის, სადაც რამდენიმე მცირე ელემენტი (სურათები) იცვლება შერჩეული კატეგორიის ანიმაციის მარტივი ეფექტით. Codrops წარმოგიდგენთ თქვენს განკარგულებაშია დეტალური გაკვეთილი ამ სლაიდერის შესაქმნელად, HTML- ის მარკირების სრული განლაგება, CSS წესების კომპლექტი და შესრულებადი jQuery მოდული, ისევე როგორც სლაიდერის გამოყენების შესანიშნავი ცხოვრების მაგალითი.
Slit slider.
სრულ ეკრანზე გამოსახულება სლაიდერი on jQuery და CSS3 + დეტალური სახელმძღვანელოს ინტეგრაციის დანამატი ადგილზე გვერდზე. იდეა არის ღია მიმდინარე სლაიდების შემცირება კონკრეტული შინაარსით, როდესაც გადადით მომდევნო ან წინა შინაარსზე. -დან jQuery გამოყენებით. და CSS ანიმაცია შეგიძლიათ შექმნათ უნიკალური გადასვლები სლაიდებს შორის. სლაიდერის ადაპტური განლაგება უზრუნველყოფს, რომ ეკრანებზე თანაბრად კარგად გამოიყურება ეკრანები. განსხვავებული ტიპები საბაჟო მოწყობილობები.
ელასტიური შინაარსის სლაიდერი.
შინაარსის სლაიდერი, რომელიც ავტომატურად მორგებულია სიგანეზე და სიმაღლეზე, რომელიც დამოკიდებულია მშობლის კონტეინერის ზომაზე, სადაც იგი მდებარეობს. საკმაოდ მარტივი დიზაინი და მოქნილი სლაიდერი jQuery პარამეტრები, ერთად ნავიგაცია ბოლოში, როდესაც შეცვლის ეკრანის ზომა შემცირება, ნავიგაცია არის ნაჩვენები როგორც ხატები. ძალიან დეტალური დოკუმენტაცია (გაკვეთილი შექმნა) და ცხოვრების მაგალითები.
3D დასტის სლაიდერი
სლაიდერის ექსპერიმენტული ვერსია, რომელიც აჩვენებს სურათებს 3D თვითმფრინავით გადასვლები. სურათები დაყოფილია ორ ჰორიზონტალურ სტეკებზე, ნავიგაციის arrow- ის გამოყენებით ნაჩვენებია და გადანერგვა ყოველი მომდევნო სურათის ნახულზე. ზოგადად, განსაკუთრებული არაფერია, მაგრამ აღსრულების იდეა და ტექნიკა საკმაოდ საინტერესოა.
ძალიან მარტივი, 100% ადაპტური და სრულ ეკრანზე jQuery სლაიდერი გამოსახულებები. სლაიდერის მუშაობა ეფუძნება CSS გადასვლები (ქონების გარდამავალი) bundle ერთად jQuery ჯადოსნური. Max- სიგანე ღირებულება 100% -ით არის დამონტაჟებული, ამ გზით სურათების ზომა შეიცვლება ეკრანის ზომებზე. არაფერი სპეციალური ანიმაციური ეფექტები და აღფრთოვანებული დიზაინი, ყველაფერი მარტივია, და sharpened to უწყვეტი მუშაობა.
მინიმალური სლაიდები
სახელი საუბრობს თავისთავად, ალბათ, ერთ-ერთი ყველაზე მსუბუქი და მინიმალიტური jQuery sliders of images, რომ მე შევხვდი (მოდული 1kb). RespresiveLides.js. -Kornet jQuery მოდული, რომელიც ქმნის slide show გამოყენებით ელემენტები შიგნით კონტეინერი. მუშაობს ფართო სპექტრი ბრაუზერები, მათ შორის ყველა ვერსიის IE - ცნობილი პროგრესი სამუხრუჭე, საწყისი IE6 და ზემოთ. ქაღალდი იყენებს CSS3 Transitions in Bundle ერთად JavaScript, საიმედოობის. მარტივი მარკირება უწესრიგოდ სიის გამოყენებით, გარდამავალი და დროის ინტერვალით, ავტომატური და სახელმძღვანელო კონტროლი სლაიდების გადართვა, ასევე რამდენიმე slideshows მხარდაჭერა. ეს არის ასეთი frisky "ბავშვი".
კამერა.
კამერა - უფასო jQuery. მოდული სლაიდების ორგანიზებისათვის საიტების გვერდებზე, სინათლის სლაიდერით მრავალრიცხოვანი გარდამავალი ეფექტებით, 100% ადაპტაციური განლაგებით, და ძალიან მარტივი პარამეტრები. შესანიშნავად შეესაბამება ნებისმიერი მომხმარებლის მოწყობილობების ეკრანებზე (PC მონიტორები, ტაბლეტები, სმარტფონებისათვის და Მობილური ტელეფონები). ჩაშენებული ვიდეოს დემონსტრირების უნარი. ავტომატური სლაიდების ცვლილება და სახელმძღვანელო კონტროლის ღილაკები და სურათების ბლოკირება. პრაქტიკულად სრული გალერეა სურათები კომპაქტ დიზაინში.
bxSlider jQuery.
კიდევ ერთი, საკმაოდ მარტივია ადაპტური სლაიდერი on jQuery. სლაიდებში, შეგიძლიათ ნებისმიერ შინაარსი, ვიდეო, სურათები, ტექსტი და სხვა ელემენტები. სენსორული ეკრანების გაფართოებული მხარდაჭერა. გამოიყენეთ CSS- ანიმაციის გადასვლები. დიდი რაოდენობით სხვადასხვა ვარიაციები პრეზენტაციაზე slideshows და კომპაქტური გამოსახულება გალერეა. ავტომატური და სახელმძღვანელო კონტროლი. გადართვის სლაიდები გამოყენებით ღილაკები შერჩევის მინიატურების. წყაროს ფაილის მცირე ზომა ძალიან მარტივია პარამეტრებში და განხორციელებაში.
FlexSlider 2.
FlexSlider 2 - განახლებული ვერსია ამავე სახელწოდების სლაიდერი, გაუმჯობესებული რეაგირების მაჩვენებლით, სცენარის მსახურებით, და შემცირების რეკორდი / Redrawing. მოდული მოიცავს ძირითად სლაიდერს, რომელიც აკონტროლებს სლაიდების კონტროლის გამოყენებას მინიატურების გამოყენებით, მარცხენა მარჯვენა ღილაკით და ქვედა სანავიგაციო პანელის სახით. ვიდეოს სლაიდების (Vimeo) გამომავალი, პარამეტრების მოქნილი პარამეტრები (გადასვლები, დიზაინი, დროის ინტერვალი), სრულად ადაპტური განლაგება.
გალერეა.
კარგად ცნობილი და საკმაოდ პოპულარული ადაპტური მოდული jQuery შექმნას მაღალი ხარისხის გალერეები და sliders გამოსახულებები. სლაიდერის ინტერფეისი, მისი პანელის წყალობით, ვიზუალურად ჰგავს ჩვეულებრივი ვიდეო მოთამაშე, მოდულის შემადგენლობა მოიცავს სხვადასხვა დეკორაციებს. ჩაშენებული ვიდეო და სურათები ერთად პოპულარული მომსახურება: Flickr, Vimeo, YouTube და სხვა. დეტალური დოკუმენტაცია შექმნისა და გამოყენების გზით.
მოცვის.
მარტივი გარეშე frills უფასო jQuery სლაიდერი გამოსახულებები, დაწერილი სპეციალურად ადაპტაციური ვებ დიზაინი. Blueberry არის ექსპერიმენტული jQuery ღია წყარო მოდული. მინიმალისტური დიზაინი, არანაირი ეფექტი, მხოლოდ შეუფერხებლად pop-up სურათები შეცვლის ერთმანეთს გარკვეული პერიოდის შემდეგ. ყველაფერი ძალიან მარტივია, დააყენა, მე დაკავშირებულია და წინ ...
jquery popeye 2.1.
ძალიან კომპაქტური jQuery გამოსახულება სლაიდერი Lightbox ელემენტებით. მისი მოქნილი ზომის გამო, ძალიან მარტივია, რომ ნებისმიერ კონტეინერში ერთი პოსტი შევიდა მინიატურული სახით, როდესაც თქვენ hover მაუსის კურსორი ან დააწკაპუნეთ რომელი Lightbox გააქტიურებულია გაფართოებული სურათის და კონტროლის ელემენტებით. მოსახერხებელია ასეთი სლაიდერის პანელებში, პროდუქციის ან ახალი ამბების პრეზენტაციისთვის. შესანიშნავი გამოსავალი საიტებზე დიდი რაოდენობით ინფორმაცია.
თანამიმდევრობა
უფასო ადაპტური სლაიდერი გაფართოებული CSS3 გადასვლები. მინიმალისტური სტილი, 3 თემის გაფორმება, თითოეული ჩარჩო სლაიდები ჰორიზონტალურ მიმართულებით გამოჩნდება სურათის ცენტრში, მარჯვნივ, ხელმოწერის უფლება, მინიატურები ქვედა მარჯვენა კუთხეში დუბლირებული. პროდუქტის პრეზენტაციის გვერდები ყოველი ჩარჩოში ნახვისთვის. კონტროლი ასევე მოიცავს ღილაკებს უკან და მეოთხე. ყველა მხარდაჭერა თანამედროვე ბრაუზერები.
დარტყმა.
არსებობს სრულიად სარეკლამო სლაიდერი სურათები და ფუნქციონირება და პარამეტრების, პარამეტრების არის ცვლილება სიჩქარე slide ცვლილება, რომელიც დაკავშირებულია სახელმძღვანელო რეჟიმში (კონტროლის ღილაკები გააქტიურებულია), უწყვეტი სლაიდ შოუ. ეს სლაიდერი აქვს უფლება, რომ ის მხოლოდ ის მოვიზიდოს მხოლოდ იმით, რომ ეს არ არის განსაკუთრებით საინტერესო არაფერი ამ განვითარებაში, მე შეიძლება ეძებდნენ ცუდად)))
საპასუხო გამოსახულება სლაიდერი.
ლამაზი ასეთი ადაპტური სლაიდერი გამოსახულებები ვლადიმერ კუდინოვოვიდან. კარგი, მაღალი ხარისხის მუშაობის ინსტრუმენტი, გათვალისწინებული ვიზუალური მაგალითები და დეტალური ინსტრუქციები შექმნის, ინსტალაციისა და გამოყენების შესახებ. ადაპტური დიზაინი, Cute ღილაკები და სროლები მწვანე, ყველაფერი საკმაოდ cute და მშვიდად, ზეწოლის გარეშე.
Fractionslider.
უფასო JQuery Slider მოდული ერთად Parallax ეფექტი სურათები და ტექსტი სლაიდები. Slide ანიმაცია რამდენიმე შოუ ღირებულებები სრული კონტროლი ყოველ ჯერზე და ანიმაციური პარამეტრი. სლაიდზე რამდენიმე ელემენტის ანიმაციის უნარი. შეგიძლიათ დააყენოთ სხვადასხვა მეთოდები ანიმაცია, სლაიდების გაუჩინარება ან გარკვეული მიმართულებით გადასვლები. ავტომატური ჩვენების და სახელმძღვანელო კონტროლის გამოყენებით ნავიგაცია ისრებით pop-up როდესაც თქვენ hover. 10 ტიპის ანიმაციური ეფექტები გამოჩენა სლაიდები და ბევრად უფრო ...
მიმოხილვა საკმაოდ ვრცელი იყო, მაგრამ არა უმეტეს ინფორმაციულ ინფორმაციულ პროდუქტზე გათვალისწინებული პროდუქციის გამო. ყველა დეტალი და დეტალური აღწერა. ფუნქციონალობა ერთი დანამატი, თქვენ შეგიძლიათ ისწავლონ უშუალოდ დეველოპერების გვერდებზე. ეს რჩება იმედს, რომ ვინმეს გაამახვილა ძებნის ყველაზე საჭირო ინსტრუმენტი, შექმნას ფერადი სურათის sliders on გვერდებზე მათი საიტები.
ოდესმე გგონიათ, რომ სასიამოვნო იქნებოდა რუსიფიცირებული თარგების მუშაობა? უბრალოდ ვფიქრობ ერთი წუთით. ინგლისური ენის თარგების მუშაობის დრო არ არის. ჩვენ ჩქარობენ, გთხოვთ, რომ templatemonster ახლა შეიძლება ნაპოვნი templatemster Marketer. თითოეული მათგანის ტექსტი ხელით დაწერილი იყო. და, რა თქმა უნდა, ყველა მზა გადაწყვეტილებები წარმოუდგენლად მარტივია.
ყველა პატივისცემა, ენდრიუ
ცოტა ხნის წინ, დავიწყე სამაგისტრო jQuery. მე ვფიქრობ, ყველამ იცის, რომ ე.წ. ყველაზე პოპულარული ბიბლიოთეკა JavaScript- ზე სკრიპტების (სკრიპტების) განვითარებისა და შექმნისთვის. მასთან ერთად, ძალიან ადვილია საიტის სანახაობრივი და ინტერაქტიული ელემენტების შექმნა.
ამ სტატიაში, მინდა გითხრათ, როგორ შევქმნათ მარტივი უნივერსალური სლაიდერი jQuery- ის გამოყენებით. სინამდვილეში, ქსელი ძალიან დიდი რიცხვი მრავალფეროვანი მზა sliders, რომელიც ზოგჯერ გამოიყურება ძალიან მაცდური, და საკმაოდ ფუნქციონალური, მაგრამ ჩვენ გავაკეთებთ მას ნულიდან.
ასე რომ, რა თვისებები ჩვენი სლაიდერი on jQuery (რომელიც მე მოვუწოდებ hwslider) შეიძლება აღინიშნოს?
- მარტივი გამოყენება და დიზაინი - მინდოდა, რომ შეიქმნას მარტივი სკრიპტის გარეშე, ასე რომ მე არ გამოვიყენე ანიმაციები CSS3- ზე და კოდი აღმოჩნდა ძალიან მრავალმხრივი და გასაგები.
- ორივე სურათის სლაიდების ჩასმა უნარი და ნებისმიერი HTML კოდი.
- სლაიდების მეშვეობით გადაყარეთ უნარი, როგორც წესი, (თავდამსხმელი) და აირჩიეთ თითოეული სლაიდი (1,2,3,4 ...)
- ავტომატურად განვითარებადი ბმულები (წინა - შემდეგი, და სლაიდების ნომრები). თქვენ მხოლოდ უნდა ჩაწეროთ divs- ის სწორი თანხის ჩასმა და ყველაფერი გაანგარიშება. კარგად, შეიძლება აღინიშნოს, რომ სლაიდების რაოდენობა შეუზღუდავია.
სკრიპტი შეესაბამება ყველა თანამედროვე ბრაუზერს: ანუ ოპერის, Firefox, Safari, Chrome, (რადგან სლაიდერი არ იყენებს CSS3).
დავიწყოთ HTML მარკეტინგით. მარჯვენა ადგილას HTML გვერდი ან შაბლონი თქვენ უნდა ჩასმა.
აქ ყველაფერი მარტივია, როგორც ხედავთ, შეგიძლიათ დაამატოთ როგორც ბევრი სლაიდები ახალი Div- ის შექმნით. თქვენ შეგიძლიათ ჩაწეროთ ისინი hTML კოდი, როგორიცაა სურათის ან ბლოკის ტექსტი. არ უნდა დაგვავიწყდეს მხოლოდ ბიბლიოთეკასთან დაკავშირება ყველა JS - სკრიპტებთან ერთად. თუ არ იცი, როგორ გამოიყურება მაგალითად.
# Slider-Wrap (/ * Sheath სლაიდერი და ღილაკები * / სიგანე: 660px;) #slider (/ * sheath სლაიდერი * / სიგანე: 640px; სიმაღლე: 360px; overflow: დამალული; სასაზღვრო: #eee მყარი 10px; პოზიცია: ნათესავი; ) .Slide (/ * Slide * / სიგანე: 100%; სიმაღლე: 100%;) .Sli-Links (/ * Slide Change Buttons * / Margin-Top: 10px; ტექსტის გასწორება: ცენტრი;) .Sli-Links. საკონტროლო-სლაიდი (ზღვარი: 2px; ჩვენება: inline-block; სიგანე: 16px; სიმაღლე: 16px; overflow: დამალული: ტექსტი -199px; ფონის: URL (radiobg.png) ცენტრი ქვედა არ განმეორებით;) .Sli -Links .კონტროლი-სლაიდი: Hover (Cursor: POSTERN პოზიცია: ცენტრის ცენტრი;) .Sli-Links .Control-Slide.active (Background-Position: Center Top;) #prewbutton, # nextbutton (/ * ლინკი " შემდეგი "და" Pedid "* / ჩვენება: ბლოკი: სიგანე: 15px; სიმაღლე: 100%; პოზიცია: აბსოლუტური; ზედა: 0; overflow: დამალული: ტექსტი -19px; ფონის: URL (arrowbg.png) მარცხენა ცენტრი არ განმეორებითი; Opacity: 0.8; Z- ინდექსი: 3; განტოტვილი: არა! მნიშვნელოვანია;) #prewbutton (მარცხნივ: 10px;) # Nextbutton (მარჯვენა: 10px; : URL (arrowbg.png) მარჯვენა ცენტრი არ განმეორებითი;) #prewbutton: hover, # nextbutton: hover (opacity: 1;)
მოდით ეს უფრო დეტალურად. პირველი ვაძლევთ მთავარ ერთეულს "სლაიდერ-გადატანა" იდენტიფიკატორთან, სასურველ სიგანეზე. მას შემდეგ, რაც ყველა სხვა ბლოკად ჩასმული იგი, მაშინ სიმაღლე ვერ ითხოვს, ეს იქნება დამოკიდებული იმაზე, თუ რა იქნება შიგნით. მაშინ ჩვენ გვჭირდება კონტეინერის ზომა, რომელშიც სლაიდები იქნება. ეს არის - #slider. მოდი ვკითხოთ მას სიგანე და სიმაღლე, ისევე, მაგალითად, საზღვრის 10 პიქსელი. აქ არის სიგანე - 640px ნაკლებია, ვიდრე მშობლის სიგანე, რადგან ჩვენ დავამატებთ საზღვარს 10px- ის სიგანე მარჯვენა და მარცხნივ. სლაიდების სიგანე (.slide) ასევე დამოკიდებულია ამ div- ის სიგანეზეც.
და ბოლო: ჩვენ უნდა დავიცვათ პოზიცია: სლაიდ კონტეინერისთვის, როგორც სლაიდების შიგნით - აბსოლუტური პოზიციებით. სლაიდების სლაიდები CSS- ში, მხოლოდ სიგანე და სიმაღლეა. დანარჩენი თვისებები უკვე მითითებულია JQuery Script- ში.
Selector.Sli-Links არის ბლოკი, რომელშიც საჭიროა ტრანსფორმაციის ღილაკი საჭირო სლაიდზე. ეს ღილაკები არის სახეობების მარტივი ელემენტები რომლებიც ავტომატურად შეიტანენ საჭირო რაოდენობას ავტომატურად, მათთან ერთად და მშობლებთან ერთად. ღილაკების მიერ ვთხოვთ ულამაზეს ხედვას, კერძოდ, თითოეულ ღილაკს კვადრატს ვაკეთებთ, ყველა მათგანს ცენტრში, ისევე როგორც გადაფარვის წყალობით: დამალული და ტექსტი-ინტენსიური: -999PX, ჩვენ ამოიღეთ ტექსტი, რის გამოც მხოლოდ ფონური ხატები ასევე იცვლება, როდესაც კურსორის ამ ელემენტზე მიდიხარ. მოხერხებულობისთვის, მე ვიყენებ sprites, რომელიც შემცირდა რაოდენობის სურათები.
შემდეგი შედგენილია აქტიური ღილაკი. უბრალოდ შეცვალეთ ფონური პოზიცია. შემდეგ მიმართა კავშირებს მტკიცებულებებზე და წინა სლაიდებში. თქვენ შეგიძლიათ მისცეს მათ რაიმე დიზაინი, ისევე როგორც ღილაკები. ეს ბმულები ავტომატურად ჩამოთვლილია #Slider- ში. მაგრამ რომ ისინი ჩანს, მე ვთხოვე მათ აბსოლუტური პოზიციონირება და ზედა ფენა (Z- ინდექსი: 3) ისე, რომ ისინი გამოჩნდება ზემოთ სლაიდები. მე ვფიქრობ, რომ CSS ყველაფერი აქ არის ნათელი და უბრალოდ: თქვენ შეგიძლიათ შეცვალოთ თითქმის ყველა თვისებები, რათა სლაიდერი, როგორც გჭირდებათ.
მოდით ახლა გაითვალისწინოთ სცენარი:
Var hwslidespeed \u003d 700; var hwTimeout \u003d 3000; Var hwneedlinks \u003d true; $ (დოკუმენტი) .რატომ (ფუნქცია (E) ($ ("Slide"). CSS (("პოზიცია": "აბსოლუტური", "Top": "0", "მარცხნივ": "0"). () .შეიძლება (0) .შენი (); var slidenum \u003d 0; slidecount \u003d $ $ ("Slider .Slide"). ზომა (); var animslide \u003d ფუნქცია (arrow) (ClearTimeout (SlideTeime); $ ("Slide "). EQ (Slidenum) .Fadeout (hwslidespeed); თუ (arrow \u003d\u003d" შემდეგი ") (თუ (Slidenum \u003d\u003d (SlideCount-1)) (Slidenum \u003d 0;) სხვა (Slidenum ++) ) თუ (arrow \u003d\u003d "PREW") (თუ (slidenum \u003d\u003d 0) (slidenum \u003d slidecount-1)) სხვა (slidenum- \u003d 1)) სხვა (slidenum \u003d arrow;) $ ("Slide")) $ EQ (Slidenum) .Fadein (Hwslidespeed, Rotator); $ ("კონტროლის- slide.active"). Removeclass ("აქტიური"); $ ("კონტროლის სლაიდ"). EQ (Slidenum) .დამატებითი ("აქტიური "); თუ (hwnneedlinks) (var $ linkarrow \u003d $ (" ") .პრაციონალური (" Slider "); $ (" Nextbutton "). დაწკაპეთ (ფუნქცია () (" შემდეგი ");) $ ("#PrewButton"). დაწკაპეთ (ფუნქცია () ("Prew");))) ap $ adderspan \u003d "" $ ("Slide"). თითოეული (ინდექსი) ($ Adderspan + \u003d " "; }); $("
პირველი, პარამეტრები შენახულია ცვლადებში: Hwslidespeeseed - Slide Power სიჩქარე, HwMeenTherout - დრო შემდეგ ავტომატური სლაიდური ცვლილება, Hwneedlinks - აკონტროლებს "შემდეგი" და "წინა" ბმულები - თუ ამ ცვლადის ღირებულება მართალია, ეს ბმულები იქნება ნაჩვენები, და თუ ყალბი, შესაბამისად, ისინი არ (ისევე როგორც Მთავარი გვერდი Ჩემი ბლოგი).
შემდეგი, ჩვენ საჭირო გვაქვს CSS თვისებები სლაიდების გამოყენებით მეთოდი. CSS (). Blocks ერთად სლაიდები ჩვენ დააკისროს ერთმანეთს აბსოლუტური პოზიციონირების გამოყენებით, მაშინ დამალვა მათ ყველა (), შემდეგ კი აჩვენე მხოლოდ პირველი. Slidenum ცვლადი არის აქტიური სლაიდების რაოდენობა, რომელიც არის კონტრ.
ჩვენი jQuery სლაიდერის მთავარი ლოგიკა არის ანიმაციური ფუნქცია. იგი იღებს ერთ პარამეტრს. თუ ჩვენ მივცემთ "მომდევნო" ან "PREW" ხაზს, მაშინ პირობითი ოპერატორები იმუშავებენ და შემდეგ ან წინა სლაიდს გამოჩნდება. თუ ფიგურის ღირებულებად დავტოვე, მაშინ ეს რიცხვი აქტიური სლაიდი გახდება და ეს იქნება ნაჩვენები.
ასე რომ ეს ფუნქცია მალავს მიმდინარე div, ითვლის ახალი და გვიჩვენებს მას.
გთხოვთ გაითვალისწინოთ, რომ მეთოდი .Fadein (), რაც აშკარად აქტიურ სლაიდს ქმნის, მეორე არგუმენტია. ეს არის ე.წ. Callback ფუნქცია. იგი შესრულებულია, როდესაც სლაიდი მთლიანად გამოჩნდება. -ში ეს საქმე ეს კეთდება ავტომატური სენსორული სლაიდების უზრუნველსაყოფად. ქვემოთ მოყვანილი rotator ფუნქცია იწვევს animslide ფუნქცია კიდევ ერთხელ წასვლა მომდევნო slide მეშვეობით დრო ინტერვალი გჭირდებათ: ჩვენ მივიღებთ დახურვის უზრუნველყოფს მუდმივი სენსორული.
ყველაფერი კარგად მუშაობს, მაგრამ ჩვენ უნდა შეწყვიტოს ავტომატიზაციის აღსრულება, თუ მომხმარებელი მოაქვს კურსორს სლაიდერისთვის ან ღილაკების დაჭერით. ამისათვის შეიქმნა ცვლადი პაუზა. თუ მისი ღირებულება დადებითია - ჭეშმარიტი, მაშინ ავტომატური გადართვა არ იქნება. მეთოდის გამოყენებით (), ჩვენ მიუთითეთ: წმინდა ტაიმერი, თუ ის გაშვებულია - ClearTimeout (SlideTeime), და დააინსტალირეთ პაუზა \u003d ჭეშმარიტი. და მას შემდეგ, რაც კურსორის მოხსნის შემდეგ, გამორთეთ პაუზა და აწარმოებს rotator ().
გარდა ამისა, ჩვენ უნდა შევქმნათ ახალი ელემენტი გვერდზე და განათავსეთ მათ სწორი ადგილი. თითოეული სლაიდის თითოეული () ციკლის გამოყენებით (div-a class.slide), შექმენით span ელემენტის შიგნით, რომელიც რიცხვი არის სლაიდების ნომერი. ეს რიცხვი გამოიყენება ანიმაციის ფუნქციაში, ამ ნომერზე სლაიდთან წასვლა. გადაიტანოთ ყველაფერი, რაც მარჯვნივ კლასებს, და საბოლოოდ ჩვენ მივიღებთ ასეთი მარკირებას:
როგორც ჩანს, რატომ შევქმნით მარკირებას სკრიპტის შიგნით და არა HTML კოდში? ფაქტია, რომ მაგალითად, თუ სკრიპტები გამორთულია - ის ვერ ხედავს ელემენტებს, რომლებიც არ იმუშავებენ და ეს არ გააცნობს მას დაბნეულობას. გარდა ამისა, კოდი გამარტივებულია, რაც ცუდია SEO- სთვის.
შედეგად, სლაიდერის მარკირება გამოიყურება მსგავსი რამ (როგორც სლაიდი, მე გამოსახულია გამოსახულება და 5 ცალი):
ქვემოთ თქვენ შეგიძლიათ ნახოთ, თუ როგორ ჩვენი JQuery სლაიდერი მუშაობს დემო გვერდზე, და ჩამოტვირთოთ ყველა საჭირო წყაროები.
საბოლოოდ, რამდენიმე მომენტი ამ სლაიდერის ინტეგრაციის შესახებ drupal. თქვენ შეგიძლიათ დაამატოთ ეს კოდი შაბლონის ფაილზე, მაგალითად, გვერდზე. TPL.PHP, და დაურთეთ სკრიპტი ინდივიდუალური JS ფაილის თემას. JQuery in Drupal ჩართულია default, მაგრამ მუშაობს თავსებადობის რეჟიმში (). არსებობს ორი მოდიფიკაცია. ან გადაიტანოთ მთელი JS კოდი:
(ფუნქცია ($) (// ყველა თქვენი კოდი ...)) (jQuery);
ან შეცვალეთ $ სიმბოლოები მთელს JQuery Script- ზე. Ამგვარად:
JQuery (document) .რადიდი (სლაიდი). CSS ("პოზიცია": "აბსოლუტური", "Top": "0", "მარცხნივ": "0"). დამალვა (0). ); var sliderum \u003d 0; var slidetime; slidecount \u003d jQuery ("Slider .Slide"). ზომა (); var animslide \u003d ფუნქცია (arrow) (// et.
მაგალითში, პირველი მეთოდი უკვე განხორციელდა.
Მადლობა წაკითხვისთვის! დატოვე კომენტარი, დაბრუნდით. და ასევე შეგიძლიათ გამოიწეროთ RSS- ს ბლოგის განახლებების მიღება პირველი!
დამატებულია:ეს არ არის ყველა. წაკითხული. ჩვენ დავამატებთ ახალ შესაძლებლობებს ამ სცენარში.
1. შესანიშნავი jQuery სლაიდშოუ
დიდი სანახაობრივი სლაიდების გამოყენებით jQuery ტექნოლოგიების გამოყენებით.
2. jQuery "მასშტაბური კარუსელი" მოდული
Scalable სლაიდების ჩვენება jQuery. თქვენ შეგიძლიათ დააყენოთ ზომები slideshows რომ თქვენ შესაფერისი.
3. jQuery plug "slidejs"
სურათების სლაიდერი ტექსტური აღწერილობით.
4. მოდული "jslidernews"
5. CSS3 JQuery Slider
როდესაც თქვენ hover კურსორი ნავიგაცია ისრებით, მრგვალი მინიატურების მომდევნო slide გამოჩნდება.
6. Cute JQuery Slider "პრეზენტაცია ციკლი"
jQuery Slider ერთად გამოსახულება Loading მაჩვენებელი. არსებობს ავტომატური სლაიდების ცვლილება.
7. JQuery Plugin "Parallax Slider"
სლაიდერი მოცულობითი ეფექტებით. ამ სლაიდერის გაშუქება ფონზე ფონზე, რომელიც შედგება რამდენიმე ფენისგან, რომელთაგან თითოეული არის სკოლიდან სხვადასხვა სიჩქარე. შედეგად, აღმოჩნდება გარსის ეფექტის იმიტაცია. ძალიან ლამაზია, შეგიძლიათ ამის შესახებ. უფრო შეუფერხებლად ეფექტი გამოჩნდება ბრაუზერებში, როგორც: ოპერის, Გუგლ ქრომი., ანუ.
8. ახალი, მსუბუქი jQuery სლაიდერი "BxSlider 3.0"
დემო გვერდზე "მაგალითები" სექციაში შეგიძლიათ იპოვოთ ბმულები ყველა შესაძლო პარამეტრები გამოიყენეთ ეს მოდული.
9. გამოსახულებების ჯვარია სლაიდერი, მოდული "Slidejs"
Stylish jquery სლაიდერი აუცილებლად შეძლებს დაამშვენებს თქვენს პროექტს.
10. JQuery მოდული სლაიდების ჩვენება "მარტივი სლაიდები" v1.1
ადვილად გამოიყენოთ jQuery მოდული, რათა შეიქმნას სლაიდების ჩვენება.
11. მოდული "JQuery Slidy"
მარტივი jquery მოდული სხვადასხვა დიზაინი. არსებობს ავტომატური სლაიდების ცვლილება.
12. JQuery CSS გალერეა ავტომატური სლაიდების ცვლილებით
თუ გარკვეული დროის განმავლობაში სტუმარი არ არის "წინ" ან "უკან" ისრები, გალერეა ავტომატურად დაიწყებს სენსორულს.
13. JQuery Slider "Nivo Slider"
ძალიან პროფესიონალური მაღალი ხარისხის სინათლის მოდული სწორი კოდი. სლაიდების ცვლილების ბევრი სხვადასხვა ეფექტი არსებობს.
14. JQuery Slider "Mobilyslider"
ახალი სლაიდერი. jQuery სლაიდერი სხვადასხვა ეფექტი გამოსახულების ცვლილება.
15. JQuery Plugin "Slider²"
მარტივი სლაიდერი ავტომატური სლაიდების ცვლილებით.
16. ახალი JavaScript სლაიდერი
სლაიდერი ავტომატური გამოსახულების ცვლა.
მოდული სლაიდების დანერგვისთვის ავტომატური სლაიდების ცვლილებით. გამოსახულების გამოსახულების გამოყენებით ეკრანის მართვა შესაძლებელია.
jquery css. გამოსახულება სლაიდერი გამოყენებით Nivoslider მოდული.
19. JQuery Slider "Jshowoff"
მოდული კონტენტის როტაცია. სამი ვარიანტი გამოყენებისათვის: ნავიგაციის გარეშე (ავტომატური ცვლა სლაიდების ფორმატში), ნავიგაციის სახით ღილაკების სახით, სურათების სახით ნავიგაცია.
20. ჩამკეტის ეფექტი პორტფელის მოდული
ახალი jQuery მოდული ფოტოგრაფი პორტფელისთვის. გალერეამ განახორციელა სურათების შეცვლის საინტერესო ეფექტი. ფოტოები ერთმანეთს შეცვლის ობიექტივის ჩამონათვალში.
21. მარტივი JavaScript CSS სლაიდერი "Tinyslider 2"
სურათების სლაიდერის განხორციელება javaScript- ის გამოყენებით და CSS.
22. Tinycircleslider Slider- ის ქარი
ელეგანტური მრგვალი სლაიდერი. სურათებს შორის ტრანსფორმაცია ხორციელდება წრის ირგვლივ, როგორც წითელ წრეში. დიდი ჯდება თქვენს საიტზე, თუ თქვენ ხართ დიზაინის გამოყენების მრგვალი ელემენტები.
23. სურათების სლაიდერი jQuery
მარტივი სლაიდერი "სლაიდერი ნაკრები". სლაიდერი წარმოდგენილია სხვადასხვა დიზაინით: ვერტიკალური და ჰორიზონტალური. ასევე განხორციელდა სხვადასხვა ტიპის ნავიგაცია სურათებს შორის: "წინ" და "უკან" ღილაკების გამოყენებით მაუსის საჭე გამოყენებით, მაუსის დაჭერით.
24. გალერეა მინიატურებით "სლაიდერი ნაკრები"
გალერეა "სლაიდერი ნაკრები". Scroll მინიატურული ხორციელდება როგორც ვერტიკალური და ჰორიზონტალური მიმართულებით. გადასვლის სურათებს შორის ხორციელდება გამოყენებით: მაუსი თვლები, მაუსის დაწკაპუნებით ან მინიატურული კურსორი.
25. JQuery Slider Kit Content Slider
ვერტიკალური და ჰორიზონტალური შინაარსის სლაიდერი jQuery.
26. JQuery Slide Show "Slider Kit"
სლაიდშოუ ავტომატური სლაიდების ცვლილებით.
27. მარტივი პროფესიული JavaScript CSS3 სლაიდერი
Neat Slider on jQuery და CSS3, შექმნილია 2011 წელს.
jQuery სლაიდშოუ მინიატურებით.
29. მარტივი jquery სლაიდშოუ
სლაიდშოუ ნავიგაციის ღილაკებით.
30. შოკირებული სლაიდშოუ jQuery "Skitter"
jQuery მოდული "Skitter" შექმნას განსაცვიფრებელი სლაიდშოუ. მოდული მხარს უჭერს 22 (!) სხვადასხვა ანიმაციური ეფექტების ხედი სურათების შეცვლისას. მას შეუძლია მუშაობა ორი სანავიგაციო ვარიანტით სლაიდებისთვის: სლაიდების ნომრებისა და მინიატურების გამოყენებით. დარწმუნდით, რომ ნახოთ დემონსტრაცია, ძალიან მაღალი ხარისხის იპოვოს. მეორადი ტექნოლოგიები: CSS, HTML, JQuery, PHP.
31. სლაიდების ჩვენება "უხერხულ"
ფუნქციური სლაიდშოუ. სლაიდების სახით შეიძლება შესრულდეს: მარტივი სურათები, სურათები ხელმოწერებით, სურათებით pop-up რჩევები, ვიდეო კლიპები. თქვენ შეგიძლიათ გამოიყენოთ ისრები, ბმულები slide ნომრები და გასაღებები მარჯვნივ / მარცხნივ კლავიატურის ნავიგაცია. სლაიდშოუ რამდენიმე ვერსიით დამზადებულია: მინიატურების და მათ გარეშე. სანახავად ყველა ვარიანტი, ფეხით გასწვრივ ბმულები Demo # 1 - დემო # 6 მდებარეობს თავზე დემო გვერდზე.
ძალიან ორიგინალური დიზაინის სლაიდერი გამოსახულება მსგავსი გულშემატკივართა. ანიმაციური სლაიდების ცვლილება. სურათებს შორის ნავიგაცია ხორციელდება ისრებით. იგი ასევე უზრუნველყოფს ავტომატური ცვლა, რომელიც შეიძლება ჩართული და off გამოყენებით პიესა / პაუზის ღილაკს მდებარეობს ზედა.
ანიმაციური jQuery სლაიდერი. ფონის სურათები ავტომატურად სკალირებას, როდესაც ბრაუზერის ფანჯარა ცვლილებები. თითოეული გამოსახულება floats ბლოკი ერთად აღწერა.
34. "Flux Slider" Slider on jQuery და CSS3
ახალი jQuery სლაიდერი. რამდენიმე მაგარი ანიმაციური ეფექტი შეცვლის სლაიდების შეცვლისას.
35. JQuery "Jswitch" მოდული
ანიმაციური jquery გალერეა.
მსუბუქი სლაიდშოუ ავტომატური სლაიდების ცვლილებით.
37. მოდულის ახალი ვერსია "Slidedeck 1.2.2"
პროფესიული შინაარსის სლაიდერი. პარამეტრები შესაძლებელია ავტომატური slide shift, ისევე როგორც ვარიანტი გამოყენებით მაუსის საჭე გადასვლის შორის სლაიდები.
38. JQuery Slider "Sudo Slider"
მარტივი გამოსახულება ცილისწამების შესახებ jQuery. ძალიან ბევრი განხორციელება პარამეტრები: ჰორიზონტალური და ვერტიკალური ცვლილებები სურათების, ბმულები სლაიდების ნომერი და მათ გარეშე, ერთად ხელმოწერების სურათები და გარეშე, სხვადასხვა ეფექტი გამოსახულების ცვლილება. ავტომატური სლაიდების ცვლილების ფუნქციაა. ბმულები ყველა სამაგალითო დანერგვისთვის შეგიძლიათ იხილოთ დემო გვერდზე.
39. JQUERY CSS3 სლაიდშოუ
სლაიდშოუ მინიატურებით მხარს უჭერს ავტომატური სლაიდების რეჟიმს.
40. JQuery "Flux Slider"
Slider ერთად მრავალჯერადი ეფექტები იმიჯი ცვლილება.
41. მარტივი jquery სლაიდერი
Stylish image სლაიდერი jQuery.
საჭიროა მარტივი სლაიდერი ავტომატური სენსორებით. მოიყვანეთ ...
სლაიდერის მუშაობის აღწერა.
სლაიდები აშენდება ხაზში, და გარკვეული დროის შემდეგ იქნება scrolled.
წითელი ჩარჩო გვიჩვენებს სლაიდერის ხილულ ნაწილს.
დასასრულს სლაიდერი, თქვენ უნდა დუბლიკატი პირველი slide. აუცილებელია მესამე სლაიდების სენსორული სენსორული. თქვენ ასევე უნდა დაამატოთ ბოლო სლაიდი დასაწყისში გადახვევა მეშვეობით საპირისპირო მიმართულება პირველი სლაიდიდან მესამე. ქვემოთ არის სლაიდერის მუშაობა თავდამსხმელ მიმართულებით.
როდესაც სლაიდერი დასრულდა, მისი ასლი საწყისი სლაიდერის დასაწყისში მყისიერად განთავსდება ბოლო სლაიდის ადგილას. ციკლი კვლავ განმეორდება. ეს ქმნის უსასრულო სლაიდერის ილუზიას.
HTML მარკირება
დასაწყისისთვის, ჩვენ გავაკეთებთ მარტივი სლაიდერი ავტომატური სენსორული. მისი მუშაობისთვის საჭიროა ორი კონტეინერი. პირველი შეიქმნება სლაიდერის ხილული ფართობის ზომა და მეორე საჭიროა სლაიდების განთავსება. სლაიდერის მარკირებას ექნება შემდეგი ფორმა:
სტილის სლაიდერი
.slider-box (სიგანე: 320px; სიმაღლე: 210px; overflow;) .Slider (პოზიცია: ნათესავი სიგანე: 10000px; სიმაღლე: 210px;) .Slider img (float: მარცხენა, z-indexContainer.Slider-Box ადგენს სლაიდერის ზომებს. გამოყენება overflow: დამალული ქონება, ყველა ელემენტები დამალულია, რომელიც არ შედის ტერიტორიაზე შიგნით ელემენტს.
კონტეინერისთვის. სლაიდერი დიდი სიგანეა. აუცილებელია იმისათვის, რომ ყველა სლაიდები შეესაბამება მას.
სლაიდები შეესაბამება float: მარცხენა ქონება.
ქვემოთ არის სლაიდერის ბლოკების სქემატური ადგილმდებარეობა.
ხელწერა
სლაიდების მოძრაობა განხორციელდება გამოყენებით გლუვი ცვლილება მარჟის მარცხენა თვისებები კონტეინერი.
$ (ფუნქცია () (var width \u003d $ ("Slider-Box") .ვიდი (); // სიგანე სლაიდერი. ინტერვალი \u003d 4000; / / სლაიდების ცვლილების ინტერვალი. $ ("Slider IMG: ბოლო") .Clone () .პრაციონალური (".slider"); / / ბოლო სლაიდის ასლი თავდაპირველად განთავსდება. $ () .eq (1) .Clone () .Appendto (".slider"); / / პირველი სლაიდის ასლი დასასრულს მოთავსებულია. // კონტეინერი. სლაიდერი ცვლაში დარჩა სიგანე ერთი სლაიდი. Setinterval ("ანიმაცია ()", ინტერვალი); / / ანიმაცია () ფუნქცია დაიწყო slide shift. )); ფუნქცია ანიმაცია () (var margin \u003d parseint ($ ("Slider") .css ("Marginleft")); // მიმდინარე ბლოკი offset.slider სიგანე \u003d $ ("Slider-Box") .width () // სიგანე სლაიდერი. Slidersamount \u003d $ ("Slider") .ბავშვები (). / / სლაიდების რიცხვი სლაიდერში. თუ (ზღვარი! \u003d (- სიგანე * (slidersamount-1))) / / თუ მიმდინარე slide არ არის ბოლო, (ზღვარი \u003d ზღვარი; / / ზღვრის ღირებულება მცირდება სლაიდების სიგანეზე. ) სხვაგან ( / / თუ უკანასკნელი სლაიდი ნაჩვენებია, $ ("Slider") .css ("ზღვარი მარცხნივ", - სიგანე); / / შემდეგ Block.Slider დაბრუნდება თავდაპირველი პოზიცია, ზღვარი \u003d - სიგანე * 2; ) $ ("სლაიდერი") .მუხალი (მარგინალური: ზღვარი), 1000); // block.slider ცვლაში დარჩა 1 slide. } ;შედეგად, აღმოჩნდა მარტივი სლაიდერი უსასრულო ავტომატური სენსორებით.
მარტივი, მსუბუქი (21KB შეკუმშული ფორმით) Slider დაწერილი Pure JavaScript არ აქვს რაიმე დამოკიდებულება, ანუ. მუშაობს jQuery გარეშე.
ტესტირება შემდეგ ბრაუზერებში:
- Chrome 26.0.
- Firefox 20.0.
- Safari 5.1.7
- ანუ 10.
- ოპერის 16.0.
IE8 / 9 (არანაირი ეფექტი) არასრული მხარდაჭერაა.
მახასიათებლები
- თქვენ შეგიძლიათ დაამატოთ შეუზღუდავი რაოდენობის sliders გვერდზე, თუნდაც ადგილი ერთი სხვა.
- შეიცვლება ზომები დამოკიდებულების შინაარსზე, მაგრამ შესაძლებელია აკრძალოს.
- ნავიგაცია კლავიატურის - როდესაც კურსორი არის სლაიდერი, შეგიძლიათ გადართოთ sliders ერთად ისრებით.
- მობილური სენსორული ღონისძიების მხარდაჭერა.
კავშირი
დახურვის ტეგიამდე
