ساخت اسلایدر با جی کوئری

با سلام. در این مطلب آموزش کامل ساخت اسلایدشو به کمک جی کوئری JQuery رو براتون گذاشتم. در این آموزش با مراحل ساخت یک اسلایدشو به کمک JQuery به خوبی آشنا خواهید شد. موتور اصلی این اسلاید شو پلاگین JQuery Cycle است که خواهید توانست به کمک آن یک اسلایدشو ساده با دکمه های کنترل بسازید. ادامه آموزش در ادامه مطلب موجود می باشد.

جهت مشاهده آموزش کامل ساخت اسلایدشو به کمک جی کوئری JQuery به ادامه مطلب مراجعه نمایید.

HTML :

در مرحل اول به یک سند HTML برای شروع کار نیاز داریم. بعد از ساختن صفحه ، به یک بلوک اصلی برای قرار دان اسلایدشو نیاز داریم . پس کد زیر رو به قسمت صفحه ساخته شده اضافه کنید.

<div id="slideshowContainer">

</div>

 

در مرحله بعد باید یک بلوک دیگه برای اضافه کردن عکس ها به اون بلوک که در مرحله قبل ساختیم اضافه کنیم . کدهای زیر را اضافه کنید :

<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>

 

پس تا اینجا باید کدهای شما مثل این باشه :

<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>
</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>

 

 

JQuery :

خوب ، توی این مرحله نوبت میرسه به اضافه کردن جی کوئری . بدون اضافه کردن این قسمت فقط یه صفحه دارید که ۵ تا عکس به صورت ساده قرار گرفته.
پس کدهای زیر رو به قسمت Head صفحه اضافه کنید :

<!-- include jQuery library -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="https://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

حالا برای اسلاید کردن تصاویر باید پلاگینی که نصب کردیم رو فراخوانی کنیم . کدهای زیر رو به قسمت Head پایین کدهای مرحله قبل اضافه کنید :

<script type="text/javascript">
    $(document).ready(function() {
        $('.slideshow').cycle({
        fx: 'fade',
        pause: 1,
        prev: '#prev',
        next: '#next'
        });
    });
</script>

توی این بخش می تونید هر طوری که خودتون دوست دارید تغییرات ایجاد کنید . مثل افکت ، ترتیب ،عرض ، ارتفاع و …
می تونید همه تنظیمات رو اینجا ببینید

CSS – قالب بندی اسلایدشو :

قسمت آخر این آموزش استایل دادن به المان های اسلایدشو هست . می تونید از استایل استفاده شده در این آموزش استفاده کنید . ولی کلا می تونید اینجا سلیقه به خرج بدید و هر طور خودتون دوست دارید ویرایش کنید . پس این کدها رو به قسمت Head اضافه کنید .

<style type="text/css">
* {
    margin:0px;
    padding:0px;
    border:0px;
}
body {
    background:url(images/background.jpg) repeat-x;
}

#slideshowContainer {
    width: 632px;
    margin: 100px auto 0 auto;
    position:relative;
}
.slideshow {
    height: 332px;
}
.slideshow img {
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #eee;
}
#nav {
    list-style-type:none;
    z-index:150;
}
#nav li a {
    display:block;
    width:58px;
    height:102px;
    text-indent:-9999px;
    outline:none;
}
#prev a {
    background:url(images/left.png);
    width:58px;
    height:102px;
    position:absolute;
    top:120px;
    left:-70px;
}
#next a {
    background:url(images/right.png);
    width:58px;
    height:102px;
    position:absolute;
    top:120px;
    right:-70px;
}
#next a:hover {
    background:url(images/right_over.png);
}
#prev a:hover {
    background:url(images/left_over.png);
}
</style>

 

عکس های اسلایدر رو هم میتونید از این لینک دانلود کنید.

برای تازه شدن دیر نیست.

موفق و پیروز باشید

4/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

بزرگترین وحرفه ای ترین پکیج آموزشی شبکه و مجازی سازی
  • انتشار: ۱۶ شهریور ۱۳۹۳

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

  1. سلام ، کدتون مشکل داره

  2. سلام خسته نباشید
    ظاهرا این کد مشکل داره

  3. فریده
    05 اردیبهشت 1397

    اصلا درست نیست

  4. سلام. خسته نباشید. شرمنده کار نمی کنه فقط یه عکس رو ثابت نشون میده

  5. همایون
    16 فروردین 1396

    سپاااااااااااااااس

  6. امید احمدی
    22 آذر 1395

    نمیشه که
    کل کارارو انجام دادم ولی نشد . عکسا پایین هم هستن چرا
    بچه ها یه برنامه هست به نام wow slider این برنامه هم کار را بندازه.

  7. سلام دوستان کدتون مشکل داره……

  8. اینو هم بگم با ۵ تا مرورگر امتحان کردم ویندوزم ۷.

  9. سلام و خسته نباشید مهندس
    ببخشید من تازه برنامه نویسی وب شروع کردم
    خواهش میکنم این سوالم پاسخ بدین
    بنده این آموزش شما تا قسمت فایل jquery-1.11.1.min.js تمام و کمال انجام دادم و هیچ مشکلی نبود؛ اما وقتی خواستم تست کارو ببینم دیدم اصلا عکس اول رو نشون داده نمیشه و متعاقب اون اصلا اسلاید صورت نمیگیره.همین مشکل با یه آموزش اسلاید دیگه هم داشتم (((نمیدونم ولی احتمالا فایل jquery تو سیستم من اجرا نمیشه ولی دلیلشو نمیدونم))) بدبختی اینه که برای این مشکلم هیچ جای نت جوابی پیدا نکردم.
    تمنا دارم کمک کنید.

بازخوردهای خود را برای ما ارسال کنید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.