ஜாவாஸ்கிரிப்ட் டெம்ப்ளேட்களைப் பயன்படுத்தி ஸ்லைடு ஷோவை உருவாக்கவும். புகைப்பட ஆய்வகம். Slidr கட்டுப்பாடுகள்

ஸ்லைடுஷோ உருவாக்கும் நிரல்களின் கண்ணோட்டம் ஒரு வலைத்தளத்திற்கான ஸ்லைடுஷோவை உருவாக்குதல்

இணையதளத்தில் இடுகையிட ஸ்லைடுஷோவை உருவாக்கும் போது, ஆயத்த மென்பொருள் தீர்வுகளைப் பயன்படுத்துவது சிறந்தது. என் கருத்துப்படி, jQuery ஸ்கிரிப்ட்களின் சிறப்பு இலவச நூலகமான (சிறிய ஜாவாஸ்கிரிப்ட் நிரல்கள்) பயன்படுத்துவதே சிறந்த மற்றும் எளிதான விருப்பமாகும். முந்தைய கட்டுரைகள் இந்த அற்புதமான வலை மேம்பாட்டு கருவியைப் பற்றி ஏற்கனவே பேசியுள்ளன. எடுத்துக்காட்டாக, புகைப்பட தொகுப்பு என்ற கட்டுரையைப் பார்க்கவும் jQuery- எளிய மற்றும் அழகான! . இப்போது jQuery ஐப் பயன்படுத்தி ஸ்லைடர் எனப்படும் தளத்தில் ஒரு ஸ்லைடு ஷோவை உருவாக்கலாம்.

இதைச் செய்ய, அமெரிக்காவின் ஓரிகானில் உள்ள போர்ட்லேண்டில் உள்ள "தி பிரிகேட்" என்ற வடிவமைப்பு ஸ்டுடியோவின் தொழில்நுட்ப இயக்குனரான ப்ரோக்ராமர் நாதன் சியர்லஸ் உருவாக்கிய ஸ்லைடு செருகுநிரலைப் பயன்படுத்துவோம். ஒரு ஆன்லைன் ஸ்டோருக்கான புகைப்பட கேலரி என்ற கட்டுரையில் அவரது மற்றொரு முன்னேற்றம் விவரிக்கப்பட்டுள்ளது.

ஸ்லைடு செருகுநிரல் நிறுவ எளிதானது, ஸ்லைடு ஷோவில் படங்களை மாற்றுவதற்கு பல விருப்பங்களைக் கொண்டுள்ளது மற்றும் தளத்தின் தலைப்புக்கு பெரும்பாலும் பயன்படுத்தப்படுகிறது. இந்த ஸ்லைடர் இயல்புநிலை அமைப்புகளுடன் எவ்வாறு செயல்படுகிறது என்பதற்கான எடுத்துக்காட்டு படத்தில் காட்டப்பட்டுள்ளது:

ஸ்லைடுஷோவை நிறுவுகிறது ஸ்லைடுகள்

எப்போதும் போல, முதலில் தளத்தில் ஒரு ஸ்கிரிப்ட் கோப்புறையை உருவாக்கவும். நீங்கள் காப்பகத்தைப் பதிவிறக்கம் செய்து உருவாக்கப்பட்ட கோப்புறையில் திறக்க வேண்டும். இது jquery-1.8.3.min.js மற்றும் jquery.cycle.all.min.js ஆகிய இரண்டு ஸ்கிரிப்ட்களைக் கொண்டிருக்கும்.

அடுத்து, குறிச்சொல்லின் உள்ளே உள்ள பக்கத் தலைப்பில்... பின்வரும் வரிகளைச் செருகுவோம், இது ஸ்கிரிப்ட்களுக்கான பாதையையும் ஸ்லைடு ஷோவின் அளவுருக்களை வரையறுக்கும் சிறிய ஜாவாஸ்கிரிப்டையும் குறிக்கிறது:

$(".slideshow").cycle((
fx: "மங்கல்"
});
});

.ஸ்லைடுஷோ(
அகலம்: 200px;
உயரம்: 135px;
விளிம்பு: ஆட்டோ;
}

நீங்கள் பார்க்க முடியும் என, ஒரு எளிய CSS விதி உள்ளது, இதில் எதிர்கால ஸ்லைடு ஷோவின் (அகலம் - உயரம்) படங்களுக்கான சாளரத்தின் அளவை நீங்கள் குறிப்பிட வேண்டும். இயற்கையாகவே, எல்லா படங்களும் ஒரே அளவில் இருக்க வேண்டும். நீங்கள் விரும்பினால், உங்கள் ஸ்லைடுஷோ படங்களுக்கான எல்லைகள், பின்னணிகள், திணிப்பு மற்றும் பிற கூறுகளைச் சேர்ப்பதன் மூலம் CSS விருப்பங்களை நீட்டிக்கலாம். இந்த வழக்கில், நீங்கள் மொத்த அளவைக் குறிப்பிட வேண்டும், அதாவது படம் மற்றும் நீங்கள் அமைத்த நீளம் மற்றும் அகலத்தில் உள்ள உள்தள்ளல்கள் மற்றும் எல்லைகள்.

முக்கியமான குறிப்பு:உங்கள் தளம் பல jQuery செருகுநிரல்களைப் பயன்படுத்தினால், jquery.js கோப்பை (முன்னுரிமை சமீபத்திய பதிப்பு) ரூட் கோப்புறைக்கு நகர்த்துவது மிகவும் வசதியானது, இதனால் பல முறை பதிவிறக்கம் செய்ய முடியாது. இந்த வழக்கில், அதை அணுகுவதற்கான வரி அனைத்து செருகுநிரல்களுக்கும் ஒரே மாதிரியாக இருக்கும். குறிப்பாக, எங்கள் உதாரணத்திற்கு இது இப்படி மாறிவிடும்:

jQuery இன் பல்வேறு பதிப்புகளை ஒரே பக்கத்தில் பயன்படுத்த பரிந்துரைக்கப்படவில்லை, இதனால் அவை ஒன்றுக்கொன்று முரண்படாது. அதே நேரத்தில், செருகுநிரல்கள் நிறுவப்பட்ட jQuery பதிப்பில் செயல்படுகின்றனவா என்பதைச் சரிபார்க்கவும், ஏனெனில் எல்லா பதிப்புகளும் ஒன்றுக்கொன்று மாற்ற முடியாது.

கடைசிப் படி, பக்கத்தில் படங்களை வைப்பது. இங்கேயும் எல்லாம் எளிது. அகலம் மற்றும் உயரத்தை அமைக்க உங்களை அனுமதிக்கும் குறிச்சொல் அல்லது பிற குறிச்சொல்லின் உள்ளே படங்களை வைக்கவும், அதன் class="slideshow" ஐக் குறிப்பிடவும். எங்கள் உதாரணத்திற்கு, ஸ்லைடருக்கான HTML குறியீடு இதுபோல் தெரிகிறது:

இந்த கட்டத்தில், ஸ்லைடுஷோவின் உருவாக்கம் கிட்டத்தட்ட முடிந்தது, மேலும் உலாவியில் உங்கள் பக்கத்தைத் திறப்பதன் மூலம் அதைப் பார்க்கலாம்.

ஸ்லைடு ஷோ விருப்பங்களை அமைத்தல் ஸ்லைடுகள்

உருவாக்கப்பட்ட ஸ்லைடுஷோவில், பக்க தலைப்பில் வைக்கப்பட்டுள்ள ஜாவாஸ்கிரிப்டை மாற்றுவதன் மூலம் பிரேம்களுக்கு இடையில் பல்வேறு வகையான மாற்றங்களை அமைக்கலாம். கூடுதலாக, ஸ்கிரிப்டில் உள்ள sync:false என்ற வரியை sync:true உடன் மாற்றுவதன் மூலம், படங்களை மாற்றும்போது இடத்தை அகற்றலாம்.

படங்களைக் காண்பிக்கும் காலம் காலக்கெடு அளவுருவால் கட்டுப்படுத்தப்படுகிறது, மேலும் வேகம் வேக அளவுருவால் கட்டுப்படுத்தப்படுகிறது. உதாரணமாக, இங்கே பல பொதுவான ஸ்லைடுஷோ விருப்பங்கள் மற்றும் தொடர்புடைய ஸ்கிரிப்டுகள் பக்க தலைப்பில் செருகப்பட வேண்டும்.

1. கலைப்பு (எங்கள் உதாரணம்): $(ஆவணம்) தயார்(செயல்பாடு() ( $(".slideshow").cycle(( fx: "Fade", //transition வகை வேகம்: 1000 , //பட மாற்ற வேகம் நேரம் முடிந்தது: 1000 //பிரேம் கால அளவு }); });
2. கலக்கல்: $(ஆவணம்) தயார்(செயல்பாடு() ( $(".slideshow").cycle(( fx: "கலக்கு", ஒத்திசைவு: தவறான, வேகம்: 500 காலக்கெடு: 5000 }); });
3. பெரிதாக்கு: $(ஆவணம்) தயார்(செயல்பாடு() ( $(".slideshow").cycle(( fx: "ஜூம்", ஒத்திசைவு: பொய் }); });
4. X அல்லது Y அச்சில் புரட்டவும்: $(ஆவணம்) தயார்(செயல்பாடு() ( $(".slideshow").cycle(( fx: "curtainX", // Y அச்சில் சுழற்சிக்காக - curtainY ஒத்திசைவு: பொய் }); });
5. செங்குத்தாகச் சுருக்கு: $(ஆவணம்) தயார்(செயல்பாடு() ( $(".slideshow").cycle(( fx: "டர்ன்டவுன்", // திசையை டர்ன்அப், டர்ன்லெஃப்ட், டர்ன்ரைட் அமைக்கலாம் ஒத்திசைவு: உண்மை }); });
6. ஸ்க்ரோலிங் (ஆஃப்செட்): $(ஆவணம்) தயார்(செயல்பாடு() ( $(".slideshow").cycle(( fx:"ஸ்க்ரோல் டவுன்", // ஆஃப்செட் திசையை ஸ்க்ரோல் அப், ஸ்க்ரோல் லெஃப்ட், ஸ்க்ரோல் ரைட் அமைக்கலாம் ஒத்திசைவு: உண்மை }); });
7. வலதுபுறம் மங்கல்: $(ஆவணம்) தயார்(செயல்பாடு() ( $(".slideshow").cycle(( fx: "கவர் }); });

இந்த கட்டுரையில் செய்யப்பட்டுள்ளபடி, சில நேரங்களில் நீங்கள் தளத்தின் ஒரு பக்கத்தில் பல ஸ்லைடுஷோ விருப்பங்களை வைக்க வேண்டும். இதைச் செய்ய, $(".slideshow").cycle(((மேலே உள்ள அட்டவணையில் உள்ள குறியீட்டைப் பார்க்கவும்) என்ற வரியில் ஒவ்வொரு விருப்பத்திற்கும் வெவ்வேறு வகுப்புகளைக் குறிப்பிட வேண்டும், மேலும் ஒவ்வொரு வகுப்பிற்கும் சாளர அளவுகளைக் குறிப்பிட மறக்காதீர்கள். CSS இல்.

ஸ்லைடுகளில் படங்கள் மட்டுமே இருந்தால், நீங்கள் கட்டமைப்பை சிறிது மாற்றலாம்:

முந்தைய அடுத்தது

alt பண்புக்கூறுக்கு அர்த்தமுள்ள மதிப்பைச் சேர்க்க மறக்காதீர்கள்.

பக்க இணைப்புகளைப் பயன்படுத்த, நீங்கள் பின்வருவனவற்றைச் செய்யலாம்:

... ... ... 1 2 3

முந்தைய அடுத்த 1 2 3

"தரவு" பண்புக்கூறுகளின் பயன்பாட்டைக் கவனியுங்கள் - சில ஸ்லைடு காட்சிகள் படங்களை பின்னணியாகச் செருகலாம், மேலும் இந்த பண்புக்கூறுகள் பின்னணி மற்றும் ஸ்லைடை இணைக்கும் இடங்களாக ஸ்கிரிப்ட்டில் பயன்படுத்தப்படும்.

பட்டியல்களைப் பயன்படுத்துதல் ஒரு சொற்பொருள் சரியான அணுகுமுறை பட்டியல் உருப்படிகளை ஸ்லைடுகளாகப் பயன்படுத்துவதாகும். இந்த வழக்கில், கட்டமைப்பு இப்படி இருக்கும்:

ஸ்லைடுகளின் வரிசை நன்கு வரையறுக்கப்பட்டிருந்தால் (எடுத்துக்காட்டாக, விளக்கக்காட்சியில்), நீங்கள் எண்ணிடப்பட்ட பட்டியல்களைப் பயன்படுத்தலாம்

CSS பின்வரும் கட்டமைப்புடன் ஆரம்பிக்கலாம்:

முந்தைய அடுத்தது

ஏனெனில் ஸ்லைடுஷோ வலமிருந்து இடமாக இயங்கும் என்பதால், வெளிப்புற கொள்கலன் ஒரு நிலையான அளவைக் கொண்டிருக்கும், மேலும் அனைத்து ஸ்லைடுகளையும் கொண்டிருப்பதால் உட்புறம் அகலமாக இருக்கும். முதல் ஸ்லைடு தெரியும். இது நிரம்பி வழிகிறது:

ஸ்லைடர் (அகலம்: 1024px; வழிதல்: மறைந்துள்ளது; ) .ஸ்லைடர்-ரேப்பர் (அகலம்: 9999px; உயரம்: 683px; நிலை: உறவினர்; மாற்றம்: இடது 500எம்எஸ் நேரியல்; )

உள் ரேப்பர் பாணிகளில் பின்வருவன அடங்கும்:

பெரிய அகலம்
- நிலையான உயரம், அதிகபட்ச ஸ்லைடு உயரம்
- நிலை: உறவினர், இது ஸ்லைடு இயக்கத்தை உருவாக்க உங்களை அனுமதிக்கும்
- CSS மாற்றம் இடது, இது இயக்கத்தை மென்மையாக்கும். எளிமைக்காக, எல்லா முன்னொட்டுகளையும் நாங்கள் சேர்க்கவில்லை. இதற்கு நீங்கள் CSS மாற்றங்களையும் (மொழிபெயர்ப்புடன்) பயன்படுத்தலாம்.

ஸ்லைடுகளை வரிசைப்படுத்த ஃப்ளோட் பண்புக்கூறு உள்ளது. அவை ஒப்பீட்டளவில் நிலைநிறுத்தப்பட்டுள்ளன, இதனால் நீங்கள் JS இல் அவர்களின் இடது ஆஃப்செட்டைப் பெறலாம். ஒரு நெகிழ் விளைவை உருவாக்க இதைப் பயன்படுத்துகிறோம்.

ஸ்லைடு ( மிதவை: இடது; நிலை: உறவினர்; அகலம்: 1024px; உயரம்: 683px; )

நாம் ஒரு குறிப்பிட்ட அகலத்தை அமைத்திருந்தாலும், ஸ்கிரிப்ட்டில் ஸ்லைடுகளின் எண்ணிக்கையை ஸ்லைடு அகலத்தால் பெருக்கி அதை மாற்றலாம். உங்களுக்கு என்ன அகலம் தேவை என்று உங்களுக்குத் தெரியாது.

வழிசெலுத்தல் "முந்தைய" மற்றும் "அடுத்து" பொத்தான்கள் மூலம் மேற்கொள்ளப்படுகிறது. நாங்கள் அவர்களின் இயல்புநிலை பாணிகளை மீட்டமைத்து எங்களுடையதை ஒதுக்குகிறோம்:

Slider-nav (உயரம்: 40px; அகலம்: 100%; விளிம்பு-மேல்: 1.5em; ) .slider-nav பொத்தான் (எல்லை: எதுவுமில்லை; காட்சி: தொகுதி; அகலம்: 40px; உயரம்: 40px; கர்சர்: சுட்டிக்காட்டி; உரை உள்தள்ளல் : -9999em; பின்னணி-நிறம்: வெளிப்படையானது; பின்னணி-மீண்டும்: இல்லை-மீண்டும்; .slider-next (float: right; background-image: url(next.png); )

பொத்தான்களுக்குப் பதிலாக பக்க இணைப்புகளைப் பயன்படுத்தும் போது, நீங்கள் பின்வரும் பாணிகளை உருவாக்கலாம்:

Slider-nav (text-align: centre; margin-top: 1.5em; ) .slider-nav a ( display: inline-block; text-decoration: none; border: 1px solid #ddd; color: #444; அகலம்: 2em; உயரம்: 2em; வரி-உயரம்: 2; உரை-சீரமைப்பு: மையம்; .slider-nav a.current (எல்லை-நிறம்: #000; நிறம்: #000; எழுத்துரு-எடை: தடிமனான; )

இந்த வகுப்புகள் ஸ்கிரிப்ட்டிலிருந்து மாறும் வகையில் ஒதுக்கப்படும்.

இந்த அணுகுமுறை நெகிழ் விளைவுக்கு ஏற்றது. ஃப்ளோட் ஸ்லைடுகளுக்கு இடையில் கிடைமட்ட திணிப்பைச் சேர்ப்பதால், ஃபேட்-இன் எஃபெக்டை நாம் அடைய விரும்பினால், ஸ்டைலை மாற்ற வேண்டும். அதாவது, எங்களுக்கு ஒரு வரியில் ஸ்லைடுகள் தேவையில்லை - எங்களுக்கு ஸ்லைடுகளின் "பேக்" தேவை:

. அனைத்து ஸ்லைடுகளின் முழுமையான நிலைப்பாடு */ அகலம்: 100%; உயரம்: 100%; ஒளிபுகாநிலை: 0; /* அனைத்து ஸ்லைடுகளும் மறைக்கப்பட்டுள்ளன */ மாற்றம்: ஒளிபுகாநிலை 500ms நேரியல்; ) /* தொடக்கத்தில் முதல் ஒன்று மட்டுமே தெரியும் */ .slider- போர்வை >
ஸ்லைடுகளை மறைக்க ஒளிபுகா பண்புகளைப் பயன்படுத்துகிறோம், ஏனெனில் ஸ்கிரீன் ரீடர்கள் காட்சியைக் கொண்டிருக்கும் உறுப்புகளின் உள்ளடக்கத்தைத் தவிர்க்கும்: எதுவுமில்லை (செயல்பாட்டில் CSSஐப் பார்க்கவும்: ஸ்கிரீன் ரீடர் பயனர்களுக்கு மட்டும் கண்ணுக்கு தெரியாத உள்ளடக்கம்).

CSS சூழல் பொருத்துதலுக்கு நன்றி, ஸ்லைடுகளின் "ஸ்டாக்" ஒன்றை உருவாக்கியுள்ளோம், மூலத்தின் கடைசி ஸ்லைடு மற்றவற்றுக்கு முன்னால் உள்ளது. ஆனால் அது நமக்குத் தேவை இல்லை. ஸ்லைடுகளின் வரிசையை பராமரிக்க, முதலில் தவிர அனைத்து ஸ்லைடுகளையும் மறைக்க வேண்டும்.

JS CSS மாற்றத்தைப் பயன்படுத்துகிறது, தற்போதைய ஸ்லைடின் ஒளிபுகா சொத்தின் மதிப்பை மாற்றுகிறது, மேலும் இந்த மதிப்பை மற்ற அனைத்திற்கும் பூஜ்ஜியத்திற்கு மீட்டமைக்கிறது.

ஜாவாஸ்கிரிப்ட் குறியீடு ஸ்லைடுஷோ பேஜினேஷன் இல்லாமல் "அடுத்து" மற்றும் "முந்தைய" பொத்தான்களைக் கிளிக் செய்வதன் மூலம் பேஜினேஷன் இல்லாமல் ஸ்லைடுஷோ செயல்படுகிறது. அவர்கள் அதிகரிப்பு மற்றும் குறைப்பு ஆபரேட்டர்கள் என்று கருதலாம். நீங்கள் பொத்தான்களை அழுத்தும் ஒவ்வொரு முறையும் ஒரு சுட்டி (அல்லது கர்சர்) எப்போதும் இருக்கும். அதன் ஆரம்ப மதிப்பு 0, மற்றும் வரிசை கூறுகள் தேர்ந்தெடுக்கப்பட்டதைப் போலவே தற்போதைய ஸ்லைடையும் தேர்ந்தெடுப்பதே குறிக்கோள்.

எனவே முதல் முறை அடுத்து என்பதைக் கிளிக் செய்யும் போது, சுட்டிக்காட்டி 1 ஆல் அதிகரிக்கிறது மற்றும் இரண்டாவது ஸ்லைடைப் பெறுவோம். முந்தையதைக் கிளிக் செய்வதன் மூலம், சுட்டியைக் குறைத்து முதல் ஸ்லைடைப் பெறுகிறோம். முதலியன

சுட்டியுடன், தற்போதைய ஸ்லைடைப் பெற jQuery இன் .eq() முறையைப் பயன்படுத்துகிறோம். தூய JS இல் இது போல் தெரிகிறது:

செயல்பாடு ஸ்லைடுஷோ(உறுப்பு) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll(".slide") ; //... ), _slideTo: செயல்பாடு(சுட்டி) (var currentSlide = this.slides; //... ) );

நினைவில் கொள்ளுங்கள் - NodeList ஒரு வரிசையைப் போலவே குறியீடுகளைப் பயன்படுத்துகிறது. தற்போதைய ஸ்லைடைத் தேர்ந்தெடுப்பதற்கான மற்றொரு வழி CSS3 தேர்வாளர்கள்:

Slideshow.prototype = ( init: function() ( //... ), _slideTo: செயல்பாடு(சுட்டி) (var n = pointer + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ) );

CSS3: nth-child() தேர்வி 1 இல் இருந்து தொடங்கும் உறுப்புகளை கணக்கிடுகிறது, எனவே நீங்கள் சுட்டிக்காட்டிக்கு 1 ஐ சேர்க்க வேண்டும். ஸ்லைடைத் தேர்ந்தெடுத்த பிறகு, அதன் மூலக் கொள்கலனை வலமிருந்து இடமாக நகர்த்த வேண்டும். jQuery இல் நீங்கள் .animate() முறையைப் பயன்படுத்தலாம்:

(செயல்பாடு($) ( $.fn.slideshow = செயல்பாடு(விருப்பங்கள்) ( விருப்பங்கள் = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", //... speed: 500, easing : "நேரியல்" ), விருப்பங்கள்); var slideTo = செயல்பாடு(ஸ்லைடு, உறுப்பு) (var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). அனிமேட்(( இடது : - $currentSlide.position().left ), options.speed, options.easing); //... );))(jQuery);

வழக்கமான JS இல் .animate() முறை இல்லை, எனவே நாங்கள் CSS மாற்றங்களைப் பயன்படுத்துகிறோம்:

ஸ்லைடர்-ரேப்பர் (நிலை: உறவினர்; // தேவையான மாற்றம்: இடது 500ms நேரியல்; )

இப்போது ஸ்டைல் ஆப்ஜெக்ட் மூலம் இடது சொத்தை மாறும் வகையில் மாற்றலாம்:

இப்போது ஒவ்வொரு கட்டுப்பாட்டுக்கும் ஒரு கிளிக் நிகழ்வை உருவாக்க வேண்டும். jQuery இல் நீங்கள் .on() முறையைப் பயன்படுத்தலாம், மேலும் தூய JS இல் addEventListener() முறையைப் பயன்படுத்தலாம்.

சுட்டிக்காட்டி பட்டியல் எல்லைகளை அடைந்துள்ளதா என்பதை நீங்கள் சரிபார்க்க வேண்டும் - "முந்தைய" க்கு 0 மற்றும் "அடுத்து" ஸ்லைடுகளின் மொத்த எண்ணிக்கை. ஒவ்வொரு சந்தர்ப்பத்திலும், நீங்கள் தொடர்புடைய பொத்தானை மறைக்க வேண்டும்:

(செயல்பாடு($) ($.fn.slideshow = செயல்பாடு(விருப்பங்கள்) (விருப்பங்கள் = $.extend((ரேப்பர்: ".ஸ்லைடர்-ரேப்பர்", ஸ்லைடுகள்: ".ஸ்லைடு", முந்தையது: ".ஸ்லைடர்-முந்தைய", அடுத்தது : ".slider-next", //... வேகம்: 500, எளிதாக்குதல்: "நேரியல்" ), விருப்பங்கள்); var slideTo = செயல்பாடு(ஸ்லைடு, உறுப்பு) (var $currentSlide = $(options.slides, உறுப்பு). eq(ஸ்லைடு); $(options.wrapper, element).animate((இடது: - $currentSlide.position().left ), options.speed, options.easing); ); this.each(function() () திரும்ப var $element = $(இது), $முந்தைய = $(options.previous, $element), $next = $(options.next, $element), index = 0, total = $(options.slides).length; $next.on("click", function() (index++; $previous.show(); if(index == total - 1) ( index = total - 1; $next.hide(); ) slideTo(index, $ உறுப்பு); ) slideTo(index, $element);));)););))(jQuery);

மற்றும் தூய JS இல் இது போல் தெரிகிறது:

செயல்பாடு ஸ்லைடுஷோ(உறுப்பு) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper) "); this.slides = this.el.querySelectorAll(".slide"); this.previous = this.el.querySelector(".slider-previous"); this.next = this.el.querySelector(".slider) -அடுத்து = "-" + currentSlide.offsetLeft + "px"; ), செயல்கள்: செயல்பாடு() (var self = இது; self.next.addEventListener("கிளிக்", செயல்பாடு() ( self.index++; self.previous.style. காட்சி = "தடுப்பு"; if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "none"; ) self._slideTo(self.index ); ), false); self.previous.addEventListener("கிளிக்", செயல்பாடு() (self.index--; self.next.style.display = "block"; if(self.index == 0) (self .index = 0;self.previous.style.display = "இல்லை"; ) self._slideTo(self.index); ), பொய்); ) );

பேஜினேட் ஸ்லைடுஷோ இந்த வகை ஸ்லைடுஷோவில், ஒவ்வொரு இணைப்பும் ஒரு ஸ்லைடுக்கு பொறுப்பாகும், எனவே குறியீட்டு தேவையில்லை. அனிமேஷன்கள் மாறாது; ஸ்லைடுகளின் வழியாக பயனர் நகரும் விதம் மாறுகிறது. jQueryக்கு பின்வரும் குறியீடு இருக்கும்:

(செயல்பாடு($) ($.fn.slideshow = செயல்பாடு(விருப்பங்கள்) (விருப்பங்கள் = $.extend((ரேப்பர்: ".ஸ்லைடர்-ரேப்பர்", ஸ்லைடுகள்: ".ஸ்லைடர்", நேவ்: ".ஸ்லைடர்-நேவ்", வேகம் : 500, எளிதாக்குதல்: "நேரியல்" ), விருப்பங்கள்);var slideTo = செயல்பாடு(ஸ்லைடு, உறுப்பு) (var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). அனிமேட் ((இடது: - $currentSlide.position().left ), options.speed, options.easing); ); this.each(function() (var $element = $(இது), $navigationLinks = $( "a", options.nav); $navigationLinks.on("கிளிக்", செயல்பாடு(e) (e.preventDefault(); var $a = $(இது), $slide = $($a.attr("href ")); slideTo($slide, $element); $a.addClass("தற்போதைய").siblings(). removeClass("தற்போதைய"); ));

இந்த வழக்கில், ஒவ்வொரு நங்கூரமும் ஒரு குறிப்பிட்ட ஸ்லைடின் ஐடிக்கு ஒத்திருக்கும். தூய JS இல், நீங்கள் அதையும் தரவு பண்புக்கூறு இரண்டையும் பயன்படுத்தலாம், இது நோட்லிஸ்ட்டில் உள்ள ஸ்லைடுகளின் எண் குறியீட்டை சேமிக்கிறது:

செயல்பாடு ஸ்லைடர்(உறுப்பு) ( this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function() ( this.links = this.el.querySelectorAll("#slider-nav) a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.navigate(); ), வழிசெலுத்து: செயல்பாடு() (க்கு (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; this.slide(link); } }, slide: function(element) { var self = this; element.addEventListener("click", function(e) { e.preventDefault(); var a = this; self.setCurrentLink(a); var index = parseInt(a.getAttribute("data-slide"), 10) + 1; var currentSlide = self.el.querySelector(".slide:nth-child(" + index + ")"); self.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, false); }, setCurrentLink: function(link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } } };

IE10 முதல் நீங்கள் வகுப்புப் பட்டியல் மூலம் வகுப்புகளை நிர்வகிக்கலாம்:

Link.classList.add("தற்போதைய");

மேலும் IE11 உடன், தரவுத்தொகுப்பு சொத்து மூலம் தரவு பண்புகளை பெறலாம்:

Var இன்டெக்ஸ் = parseInt(a.dataset.slide, 10) + 1;

கட்டுப்பாடுகளுடன் கூடிய பக்க ஸ்லைடு காட்சிகள் இந்த ஸ்லைடு காட்சிகள் குறியீட்டில் சில சிக்கலான தன்மையை வழங்குகின்றன - நீங்கள் குறியீட்டு மற்றும் பக்க ஹாஷ்களின் பயன்பாட்டை இணைக்க வேண்டும். அதாவது, தற்போதைய ஸ்லைடை சுட்டிக்காட்டி நிலை மற்றும் இணைப்புகள் மூலம் தேர்ந்தெடுக்கப்பட்ட ஸ்லைடு இரண்டின் அடிப்படையில் தேர்ந்தெடுக்கப்பட வேண்டும்.

DOM இல் உள்ள ஒவ்வொரு இணைப்பின் எண் குறியீட்டின் மூலம் இதை ஒத்திசைக்க முடியும். ஒரு இணைப்பு - ஒரு ஸ்லைடு, எனவே அவற்றின் குறியீடுகள் 0, 1, 2, முதலியனவாக இருக்கும்.

jQuery இல் குறியீடு இப்படி இருக்கும்:

(செயல்பாடு($) ($.fn.slideshow = செயல்பாடு(விருப்பங்கள்) (விருப்பங்கள் = $.extend(( //... pagination: ".slider-pagination", //... ), விருப்பங்கள்); $. fn.slideshow.index = 0; இந்த.each(செயல்பாடு() (var $element = $(இது), //... $pagination = $(options.pagination, $element), $paginationLinks = $(") a", $pagination), //... $paginationLinks.on("கிளிக்", செயல்பாடு(e) (e.preventDefault(); var $a = $(இது), elemIndex = $a.index(); // DOM எண் குறியீட்டு $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ($previous.show(); ) else ($previous.hide(); ) if($. fn.slideshow.index == மொத்தம் - 1) ($.fn.slideshow.index = மொத்தம் - 1; $next.hide(); ) else ($next.show(); ) slideTo($.fn.slideshow. குறியீட்டு, $ உறுப்பு);

கர்சரின் தெரிவுநிலை மாறியிருப்பதை நீங்கள் உடனடியாகக் காணலாம் - குறியீடு இப்போது ஸ்லைடுஷோ பொருளின் சொத்தாக அறிவிக்கப்பட்டுள்ளது. இதன் மூலம், jQuery இல் உள்ள கால்பேக்குகளால் உருவாக்கப்படும் ஸ்கோப் சிக்கல்களைத் தவிர்க்கிறோம். ஸ்லைடுஷோ பொருளின் பொதுச் சொத்தாக அறிவிக்கப்பட்டதால், கர்சர் இப்போது சொருகி பெயர்வெளிக்கு வெளியேயும் எல்லா இடங்களிலும் கிடைக்கிறது.

.index() முறையானது ஒவ்வொரு இணைப்பின் எண் குறியீட்டைக் கொடுக்கிறது.

தூய JS இல் அத்தகைய முறை எதுவும் இல்லை, எனவே தரவு பண்புக்கூறுகளைப் பயன்படுத்துவது எளிது:

இப்போது நாம் எங்கள் செயல்முறைகளை குறிப்புகளுடன் இணைக்கலாம் மற்றும் நாங்கள் உருவாக்கிய தரவு பண்புக்கூறுகளைப் பயன்படுத்தலாம்:

செயல்கள்: செயல்பாடு() (var self = இது; //... for(var i = 0; i< self.navigationLinks.length; ++i) { var a = self.navigationLinks[i]; a.addEventListener("click", function(e) { e.preventDefault(); var n = parseInt(this.getAttribute("data-index"), 10); // Или var n = parseInt(this.dataset.index, 10); self.index = n; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } if(self.index >0) ( self.previous.style.display = "block"; ) if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "இல்லை "; ) வேறு ( self.next.style.display = "block"; ) self._slideTo(self.index); self._highlightCurrentLink(இது); ), பொய்); ))

பரிமாணங்களைப் புரிந்துகொள்வது பின்வரும் CSS விதிக்கு வருவோம்:

ஸ்லைடர்-ரேப்பர் (அகலம்: 9999px; உயரம்: 683px; நிலை: உறவினர்; மாற்றம்: இடது 500ms நேரியல்; )

எங்களிடம் நிறைய ஸ்லைடுகள் இருந்தால், 9999 போதுமானதாக இருக்காது. ஒவ்வொரு ஸ்லைடின் அகலம் மற்றும் ஸ்லைடுகளின் எண்ணிக்கையின் அடிப்படையில் பறக்கும்போது ஸ்லைடுகளுக்கான அளவுகளை நீங்கள் சரிசெய்ய வேண்டும்.

jQuery இல் இது எளிது:

// முழு அகல ஸ்லைடுஷோ இந்த.each(function() (var $element = $(இது), மொத்தம் = $(options.slides).length; //... $(options.slides, $element ).width ($(window).width()); $(options.wrapper, $element).width($(window).width() * total); //... ));

சாளரத்தின் அகலத்தை எடுத்து ஒவ்வொரு ஸ்லைடின் அகலத்தையும் அமைக்கவும். சாளரத்தின் அகலம் மற்றும் ஸ்லைடுகளின் எண்ணிக்கையைப் பெருக்குவதன் மூலம் உள் ரேப்பரின் மொத்த அகலம் பெறப்படுகிறது.

// நிலையான அகல ஸ்லைடுஷோ இந்த.each(செயல்பாடு() (var $element = $(இது), மொத்தம் = $(options.slides)) நீளம்; //... $(options.wrapper, $element) .அகலம் ($(options.slides).eq(0).width() * total); //... ));

இங்கே ஆரம்ப அகலம் ஒவ்வொரு ஸ்லைடின் அகலத்திற்கும் அமைக்கப்பட்டுள்ளது. நீங்கள் ரேப்பரின் ஒட்டுமொத்த அகலத்தை அமைக்க வேண்டும்.

உள் கொள்கலன் இப்போது போதுமான அளவு அகலமாக உள்ளது. தூய JS இல் இது தோராயமாக அதே வழியில் செய்யப்படுகிறது:

// முழு அகல ஸ்லைடுஷோ Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide "); //... this.total = this.slides.length; this.setDimensions(); this.actions(); ), setDimensions: function() (var self = this; // Viewport"s width var winWidth = window .innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var wrapperWidth = winWidth * self.total; for(var i = 0; i< self.total; ++i) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // Слайд-шоу фиксированной ширины Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides.offsetWidth; // Single slide"s width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };

ஃபேட் எஃபெக்ட்ஸ் ஃபேட் எஃபெக்ட்ஸ் பெரும்பாலும் ஸ்லைடு ஷோக்களில் பயன்படுத்தப்படுகிறது. தற்போதைய ஸ்லைடு மறைந்து அடுத்தது தோன்றும். jQuery ஒளிபுகா மற்றும் காட்சி பண்புகள் இரண்டிலும் செயல்படும் fadeIn() மற்றும் fadeOut() முறைகளைக் கொண்டுள்ளது, எனவே அனிமேஷன் முடிந்ததும் உறுப்பு பக்கத்திலிருந்து அகற்றப்படும் (காட்சி: எதுவுமில்லை).

தூய JS இல், ஒளிபுகா பண்புடன் பணிபுரிவது மற்றும் CSS பொருத்துதல் அடுக்கைப் பயன்படுத்துவது சிறந்தது. பின்னர் ஆரம்பத்தில் ஸ்லைடு தெரியும் (ஒளிபுகாநிலை: 1), மற்றவை மறைக்கப்படும் (ஒளிபுகாநிலை: 0).

பின்வரும் பாணிகளின் தொகுப்பு இந்த முறையை நிரூபிக்கிறது:

ஸ்லைடர் (அகலம்: 100%; வழிதல்: மறைந்துள்ளது; நிலை: உறவினர்; உயரம்: 400px; ) .ஸ்லைடர்-ரேப்பர் (அகலம்: 100%; உயரம்: 100%; நிலை: உறவினர்; ) .ஸ்லைடு (நிலை: முழுமையானது; அகலம்: 100 %; உயரம்: 100%; ஒளிபுகாநிலை: 0; ) .ஸ்லைடர்-ரேப்பர் > .ஸ்லைடு: முதல் குழந்தை (ஒளிபுகாநிலை: 1; )

தூய JS இல் நீங்கள் ஒவ்வொரு ஸ்லைடின் CSS மாற்றத்தையும் பதிவு செய்ய வேண்டும்:

ஸ்லைடு (மிதவை: இடது; நிலை: முழுமையானது; அகலம்: 100%; உயரம்: 100%; ஒளிபுகாநிலை: 0; மாற்றம்: ஒளிபுகாநிலை 500எம்எஸ் நேரியல்; )

jQuery உடன், fadeIn() மற்றும் fadeOut() முறைகளைப் பயன்படுத்த, நீங்கள் ஒளிபுகாநிலை மற்றும் காட்சியை மாற்ற வேண்டும்:

ஸ்லைடு (ஃப்ளோட்: இடது; நிலை: முழுமையானது; அகலம்: 100%; உயரம்: 100%; காட்சி: எதுவுமில்லை; ) .ஸ்லைடர்-ரேப்பர் > .ஸ்லைடு: முதல் குழந்தை (காட்சி: தொகுதி; )

jQuery இல் குறியீடு பின்வருமாறு:

(செயல்பாடு($) ($.fn.slideshow = செயல்பாடு(விருப்பங்கள்) (விருப்பங்கள் = $.extend((ரேப்பர்: ".slider-wrapper", முந்தையது: ".slider-previous", அடுத்தது: ".slider-next" , slides: ".slide", nav: ".slider-nav", வேகம்: 500, எளிதாக்குதல்: "நேரியல்" ), விருப்பங்கள்); var slideTo = செயல்பாடு(ஸ்லைடு, உறுப்பு) ( var $currentSlide = $(options.slides , உறுப்பு).eq(ஸ்லைடு); $currentSlide. அனிமேட்(( ஒளிபுகாநிலை: 1 ), options.speed, options.easing). உடன்பிறப்புகள்(options.slides) css("ஒளிபுகாநிலை", 0); //. ..);))(jQuery);

ஒளிபுகாநிலையை அனிமேஷன் செய்யும் போது, மீதமுள்ள ஸ்லைடுகளுக்கு இந்த சொத்தின் மதிப்புகளையும் மாற்ற வேண்டும்.

ஜாவாஸ்கிரிப்டில் இது இருக்கும்:

Slideshow.prototype = ( //... _slideTo: செயல்பாடு(ஸ்லைடு) (var currentSlide = this.slides; currentSlide.style.opacity = 1; for(var i = 0; i< this.slides.length; i++) { var slide = this.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } }, //... };

மீடியா கூறுகள்: வீடியோ ஸ்லைடுஷோவில் வீடியோவைச் சேர்க்கலாம். Vimeo வழங்கும் வீடியோ ஸ்லைடுஷோவின் உதாரணம் இங்கே:

iframe வழியாக வீடியோக்கள் சேர்க்கப்பட்டுள்ளன. இது படத்தைப் போலவே மாற்றக்கூடிய இன்லைன்-பிளாக் ஆகும். மாற்றத்தக்கது - ஏனெனில் உள்ளடக்கம் வெளிப்புற மூலத்திலிருந்து எடுக்கப்பட்டது.

முழு பக்க ஸ்லைடுஷோவை உருவாக்க, நீங்கள் பின்வருமாறு பாணிகளை மாற்ற வேண்டும்:

Html, உடல் (விளிம்பு: 0; திணிப்பு: 0; உயரம்: 100%; குறைந்தபட்ச உயரம்: 100%; /* உயரம் முழுப் பக்கமாக இருக்க வேண்டும் */ ) .ஸ்லைடர் (அகலம்: 100%; வழிதல்: மறைக்கப்பட்டுள்ளது; உயரம்: 100 % முழு */ நிலை: உறவினர்; .ஸ்லைடு ( மிதவை: இடது; நிலை: முழுமையான; அகலம்: 100%; உயரம்: 100%; ) .ஸ்லைடு iframe ( காட்சி: தொகுதி; /* தொகுதி உறுப்பு */ நிலை: முழுமையான; /* முழுமையான நிலைப்பாடு */ அகலம்: 100%; உயரம்: 100%; /* முழு உயரம் மற்றும் அகலம் */)

தானியங்கி ஸ்லைடு காட்சிகள் தானியங்கி ஸ்லைடு காட்சிகள் டைமர்களைப் பயன்படுத்துகின்றன. ஒவ்வொரு முறையும் setInterval() டைமர் செயல்பாடு திரும்ப அழைக்கப்படும் போது, கர்சர் 1 ஆல் அதிகரிக்கப்படும், இதனால் அடுத்த ஸ்லைடு தேர்ந்தெடுக்கப்படும்.

கர்சர் அதிகபட்ச எண்ணிக்கையிலான ஸ்லைடுகளை அடையும் போது, அதை மீட்டமைக்க வேண்டும்.

முடிவற்ற ஸ்லைடு காட்சிகள் பயனர்களுக்கு விரைவாக சலிப்பை ஏற்படுத்துகின்றன. அனிமேஷனை பயனர் வட்டமிடும்போது அதை நிறுத்திவிட்டு, கர்சர் விலகிச் செல்லும்போது அதை மீண்டும் தொடங்குவதே சிறந்த நடைமுறையாகும்.

(செயல்பாடு($) ($.fn.slideshow = செயல்பாடு(விருப்பங்கள்) (விருப்பங்கள் = $.extend((ஸ்லைடுகள்: ".ஸ்லைடு", வேகம்: 3000, எளிதாக்குதல்: "லீனியர்" ), விருப்பங்கள்); var டைமர் = பூஜ்யம்; // டைமர் var இன்டெக்ஸ் = 0; // Cursor var slideTo = செயல்பாடு(ஸ்லைடு, உறுப்பு) (var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true). உயிரூட்டு (( ஒளிபுகாநிலை: 1 ), options.speed, options.easing) உடன்பிறப்புகள்(options.slides) css("ஒளிபுகாநிலை", 0); ); var autoSlide = செயல்பாடு(உறுப்பு) (// வரிசை டைமரை துவக்கவும் = setInterval ( function() (index++; // கர்சரை 1 ஆல் அதிகரிக்கவும் if(index == $(options.slides, element).length) (index = 0; // cursor ஐ மீட்டமை ) slideTo(index, element); ), option.speed );// method.animate() ); var startStop = செயல்பாடு(உறுப்பு) ( element.hover(function() ( // அனிமேஷனை நிறுத்து clearInterval(டைமர்); டைமர் = null; ), செயல்பாடு () ( autoSlide(உறுப்பு); // அனிமேஷனை மீண்டும் தொடங்கு ); ); இதைத் திரும்பு.each(function() (var $element = $(இது); ஆட்டோஸ்லைடு ($ உறுப்பு); ஸ்டார்ட்ஸ்டாப்($ உறுப்பு); )); ); ))(jQuery);

.stop() முறையின் இரண்டு அளவுருக்களும் சரி என அமைக்கப்பட்டுள்ளன, ஏனெனில் எங்கள் வரிசையில் இருந்து அனிமேஷன் வரிசையை உருவாக்க வேண்டிய அவசியமில்லை.

தூய JS இல், குறியீடு எளிதாகிறது. ஒவ்வொரு ஸ்லைடிற்கும் ஒரு குறிப்பிட்ட கால அளவு கொண்ட CSS மாற்றத்தை பதிவு செய்கிறோம்:

ஸ்லைடு (மாற்றம்: ஒளிபுகாநிலை 3s நேரியல்; /* 3 வினாடிகள் = 3000 மில்லி விநாடிகள் */ )

மற்றும் குறியீடு இப்படி இருக்கும்:

விசைப்பலகை வழிசெலுத்தல் மேம்பட்ட ஸ்லைடு காட்சிகள் விசைப்பலகை வழிசெலுத்தலை வழங்குகின்றன, அதாவது. விசைகளை அழுத்துவதன் மூலம் ஸ்லைடுகளை உருட்டவும். எங்களைப் பொறுத்தவரை, விசை அழுத்த நிகழ்வின் கையாளுதலைப் பதிவு செய்ய வேண்டும் என்பதே இதன் பொருள்.

இதைச் செய்ய, நிகழ்வு பொருளின் கீகோட் பண்பை அணுகுவோம். இது அழுத்தப்பட்ட விசையின் குறியீட்டை வழங்குகிறது (குறியீடுகளின் பட்டியல்).

"முந்தைய" மற்றும் "அடுத்து" பொத்தான்களுடன் நாங்கள் இணைத்த நிகழ்வுகள் இப்போது "இடது" மற்றும் "வலது" விசைகளுடன் இணைக்கப்படலாம். jQuery:

$("உடல்").on("கீடவுன்", செயல்பாடு(e) (var குறியீடு = e.keyCode; if(code == 39) ( // இடது அம்பு $next.trigger("click"); ) if( குறியீடு == 37) (// வலது அம்பு $previous.trigger("click"); ) );

தூய JS இல், எளிய .trigger() முறைக்கு பதிலாக, நீங்கள் dispatchEvent():

ஆவணம் .next.dispatchEvent(evt); ) if(குறியீடு == 37) (// வலது அம்பு self.previous.dispatchEvent(evt); ) ), false);

ஒழுக்கமான திட்டங்களில் இதைச் செய்வது வழக்கம் அல்ல. பொது முறையில் புரட்டலை வழங்கும் செயல்பாட்டை நாம் வரையறுக்க வேண்டும், பின்னர் பொத்தானைக் கிளிக் செய்யும் போது அதை அழைக்கவும். இந்தச் செயல்பாட்டைச் செயல்படுத்த நிரலின் மற்றொரு பகுதி தேவைப்பட்டால், DOM நிகழ்வுகளைப் பின்பற்ற வேண்டிய அவசியமில்லை, ஆனால் இந்த முறையை வெறுமனே அழைக்கலாம்.

கால்பேக்குகள் எந்த ஸ்லைடுஷோ செயலிலும் சில குறியீட்டை இணைக்க முடிந்தால் நன்றாக இருக்கும். இது திரும்பப்பெறும் செயல்பாடுகளின் நோக்கம் - ஒரு குறிப்பிட்ட செயல் நிகழும்போது மட்டுமே அவை செயல்படுத்தப்படும். எங்கள் ஸ்லைடுஷோவில் தலைப்புகள் உள்ளன மற்றும் அவை இயல்பாகவே மறைக்கப்பட்டுள்ளன என்று வைத்துக்கொள்வோம். அனிமேஷன் நேரத்தில், தற்போதைய ஸ்லைடுக்கான தலைப்பைக் காட்ட வேண்டும் அல்லது அதைக் கொண்டு ஏதாவது செய்ய வேண்டும்.

jQuery இல் நீங்கள் இது போன்ற அழைப்பை உருவாக்கலாம்:

(function($) ($.fn.slideshow = செயல்பாடு(விருப்பங்கள்) (விருப்பங்கள் = $.extend(( //... callback: function()) ), விருப்பங்கள்); var slideTo = செயல்பாடு(ஸ்லைடு, உறுப்பு) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide தற்போதைய ஸ்லைடு)).

இந்த வழக்கில், கால்பேக் என்பது .animate() இலிருந்து ஒரு செயல்பாடு ஆகும், இது தற்போதைய ஸ்லைடை ஒரு வாதமாக எடுத்துக்கொள்கிறது. நீங்கள் அதை எவ்வாறு பயன்படுத்தலாம் என்பது இங்கே:

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent(); // தற்போதைய தலைப்பைக் காட்டி மற்றவற்றை மறைக்கிறது $wrapper.find (" .slide-caption").hide(); slide.find(".slide-caption").show("slode-caption"); ) ));));

தூய JS இல்:

(function() ( செயல்பாடு ஸ்லைடுஷோ(உறுப்பு, அழைப்பு) ( this.callback = callback || செயல்பாடு ()); // எங்கள் கால்பேக் this.el = document.querySelector(element); this.init(); ) ஸ்லைடுஷோ. முன்மாதிரி = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: செயல்பாடு(ஸ்லைடு) ( var self = இது; var கரண்ட்ஸ்லைடு = self.slides; currentSlide.style.opacity = 1; for(var i = 0; i< self.slides.length; i++) { var slide = self.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } setTimeout(self.callback(currentSlide), 500); // Вызывает функцию по окончанию перехода } }; // })();

கால்பேக் செயல்பாடு கட்டமைப்பாளரின் இரண்டாவது அளவுருவாக வரையறுக்கப்படுகிறது. நீங்கள் இதை இப்படி பயன்படுத்தலாம்:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // தற்போதைய தலைப்பைக் காட்டுகிறது மற்றும் மற்றவற்றை மறைக்கிறது var allSlides = wrapper. querySelectorAll(".slide"); var caption = slide.querySelector(".slide-caption"); caption.classList.add("visible"); for(var i = 0; i< allSlides.length; ++i) { var sld = allSlides[i]; var cpt = sld.querySelector(".slide-caption"); if(sld !== slide) { cpt.classList.remove("visible"); } } }); });

வெளிப்புற APIகள் இதுவரை எங்களின் பணிச் சூழல் எளிமையானது: அனைத்து ஸ்லைடுகளும் ஏற்கனவே ஆவணத்தில் உள்ளன. வெளியில் இருந்து (YouTube, Vimeo, Flickr) தரவுகளைச் செருக வேண்டும் என்றால், வெளிப்புற உள்ளடக்கத்தைப் பெறும்போது, பறக்கும்போது ஸ்லைடுகளை நிரப்ப வேண்டும்.

மூன்றாம் தரப்பு சேவையகத்திலிருந்து உடனடியாக பதில் கிடைக்காது என்பதால், செயல்முறை நடந்து கொண்டிருப்பதைக் காட்ட, ஏற்றுதல் அனிமேஷனைச் செருக வேண்டும்:

முந்தைய அடுத்தது

இது ஒரு gif அல்லது தூய CSS அனிமேஷனாக இருக்கலாம்:

#ஸ்பின்னர் (எல்லை-ஆரம்: 50%; எல்லை: 2px திட #000; உயரம்: 80px; அகலம்: 80px; நிலை: முழுமையானது; மேல்: 50%; இடது: 50%; விளிம்பு: -40px 0 0 -40px; ) # ஸ்பின்னர்:பிறகு (உள்ளடக்கம்: ""; நிலை: முழுமையானது; பின்னணி-நிறம்: #000; மேல்: 2px; இடது: 48%; உயரம்: 38px; அகலம்: 2px; எல்லை-ஆரம்: 5px; -webkit-transform-origin: 50% 97%; உருமாற்றம்-தோற்றம்: 50% 97%; -வெப்கிட்-அனிமேஷன்: கோண 1s நேரியல் எல்லையற்ற; அனிமேஷன்: கோண 1s நேரியல் எல்லையற்ற; ) @-webkit-keyframes கோணம் ( 0%(-webkit-transform:rotate(0%) );) 100%(-வெப்கிட்-மாற்றம்:சுழற்று(360deg);) ) @keyframes கோண (0%(மாற்றம்:சுழற்று(0deg);) 100%(மாற்றம்:சுழற்று(360deg);) ) #ஸ்பின்னர்:முன் (360deg); உள்ளடக்கம்: ""; நிலை: முழுமையானது; பின்னணி-நிறம்: #000; மேல்: 6px; இடது: 48%; உயரம்: 35px; அகலம்: 2px; எல்லை-ஆரம்: 5px; -webkit-transform-origin: 50% 94% ; உருமாற்றம்-தோற்றம்: 50% 94%; -வெப்கிட்-அனிமேஷன்: ptangular 6s நேரியல் எல்லையற்ற; அனிமேஷன்: ptangular 6s நேரியல் எல்லையற்ற; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform: rotate) (0deg); %(-webkit-transform:rotate(360deg);) ) @keyframes ptangular (0%(மாற்றம்:சுழற்று(0deg);) 100%(மாற்றம்:சுழற்று(360deg);) )

படிகள் இப்படி இருக்கும்:
- வெளியில் இருந்து தரவைக் கோருங்கள்
- பூட்லோடரை மறை
- தரவுகளை அலசவும்
- HTML ஐ உருவாக்கவும்
- ஒரு ஸ்லைடு காட்சியைக் காட்டவும்
- செயல்முறை ஸ்லைடு காட்சிகள்

யூடியூப்பில் இருந்து பயனரின் மிகச் சமீபத்திய வீடியோக்களைத் தேர்ந்தெடுக்கிறோம் என்று வைத்துக் கொள்வோம். jQuery:

(செயல்பாடு($) ($.fn.slideshow = செயல்பாடு(விருப்பங்கள்) (விருப்பங்கள் = $.extend((ரேப்பர்: ".slider-wrapper", //... loader: "#spinner", //... வரம்பு: 5, பயனர்பெயர்: "learncodeacademy" ), விருப்பங்கள்); //... var getVideos = செயல்பாடு() ( // YouTube var ytURL இலிருந்து வீடியோக்களைப் பெறவும் = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // வீடியோவை JSON பொருளாகப் பெறவும் $(options.loader). மறை(); // ஏற்றி var உள்ளீடுகளை மறைத்தல் = videos.feed.entry; var html = ""; for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } $(options.wrapper).html(html); // Выведем слайд-шоу }); }; return this.each(function() { //... getVideos(); // Обрабатываем слайд-шоу }); }; })(jQuery);

தூய ஜாவாஸ்கிரிப்ட்டில் ஒரு கூடுதல் படி உள்ளது - JSON ஐப் பெறுவதற்கான ஒரு முறையை உருவாக்குகிறது:

பின்னர் நடைமுறைகள் ஒத்தவை:

(function() ( செயல்பாடு ஸ்லைடுஷோ(உறுப்பு) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector( ".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "learncodeacademy"; this.actions(); ) , _getJSON: செயல்பாடு(url, callback) ( callback = callback || function(); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); .onreadystatechange = செயல்பாடு() (என்றால் (request.status == 200 && request.readyState == 4) (var data = JSON.parse(request.responseText); // JSON ஆப்ஜெக்ட் கால்பேக்(தரவு); ) வேறு (கன்சோல். பதிவு( request.status); ) ); //... getVideos: function() ( var self = this; // YouTube வீடியோவைப் பெறுங்கள் var ytURL = "https://gdata.youtube.com/feeds/api /videos ?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, செயல்பாடு(வீடியோக்கள்) ( // வீடியோவை JSON பொருளாக பெறவும் var உள்ளீடுகள் = videos.feed.entry ; var html = ""; self.loader.style.display = "இல்லை"; // (var i = 0; i க்கான ஏற்றியை மறைத்தல்< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } self.wrapper.innerHTML = html; // Выводим слайд-шоу }); }, actions: function() { var self = this; self.getVideos(); // Обрабатываем слайд-шоу } }; })(); Добавить метки

முந்தைய அடுத்தது

alt பண்புக்கூறுக்கு அர்த்தமுள்ள மதிப்பைச் சேர்க்க மறக்காதீர்கள்.

பக்க இணைப்புகளைப் பயன்படுத்த, நீங்கள் பின்வருவனவற்றைச் செய்யலாம்:

... ... ... 1 2 3

முந்தைய அடுத்த 1 2 3

CSS பின்வரும் கட்டமைப்புடன் ஆரம்பிக்கலாம்:

முந்தைய அடுத்தது

உள் ரேப்பர் பாணிகளில் பின்வருவன அடங்கும்:

ஸ்லைடு ( மிதவை: இடது; நிலை: உறவினர்; அகலம்: 1024px; உயரம்: 683px; )

இந்த வகுப்புகள் ஸ்கிரிப்ட்டிலிருந்து மாறும் வகையில் ஒதுக்கப்படும்.

ஸ்லைடர்-ரேப்பர் (நிலை: உறவினர்; // தேவையான மாற்றம்: இடது 500ms நேரியல்; )

இப்போது ஸ்டைல் ஆப்ஜெக்ட் மூலம் இடது சொத்தை மாறும் வகையில் மாற்றலாம்:

மற்றும் தூய JS இல் இது போல் தெரிகிறது:

IE10 முதல் நீங்கள் வகுப்புப் பட்டியல் மூலம் வகுப்புகளை நிர்வகிக்கலாம்:

Link.classList.add("தற்போதைய");

மேலும் IE11 உடன், தரவுத்தொகுப்பு சொத்து மூலம் தரவு பண்புகளை பெறலாம்:

Var இன்டெக்ஸ் = parseInt(a.dataset.slide, 10) + 1;

jQuery இல் குறியீடு இப்படி இருக்கும்:

.index() முறையானது ஒவ்வொரு இணைப்பின் எண் குறியீட்டைக் கொடுக்கிறது.

பரிமாணங்களைப் புரிந்துகொள்வது பின்வரும் CSS விதிக்கு வருவோம்:

ஸ்லைடர்-ரேப்பர் (அகலம்: 9999px; உயரம்: 683px; நிலை: உறவினர்; மாற்றம்: இடது 500ms நேரியல்; )

jQuery இல் இது எளிது:

பின்வரும் பாணிகளின் தொகுப்பு இந்த முறையை நிரூபிக்கிறது:

தூய JS இல் நீங்கள் ஒவ்வொரு ஸ்லைடின் CSS மாற்றத்தையும் பதிவு செய்ய வேண்டும்:

jQuery இல் குறியீடு பின்வருமாறு:

ஜாவாஸ்கிரிப்டில் இது இருக்கும்:

ஸ்லைடு (மாற்றம்: ஒளிபுகாநிலை 3s நேரியல்; /* 3 வினாடிகள் = 3000 மில்லி விநாடிகள் */ )

மற்றும் குறியீடு இப்படி இருக்கும்:

தூய JS இல், எளிய .trigger() முறைக்கு பதிலாக, நீங்கள் dispatchEvent():

ஆவணம் .next.dispatchEvent(evt); ) if(குறியீடு == 37) (// வலது அம்பு self.previous.dispatchEvent(evt); ) ), false);

jQuery இல் நீங்கள் இது போன்ற அழைப்பை உருவாக்கலாம்:

தூய JS இல்:

முந்தைய அடுத்தது

இது ஒரு gif அல்லது தூய CSS அனிமேஷனாக இருக்கலாம்:

பின்னர் நடைமுறைகள் ஒத்தவை:

1. சிறந்த jQuery ஸ்லைடுஷோ

jQuery தொழில்நுட்பங்களைப் பயன்படுத்தி ஒரு பெரிய, கண்கவர் ஸ்லைடுஷோ.

2. jQuery சொருகி "ஸ்கேல் கொணர்வி"

jQuery ஐப் பயன்படுத்தி அளவிடக்கூடிய ஸ்லைடுஷோ. உங்களுக்கு மிகவும் பொருத்தமான ஸ்லைடுஷோ அளவுகளை நீங்கள் அமைக்கலாம்.

3. jQuery சொருகி "slideJS"

உரை விளக்கத்துடன் கூடிய பட ஸ்லைடர்.

4. செருகுநிரல் "JSliderNews" 5. CSS3 jQuery ஸ்லைடர்

வழிசெலுத்தல் அம்புகளின் மேல் வட்டமிடும்போது, அடுத்த ஸ்லைடின் வட்ட சிறுபடம் தோன்றும்.

6. நல்ல jQuery "விளக்கக்காட்சி சுழற்சி" ஸ்லைடர்

படத்தை ஏற்றுதல் காட்டி jQuery ஸ்லைடர். தானியங்கி ஸ்லைடை மாற்றும் வசதி வழங்கப்படுகிறது.

7. jQuery சொருகி "இடமாறு ஸ்லைடர்"

வால்யூமெட்ரிக் பின்னணி விளைவு கொண்ட ஸ்லைடர். இந்த ஸ்லைடரின் சிறப்பம்சமானது பின்னணியின் இயக்கம் ஆகும், இதில் பல அடுக்குகள் உள்ளன, ஒவ்வொன்றும் வெவ்வேறு வேகத்தில் உருட்டும். இதன் விளைவாக அளவீட்டு விளைவின் பிரதிபலிப்பு. இது மிகவும் அழகாக இருக்கிறது, நீங்களே பார்க்கலாம். ஓபரா, கூகுள் குரோம், ஐஇ போன்ற உலாவிகளில் இதன் விளைவு மிகவும் சீராகக் காட்டப்படும்.

8. புதிய, இலகுரக jQuery ஸ்லைடர் "bxSlider 3.0"

"எடுத்துக்காட்டுகள்" பிரிவில் உள்ள டெமோ பக்கத்தில் இந்த சொருகியின் சாத்தியமான அனைத்து பயன்பாடுகளுக்கான இணைப்புகளையும் நீங்கள் காணலாம்.

9. jQuery பட ஸ்லைடர், "slideJS" சொருகி

ஒரு ஸ்டைலான jQuery ஸ்லைடர் நிச்சயமாக உங்கள் திட்டத்தை அலங்கரிக்க முடியும்.

10. jQuery ஸ்லைடுஷோ சொருகி "ஈஸி ஸ்லைடுகள்" v1.1

ஸ்லைடு காட்சிகளை உருவாக்க jQuery சொருகி பயன்படுத்த எளிதானது.

11. jQuery Slidy சொருகி

பல்வேறு பதிப்புகளில் இலகுரக jQuery சொருகி. தானியங்கி ஸ்லைடை மாற்றும் வசதி வழங்கப்படுகிறது.

12. jQuery CSS கேலரியில் தானியங்கி ஸ்லைடு மாறும்

பார்வையாளர் குறிப்பிட்ட நேரத்திற்குள் "முன்னோக்கி" அல்லது "பின்" அம்புக்குறிகளைக் கிளிக் செய்யவில்லை என்றால், கேலரி தானாகவே உருட்டத் தொடங்கும்.

13. jQuery ஸ்லைடர் "நிவோ ஸ்லைடர்"

மிகவும் தொழில்முறை, உயர்தர, இலகுரக சொருகி சரியான குறியீட்டுடன். பல்வேறு ஸ்லைடு மாற்றம் விளைவுகள் உள்ளன.

14. jQuery ஸ்லைடர் "MobilySlider"

புதிய ஸ்லைடர். பல்வேறு படத்தை மாற்றும் விளைவுகள் jQuery ஸ்லைடர்.

15. jQuery செருகுநிரல் "Slider²"

தானியங்கி ஸ்லைடு மாற்றியுடன் கூடிய இலகுரக ஸ்லைடர்.

16. புதிய ஜாவாஸ்கிரிப்ட் ஸ்லைடர்

தானியங்கி பட மாற்றத்துடன் கூடிய ஸ்லைடர்.

தானியங்கி ஸ்லைடு மாற்றத்துடன் ஸ்லைடு காட்சிகளை செயல்படுத்துவதற்கான செருகுநிரல். பட சிறுபடங்களைப் பயன்படுத்தி காட்சியைக் கட்டுப்படுத்த முடியும்.

NivoSlider செருகுநிரலைப் பயன்படுத்தி jQuery CSS பட ஸ்லைடர்.

19. jQuery ஸ்லைடர் "jShowOff"

உள்ளடக்க சுழற்சிக்கான செருகுநிரல். பயன்பாட்டிற்கான மூன்று விருப்பங்கள்: வழிசெலுத்தல் இல்லாமல் (ஸ்லைடு ஷோ வடிவத்தில் தானியங்கி மாற்றத்துடன்), பொத்தான்களின் வடிவத்தில் வழிசெலுத்தலுடன், பட சிறுபடங்களின் வடிவத்தில் வழிசெலுத்தலுடன்.

20. "ஷட்டர் எஃபெக்ட் போர்ட்ஃபோலியோ" சொருகி

புகைப்படக் கலைஞரின் போர்ட்ஃபோலியோவை வடிவமைப்பதற்கான புதிய jQuery செருகுநிரல். கேலரியில் படங்களை மாற்றுவதில் ஒரு சுவாரஸ்யமான விளைவு உள்ளது. லென்ஸ் ஷட்டரின் செயல்பாட்டைப் போன்ற விளைவுடன் புகைப்படங்கள் ஒன்றையொன்று பின்தொடர்கின்றன.

21. இலகுரக ஜாவாஸ்கிரிப்ட் CSS ஸ்லைடர் "TinySlider 2"

ஜாவாஸ்கிரிப்ட் மற்றும் CSS ஐப் பயன்படுத்தி பட ஸ்லைடரை செயல்படுத்துதல்.

22. அற்புதமான ஸ்லைடர் "Tinycircleslider"

ஸ்டைலான சுற்று ஸ்லைடர். சுற்றளவைச் சுற்றி சிவப்பு வட்ட வடிவில் ஸ்லைடரை இழுப்பதன் மூலம் படங்களுக்கிடையேயான மாற்றம் மேற்கொள்ளப்படுகிறது. உங்கள் வடிவமைப்பில் சுற்று கூறுகளைப் பயன்படுத்தினால் அது உங்கள் இணையதளத்தில் சரியாகப் பொருந்தும்.

23. jQuery உடன் பட ஸ்லைடர்

இலகுரக ஸ்லைடர் "ஸ்லைடர் கிட்". ஸ்லைடர் வெவ்வேறு வடிவமைப்புகளில் கிடைக்கிறது: செங்குத்து மற்றும் கிடைமட்ட. படங்களுக்கிடையில் பல்வேறு வகையான வழிசெலுத்தல்களும் செயல்படுத்தப்படுகின்றன: "முன்னோக்கி" மற்றும் "பின்" பொத்தான்களைப் பயன்படுத்தி, மவுஸ் வீலைப் பயன்படுத்தி, ஸ்லைடில் மவுஸ் கிளிக் மூலம்.

24. மினியேச்சர்களுடன் கூடிய கேலரி "ஸ்லைடர் கிட்"

தொகுப்பு "ஸ்லைடர் கிட்". சிறுபடங்களின் ஸ்க்ரோலிங் செங்குத்தாகவும் கிடைமட்டமாகவும் மேற்கொள்ளப்படுகிறது. படங்களுக்கிடையேயான மாற்றம் இதைப் பயன்படுத்தி மேற்கொள்ளப்படுகிறது: மவுஸ் வீல், மவுஸ் கிளிக் அல்லது சிறுபடத்தின் மீது கர்சரை நகர்த்துதல்.

25. jQuery உள்ளடக்க ஸ்லைடர் "ஸ்லைடர் கிட்"

jQuery ஐப் பயன்படுத்தி செங்குத்து மற்றும் கிடைமட்ட உள்ளடக்க ஸ்லைடர்.

26. jQuery ஸ்லைடுஷோ "ஸ்லைடர் கிட்"

தானியங்கி ஸ்லைடு மாற்றத்துடன் கூடிய ஸ்லைடுஷோ.

27. இலகுரக தொழில்முறை ஜாவாஸ்கிரிப்ட் CSS3 ஸ்லைடர்

2011 இல் உருவாக்கப்பட்ட ஒரு நேர்த்தியான jQuery மற்றும் CSS3 ஸ்லைடர்.

சிறுபடங்களுடன் jQuery ஸ்லைடுஷோ.

29. எளிய jQuery ஸ்லைடுஷோ

வழிசெலுத்தல் பொத்தான்கள் கொண்ட ஸ்லைடுஷோ.

30. அற்புதமான jQuery "Skitter" ஸ்லைடுஷோ

பிரமிக்க வைக்கும் ஸ்லைடு காட்சிகளை உருவாக்குவதற்கான jQuery ஸ்கிட்டர் சொருகி. படங்களை மாற்றும் போது சொருகி 22 (!) வகையான வெவ்வேறு அனிமேஷன் விளைவுகளை ஆதரிக்கிறது. இரண்டு ஸ்லைடு வழிசெலுத்தல் விருப்பங்களுடன் வேலை செய்யலாம்: ஸ்லைடு எண்களைப் பயன்படுத்துதல் மற்றும் சிறுபடங்களைப் பயன்படுத்துதல். மிக உயர்ந்த தரமான கண்டுபிடிப்பான டெமோவைப் பார்க்க மறக்காதீர்கள். பயன்படுத்தப்படும் தொழில்நுட்பங்கள்: CSS, HTML, jQuery, PHP.

31. ஸ்லைடுஷோ "அசிங்கமான"

செயல்பாட்டு ஸ்லைடு ஷோ. ஸ்லைடுகள் பின்வருமாறு இருக்கலாம்: எளிய படங்கள், தலைப்புகளுடன் கூடிய படங்கள், உதவிக்குறிப்புகள் கொண்ட படங்கள், வீடியோக்கள். வழிசெலுத்த உங்கள் விசைப்பலகையில் அம்புகள், ஸ்லைடு எண் இணைப்புகள் மற்றும் இடது/வலது விசைகளைப் பயன்படுத்தலாம். ஸ்லைடு ஷோ பல பதிப்புகளில் வருகிறது: சிறுபடங்களுடன் மற்றும் இல்லாமல். அனைத்து விருப்பங்களையும் காண, டெமோ பக்கத்தின் மேலே அமைந்துள்ள டெமோ #1 - டெமோ #6 இணைப்புகளைப் பின்பற்றவும்.

பட ஸ்லைடருக்கான மிகவும் அசல் வடிவமைப்பு, விசிறியை நினைவூட்டுகிறது. அனிமேஷன் ஸ்லைடு மாற்றம். படங்களுக்கு இடையில் வழிசெலுத்தல் அம்புகளைப் பயன்படுத்தி மேற்கொள்ளப்படுகிறது. மேலே அமைந்துள்ள ப்ளே/பாஸ் பட்டனைப் பயன்படுத்தி ஒரு தானியங்கி மாற்றமும் உள்ளது.

அனிமேஷன் jQuery ஸ்லைடர். உலாவி சாளரத்தின் அளவை மாற்றும் போது பின்னணி படங்கள் தானாகவே அளவிடப்படும். ஒவ்வொரு படத்திற்கும், ஒரு விளக்கத்துடன் ஒரு தொகுதி தோன்றும்.

34. jQuery மற்றும் CSS3 பயன்படுத்தி "ஃப்ளக்ஸ் ஸ்லைடர்" ஸ்லைடர்

புதிய jQuery ஸ்லைடர். ஸ்லைடுகளை மாற்றும்போது பல அருமையான அனிமேஷன் விளைவுகள்.

35. jQuery சொருகி "jSwitch"

அனிமேஷன் jQuery கேலரி.

தானியங்கி ஸ்லைடு மாற்றத்துடன் கூடிய எளிதான jQuery ஸ்லைடுஷோ.

37. செருகுநிரலின் புதிய பதிப்பு “SlideDeck 1.2.2”

தொழில்முறை உள்ளடக்க ஸ்லைடர். தானியங்கி ஸ்லைடு மாற்றத்துடன் கூடிய விருப்பங்கள் உள்ளன, அதே போல் ஸ்லைடுகளுக்கு இடையில் செல்ல மவுஸ் வீலைப் பயன்படுத்தும் விருப்பமும் உள்ளது.

38. jQuery ஸ்லைடர் "சூடோ ஸ்லைடர்"

jQuery ஐப் பயன்படுத்தி இலகுரக பட ஸ்லைடர். பல செயல்படுத்தல் விருப்பங்கள் உள்ளன: படங்களை கிடைமட்ட மற்றும் செங்குத்தாக மாற்றுதல், ஸ்லைடு எண்ணுடன் இணைப்புகள் மற்றும் இல்லாமல், பட தலைப்புகளுடன் மற்றும் இல்லாமல், பல்வேறு படத்தை மாற்றும் விளைவுகள். தானியங்கி ஸ்லைடை மாற்றும் செயல்பாடு உள்ளது. அனைத்து செயல்படுத்தல் எடுத்துக்காட்டுகளுக்கான இணைப்புகளை டெமோ பக்கத்தில் காணலாம்.

39. jQuery CSS3 ஸ்லைடுஷோ

சிறுபடங்களுடன் கூடிய ஸ்லைடுஷோ தானியங்கி ஸ்லைடை மாற்றும் பயன்முறையை ஆதரிக்கிறது.

40. jQuery ஸ்லைடர் "ஃப்ளக்ஸ் ஸ்லைடர்"

பல படத்தை மாற்றும் விளைவுகள் கொண்ட ஸ்லைடர்.

41. எளிய jQuery ஸ்லைடர்

jQuery ஐப் பயன்படுத்தி ஸ்டைலிஷ் பட ஸ்லைடர்.

அனைவருக்கும் வணக்கம். கோர்வாக்ஸ் உங்களுடன் இருக்கிறார். தூய ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஆந்தை புகைப்பட கேலரி ஸ்லைடரை உருவாக்குவது எவ்வளவு எளிது என்பதை இன்று நான் உங்களுக்குக் காண்பிப்பேன். ஆரம்பிக்கலாம்.

முதலில் நாம் ஒரு திட்ட கட்டமைப்பை உருவாக்க வேண்டும். இங்கே ஒரு உதாரணம்:

HTML தளவமைப்பு

index.html கோப்பில் நீங்கள் பின்வரும் கட்டமைப்பை உருவாக்க வேண்டும்.

CSS ஸ்டைல்கள் #கேலரி(அகலம்: 400px; உரை-சீரமைப்பு: மையம்; விளிம்பு: 0 தானியங்கு; ) .photo(நிலை: உறவினர்; உயரம்: 300px; ) .photo img(அகலம்: 100%; நிலை: முழுமையான; ஒளிபுகாநிலை: 0; இடது: 0; மாற்றம்: ஒளிபுகா 1s; ) .photo img.shown( ஒளிபுகாநிலை: 1; ) .tabs( text-align: centre; padding-top: 20px; )

இங்கே கவனம் செலுத்த வேண்டிய முக்கிய விஷயம் என்னவென்றால், எல்லா படங்களையும் இயல்பாகவே வெளிப்படையானதாக மாற்றுகிறோம் (ஒளிபுகாநிலை: 0). காட்டப்பட்டுள்ள வகுப்பில் நாம் ஒளிபுகா சொத்தை சேர்க்கிறோம்: 1.

JS var btn_prev = document.querySelector(".tabs .prev"), btn_next = document.querySelector(".tabs .next") சேர்க்கவும்; var படங்கள் = document.querySelectorAll(".photo img"); var i = 0; btn_prev.onclick = செயல்பாடு())(படங்கள்[i].className = ""; i = i - 1; if(i = images.length)( i = 0; ) images[i].className = "காட்டப்பட்டது"; );

இங்கே மிகவும் சுவாரஸ்யமான பகுதி. முதலில், இரண்டு பொத்தான்களை துவக்குகிறோம், அதில் கிளிக் நிகழ்வுகள் மற்றும் புகைப்படங்களின் தொகுப்பை (btn_prev, btn_next, படங்கள்) இணைப்போம். துவக்கத்திற்குப் பிறகு, எங்கள் ஸ்லைடரில் ஸ்க்ரோல் செய்யும் பொத்தான்களில் ஒரு கிளிக் நிகழ்வை வீசுவோம்.

படங்கள்[i].className = ""; இங்கே காட்டப்பட்டுள்ள வகுப்பை கிளிக் செய்வதன் மூலம் எல்லா படங்களிலிருந்தும் அகற்றுவோம்.

i ++ (—) இங்கே நாம் ஒவ்வொரு கிளிக்கிலும் ஸ்லைடு அடையாளங்காட்டியை மாற்றுவோம்

if(i > = images.length)( i = 0; ) ("முன்னோக்கி" பொத்தானைக் கிளிக் செய்வதற்கான நிபந்தனை) கடைசி ஸ்லைடு எப்போது தேர்ந்தெடுக்கப்பட்டது என்பதைச் சரிபார்க்க நமக்கு இந்த நிபந்தனை தேவை. கடைசி ஸ்லைடை விட பெரிய ஸ்லைடைத் தேர்ந்தெடுத்திருந்தால், காட்டிக்கு 0 ஐ ஒதுக்குவோம் (இது தானாகவே தொகுப்பின் தொடக்கத்தில் நம்மை வைக்கும்).

ஒருவேளை நான்< 0){ i = images.length — 1; } (условие по клику на кнопку «назад») здесь если индификатор картники меньше 0 то индификатор будет равен последнему слайду -1 (т.к. массив у нас начинается с 0)

படங்கள்[i].className = "காட்டப்பட்டது"; தற்போதைய செயலில் உள்ள ஸ்லைடில் காட்டப்பட்டுள்ள வகுப்பை இங்கே சேர்க்கிறோம்.

முடிவுரை

இன்று நாம் சொந்த JS ஐப் பயன்படுத்தி எங்கள் சொந்த ஸ்லைடரை உருவாக்கினோம். நீங்கள் மூலக் குறியீட்டைப் பெறலாம். கோர்வாக்ஸ் உங்களுடன் இருந்தார். உங்கள் வளர்ச்சிக்கு வாழ்த்துக்கள்!