آموزش ساخت اسلاید شو با جی کوئری

2مارس - توسط behinesaz - 0 - در طراحی وب سایت مقالات اموزشی

در این قسمت آموزش ساخت اسلاید شو با جی کوئری را به شما آموزش می دهیم:

در مرحله اول یک سند HTML نیاز دارید باید بلوک مشخصی برای آن در نظر بگیرید و کد نویسی را آغاز کنید.

                                                                                                                                             <div id=“slideshowContainer”>
                                                                                                                                                                              </div>
حال بلوک اضافه کردن عکس ها به بلوک قبل اضافه کنید. بسته به نام و حجم عکستان باید کدی مثلکد زیر را داشته باشید:
                                                                                                                                              <div id=“slideshowContainer”>
                                                                                                                                                      <div class=“slideshow”>
                                                                                      <img src=“images/image1.png” alt=“” width=“600” height=“300” />
                                                                                      <img src=“images/image2.png” alt=“” width=“600” height=“300” />
                                                                                      <img src=“images/image3.png” alt=“” width=“600” height=“300” />
                                                                                      <img src=“images/image4.png” alt=“” width=“600” height=“300” />
                                                                                      <img src=“images/image5.png” alt=“” width=“600” height=“300” />
                                                                                                                                                                              </div>
سپس کد های کنترلی را اضافه کنید:
                                                                                                                                                                     <ul id=“nav”>
                                                                                                                     <li id=“prev”><a href=“#”>Previous</a></li>
                                                                                                                         <li id=“next”><a href=“#”>Next</a></li>
                                                                                                                                                                                </ul>
                                                                                                                                                                               </div>
در این قسمت باید جی کوئری را به قسمت هد اضافه کرده و آن را با کد های زیر فراخوانی میکنیم:
                                                                                                                                                 <! include jQuery library >
                                    <script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script>
                                                                                                                                                  <! include Cycle plugin >
                   <script type=“text/javascript” src=“http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js”></script>
شما می توانید با توجه با سلیقه خود ارتفاع، افکت مناسب را انتخاب کنید.
مرحله آخر مربوط به قالب بندی مربوط به css است که باید آنرا در قسمت head قرار دهید. که آن را می توانید با توجه به سلیقه خود انتخاب کنید.
                                                                                                                                           


پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *