जेकरी स्लाइड शो DIY

परिचय

नेटवर्क में तैयार स्लाइडशो की एक अविश्वसनीय मात्रा है, जिसमें केवल चित्र जोड़ते हैं और आनंद लेते हैं कि वे विभिन्न प्रकार के एनिमेशन का उपयोग करके कैसे बदलते हैं। उनके माध्यम से देखते हुए, मैं खुद इस बाइक का आविष्कार करना चाहता था। किसी भी मात्रात्मक प्रभाव के बिना, आदि। सबसे आम स्लाइड शो।

यह कैसे काम करता है

ऑपरेशन का सिद्धांत सरल है: मैंने स्लाइड के आकार से मेल खाने वाले ब्लॉक में "अधिक प्रामाणिक" ब्लॉक डाला, जिसमें मैं बाईं ओर संरेखित छवियों को पैक करूंगा (फ्लोट: बाईं ओर), और जिसमें बाईं ओर मार्जिन मार्जिन-बाईं ओर होगा जक्वेरी फ़ंक्शन चेतन ।

उदाहरण

यहाँ एक डेमो है ।

कार्यान्वयन

मैंने स्लाइड का आकार 371x199px चुना।
शुरुआत करने के लिए, हम HTML और CSS लिखेंगे, जिस पर हम भरोसा करना जारी रखेंगे:

<div id="slideshow"> <div id="slideimages"> <img class="slideimage" src="/img/slides/0.jpg" id="1" data-title=" "> <img class="slideimage" src="/img/slides/1.jpg" id="2" data-title=" "> </div> <div id="controlrow"> <span id="slidecounter"></span> <!--  --> <div id="slidetitle"></div> <!-- --> <div id="slidecontrollers"> <div class="imtype" id="rew"></div> <!-- --> <div class="imtype pause" id="play-pause"></div> <!-- /--> <div class="imtype" id="few"></div> <!-- --> </div> </div> </div> 

 #slideshow { position:relative; /*   div#slidecontrollers*/ overflow:hidden; /*        div#slideimages*/ width:371px; /**/ height:199px; font-size:0; } #controlrow { position:absolute; /*   */ z-index:2; /*   */ bottom:8px; /**/ width:371px; opacity:0; /*  ,   */ filter:alpha(opacity=0); /*  ,     */ background: url('images/slidermenu.png') repeat-x; /**/ border-top: 1px solid rgba(255, 255, 255, 0.35); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } #slidecounter { float:left; /*   */ margin: 5px 9px; /**/ color: #727272; text-shadow: 0 0 1px #727272; font-size: 23px; } #slidetitle { float:left; /*   */ margin:11px 0; /**/ overflow:hidden; font-size:14px; color:#e5e5e5; } .slideimage { width:371px; /**/ float:left; /*   */ } #slidecontrollers { float:right; /*   */ width:57px; /**/ height:20px; box-shadow:0 1px 0 rgba(255,255,255,0.16), inset 0 2px 3px rgba(0,0,0,0.6); -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.16), inset 0 2px 3px rgba(0,0,0,0.6); -moz-box-shadow:0 1px 0 rgba(255,255,255,0.16), inset 0 2px 3px rgba(0,0,0,0.6); border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; background:#222 url('images/slidecontrol_bg.png') repeat-x; margin:6px 9px 4px; text-align:center; padding:4px; } .imtype { display:inline-block; /*   ,       */ width:13px; /**/ height:20px; background-repeat:no-repeat; background-position:center; cursor:pointer; } #rew { background-image:url('images/rew.png'); /* */ } #few { background-image:url('images/few.png'); /* */ } .play { background-image:url('images/play.png'); /* */ } .pause { background-image:url('images/pause.png'); /* */ } #play-pause { margin:0 8px; /**/ } 

चलिए मज़ेदार हिस्से पर आते हैं: इसे पूरा करें।
सबसे पहले, चर बनाएं:

 var start_num=1; //      var auto_few=1; // (1)  (0)   var slidespeed=200; //     () var intervalspeed=3000; // () var num; //   .    ,     var i = start_num; //     i   var intervalID; //   var lock = 0; //      ,    

आइए स्लाइड का नाम बदलने के लिए फ़ंक्शन लिखें:

 function change_title() { $('#slidecounter').html(i + '/' + num); //  var title = $('img.slideimage#'+i).attr('data-title'); //   $('#slidetitle').html(title); //   } 

अब आगे और पीछे स्क्रॉल कार्य लिखते हैं।

 function few() { //  if(lock == 0) { //       if(i>=num) { //      ,  ,      (  371px),   ,       $('#slideimages').animate({'margin-left':'0'},slidespeed,function(){lock=0}); i = 1; } else { $('#slideimages').animate({'margin-left': parseInt($('#slideimages').css('margin-left')) - 371 + 'px'},slidespeed,function(){lock=0}); i++; } } lock = 1; change_title(); } function rew() { if(lock == 0) { if(i<=1) { $('#slideimages').animate({'margin-left': parseInt($('#slideimages').css('margin-left')) - 371*(num-1) + 'px'},slidespeed,function(){lock=0}); i = num; } else { $('#slideimages').animate({'margin-left': parseInt($('#slideimages').css('margin-left')) + 371 + 'px'},slidespeed,function(){lock=0}); i--; } } lock = 1; change_title(); } 

अब प्ले / पॉज बटन के लिए एक फंक्शन जोड़ें

 function play_pause() { if(auto_few == 0) { // ? auto_few = 1; // ,    $('#play-pause').removeClass('play').addClass('pause'); //  few(); //   intervalID = setInterval(autofew, intervalspeed); //  } else { auto_few = 0; // ,   $('#play-pause').removeClass('pause').addClass('play'); //  clearInterval(intervalID); //  } } 

ऑटो स्टार्ट / स्टॉप फंक्शन। हमें अभी भी उनकी आवश्यकता होगी:

 function stop_auto_few() { //  (. ) if(auto_few == 1) { auto_few = 0; $('#play-pause').removeClass('pause').addClass('play'); clearInterval(intervalID); } } function autofew() { if(auto_few == 1) { few(); } } 

अब सबसे महत्वपूर्ण बात। पेज लोड होने पर क्या होता है?

 $(document).ready(function() { num = $('.slideimage').length; $('#slideimages').css({'width': 371*num + 'px','margin-left': (-371)*(start_num-1) + 'px'}); //           change_title(); //    if(auto_few == 0) { //  ,    $('#play-pause').removeClass('pause').addClass('play'); } else { // ,    intervalID = setInterval(autofew, intervalspeed); } $('#few').click(function() { //     few(); //   stop_auto_few(); //    "",       }); $('#rew').click(function() { rew(); stop_auto_few(); }); $('#play-pause').click(function() { play_pause(); }); $('#slideshow').mouseenter(function() { //    $('#controlrow').stop().animate({'opacity':'1.0','filter': 'alpha(opacity=100)'},100); }).mouseleave(function() { $('#controlrow').stop().animate({'opacity':'0.0','filter': 'alpha(opacity=0)'},500); }); }); 

निष्कर्ष में

खैर, यह सब है। ऐसा लगता है कि मैंने कोई चालाकीपूर्ण चालाकी नहीं की। मुझे उम्मीद नहीं थी, ज़ाहिर है, कि यह टिप्पणियों के साथ ज्यादातर कोड को बदल देगा, लेकिन शब्दों के बिना।

और फिर से डेमो | स्रोत कोड