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

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

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

در مرحله اول یک سند 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 قرار دهید. که آن را می توانید با توجه به سلیقه خود انتخاب کنید.
 


درباره آموزشگاه نوین آی تی

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

پاسخی بگذارید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net