سلام به همه سون لرنی‌های عزیز،در راستای اهداف آموزشی بخش کاربران ویژه و هم چنین پاسخگویی به محبت‌های کاربران این بخش از این به بعد سعی میشه مطلب بیشتری در بخش VIP منتشر بشه،برای این مطلب آموزش ساخت یک اسلاید شوی ساده به وسیله فریمورک قدرتمند جی کوئری رو در نظر گرفتیم و ممطئنا همه شما دوست دارید برای وب سایت خودتون یک اسلاید شوی اختصاصی داشته باشید،می تونید این اسلاید شو رو بسط بدید و کلی امکانات دیگه بهش اضافه کنید انشاالله با یاری خداوند و همراهی شما دوستان عزیز در بخش‌های بعدی این اسلایدر رو به یه افزونه جی کوئری تبدیل میکنیم تا بتونیم راحتتر ازش استفاده کنیم.پس با سون لرن همراه باشید.

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

خوب در ابتدای امر باید این توضیح رو بدم که ما چند تا تصویر داریم که میخوایم این تصاویر پشت سر هم با یه افکت مشخص (fade) و با یه فاصله زمانی مشخص نمایش داده بشن.

کدهای html اسلایدشو

اول از همه قسمت html خودمون رو به این صورت طراحی میکینم.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>SlideShow</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <div id="slideshow">
                <ul>
                    <li class="active"><a href="#"><img  src="img/slide1.jpg" alt="Slideshow Image 1"  /></a><p class="title" >عنوان مطلب اول</p></li>
                    <li><a href="#"> <img src="img/slide2.jpg" alt="Slideshow Image 2" /></a><p class="title" >عنوان مطلب دوم</p></li>
                    <li><a href="#"><img src="img/slide3.jpg" alt="Slideshow Image 2" /></a><p class="title" >عنوان مطلب سوم</p></li>
                    <li><a href="#"><img src="img/slide4.jpg" alt="Slideshow Image 2" /> </a><p class="title" >عنوان مطلب چهارم</p></li>
                </ul>
            </div>
        </div>
    </body>
</html>

اول یه تگ نگهدارنده و بعدشم یه تگ div با آیدی slideshow که محتوای اصلی در این تگ قرار میگیره و بعدشم یه لیست نامرتب و در ادامه هم تعداد دلخواهی تصویر در بین تگ‌های li و a قرار داده شده. در کنار هر a که لینک تصویر رو مشخص میکنه ما یه تگ p هم قرار دادیم این تگ p متن دلخواه در مورد اسلاید رو برای ما نمایش میده (عنوان مطلب).

کدهای CSS اسلایدشو

در ادامه آموزش ما قسمت css رو به این صورت نوشتیم.

* {margin: 0; padding: 0;}
body {background:#fbfbfb;}
ul{
    list-style: none;
}
#wrapper {
   width:860px;
   margin: 20px auto;
  direction:rtl;
   font:11px Tahoma;
}
#slideshow {
    position:relative;
    width:610px;
    height:260px;
    margin: auto;
    box-shadow: 0px 0px 20px rgb(180,180,180);
}
#slideshow li {
    position:absolute;
    top:5px;
    right:5px;
    z-index:8;
    opacity:0.0;
    overflow: hidden;
}
#slideshow li.active {
    z-index:10;
    opacity:1.0;
}
#slideshow li.last-active {
    z-index:9;
}
.title{
    position: absolute;
    bottom: 0;
    width:100%;
    background-color:#000000;
    opacity: 0.6;
    height: 25px;
    z-index: 100;
    color:#FFF;
    font-size: 10pt;
    font-weight:bold;
    padding: 8px 5px 0 0;
}

تا قسمت wrapper توضیحات خاصی نداره اما خوب بعد از اون رو باید توضیح بدیم؛برا قسمت slideshow ما خاصیت position رو به صورت relative تعریف کردیم که باعث میشه دستمون در جابه حای عناصر داخل تگ باز باشه خاصیت width و height رو مشخص کردیم  و بعدشم خاصیت margin رو بر روی auto قرار دادیم تا دقیقا در وسط عنصر والد خودش قرار بگیره و در نهایت هم کمی افکت سایه.

برای تگ‌های li زیر مجموعه slideshow ما اومدیم و خاصیت position رو بر روی absolute تنظیم کردیم و این باعث میشه چینش این عناصر از حالت عادی خارج بشه حالا اگه عنصر والد دارای position با مقدار relative باشه میتونیم نسبت به عنصیر والد و در هر مکانی خواستیم قرارشون بدیم حالا اگه نداشته باشه چی؟ خوب اونوقت نسبت به عنصر اصلی(body و html) چینش پیدا میکنه.خوب خاصیت z-index با مقداری مشخص باعث میشه در محور z کمی جلوتر باشن و همچنین خاصیت opacity رو روی صفر تنظیم کردیم که باعث میشه فعلا هیچ کدموشون نمایش داده نشن.با خاصیت overflow هم مشخص میکنیم که هیچی چیزی از این تگ li بیرون نره.

بعد از این می‌رسیم به کلاس active برای تگ li از اسمش پیداست یعنی عنصری که الان در حال نمایشه و خوب پس opacity رو برابر 1 قرار دادیم و z-index و هم کمی آوردیم بالاتر.خوب حالا کلاس last-active یعنی اونی که قبلا active بوده و اینجا z-index رو یکی کمتر از حالت active براش قرارمیدیم تا دقیقا مشخص بشه که پشت سر active قرار گرفته.برای تگ p که قرار مطلب رو نشون بده هم کلاس title رو در نظر گرفتیم که استایلش مشخصه.

خوب در صفحه بعد کدهای جاوااسکریپت رو تکمیل میکنیم.

کدهای javascript اسلایدشو

برای این کار یه تابع مینویسیم که وظیفه تغییر دادن تصاویر رو بر عهده داره .

function slideSwitch() {
    var active = $('#slideshow li.active');
    if (active.length == 0) active = $('#slideshow li:last-child');
    var next =  active.next().length ? active.next(): $('#slideshow li:first-child');
    active.addClass('last-active');
   $('.title').animate({bottom:'-30px'});
    next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            active.removeClass('active last-active');
        });
   $('.title').animate({bottom:'0'});     
}
$(function() {
    setInterval( "slideSwitch()", 5000 );
});

اول از همه متغییر active رو تعریف کردیم و گفتیم که تگ li که دارای کلاس active هست رو داخلش قرار بده حالا میگیم اگه این متغییر active مقداری داشت که هیچی اگه نداشت آخرین تگ li رو براش ست کن خوب حالا متغییر next رو برای دریافت عنصر بعدی تعریف میکنیم و میگیم که اگه متغییر active دارای next بود (یعنی عنصری بعدش وجود داشت) براش ست کن  و اگر نبود این یعنی آخرین عنصره و باید اولین عنصر رو براش ست کنیم.

حالا چون قراره next رو نمایش بدیم پس برای عنصر فعلی کلاس last-active رو ست میکنیم و بعدشم اون تگ p رو با حالت انیمیشن میبریم پایین (با دادن مقدار منفی برای خاصیت bottom) حالا میام خاصیت‌های next رو برای حالت گذر (transition) ست میکنیم اولش مطمئن میشیم که opacity اون صفر باشه پس اینو براش ست میکنیم و بعدشم و بعدشم کلاس active رو بهش میدم تا به عنوان آیتم جاری شناخته بشه و بعدشم با یه انیمیشن opacity رو دوباره به مقدار نهایی می‌رسونیم.

در نهایت از عنصر جاری کلاس کلاس‌های active و last-active رو برمیداریم (کلاس active رو با عنصر active اشتباه نگیرین) و بعدشم دوباره اون عنصر p رو به حالت اولیه برمیگردونیم تا عنوان رو نشون بده در نهایت برای اجرای این تابع در قسمت اصلی یه تایمر تعریف میکنیم تا این تابع رو هر چند ثانیه دلخواه اجرا کنه.شاید بعضی قسمت‌ها برتوان گیج کننده باشه اما باید بدونید همه این تابع فقط در همون لحظه Transition انجام میشه،فکر کنم اینطوری بهتر بتونید بررسیش کنید.

[dl]دانلود فایل‌های نهایی اسلایدشو[/dl]

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۳۶ دیدگاه
مرتضی ۱۰ تیر ۱۳۹۸، ۱۲:۳۸
سلام خسته نباشید .آیا میشه با jQuery ریموت به اسلاید داد .یعنی خود کاربر تایین کنه به کدوم عکس بره؟
محمد بانشی ۲۴ اسفند ۱۳۹۷، ۰۹:۴۵
سلام.
دمو باز نمیشه.
farzaneh ۲۰ تیر ۱۳۹۷، ۱۲:۰۷
صفحه دومش برای من نیومد!
حسین میراحمدی ۱۴ مرداد ۱۳۹۵، ۱۲:۱۱
سلام لینک دانلود 400 Bad Request میده لطفا اصلاح کنید .
لقمان آوند ۱۶ مرداد ۱۳۹۵، ۰۲:۴۶
اصلاح شد
as do ۲۶ تیر ۱۳۹۵، ۲۳:۳۳
با سلام و تشکر لینک های دانلود کار نمی کنه امکانش باشه اصلاحش کنید.
لقمان آوند ۲۷ تیر ۱۳۹۵، ۰۴:۲۰
اصلاح شد
Mahdi ۰۹ دی ۱۳۹۳، ۰۱:۱۷
ای کاش برای دکمه جلو و عقب هم براش میگذاشتی...
gtanori ۰۹ شهریور ۱۳۹۳، ۰۰:۱۸
برای اعضا عادی هم این آموزش را بزارید خدا را خوش میاد
nasrin rafati ۰۸ تیر ۱۳۹۳، ۱۶:۳۱
[cc] function slideShow(){
var active = $('#slideshow li.active');
if(active.lenght == 0) active = $('#slideshow li:last-child');
var next = active.next().lenght ? active.next():$('#slideshow li:first-child');
active.addClass('last-active');
$('.title').animate({bottom:'-30px'});
next.css({opacity : 0.0})
.addClass('active')
.animate({opacity:1.0},1000,function(){
active.removeClass('active last-active');
});
$('.title').animate({bottom:'0'});
}
$(function(){
setInterval("slideShow()",5000);
});[/cc]
من دقیقا همین کدهای شما رو نوشتم اما فقط عکس اول رو نشون میده یعنی hide میشه دوباره همونو نشون میده اینم بگم وقتی کدهای شما رو کپی میکنم مشکلی نداره ولی وقتی خودم همین کد رو مینویسم مشکل داره چرا؟
کیوان علی محمدی ۰۸ تیر ۱۳۹۳، ۱۶:۳۵
وقتی کدهای ما رو کپی می کنید درسته پس حتما کدهای خودتون یه مشکلی داره،خط به خط چک کنید.
mehrdad ۱۷ فروردین ۱۳۹۳، ۱۹:۰۹
سلام . میخواستم بدونم چطور میتونم برای این اسلایدشو دکمه های تصویر بعد و قبل و همچنین وقتی ماوس روی اسلایدشو قرار گرفت stop بشه و وقتی ماوس از روش کنار رفت مجدد play بشه .

با تشکر
کیوان علی محمدی ۱۷ فروردین ۱۳۹۳، ۲۱:۳۲
چند تا روش برای پیاده سازی این چیزی که شما گفتین وجود داره که باید کدهای تغییر دهنده تصاویر رو به صورت تابع نوشتن که چند تا پارامتر داره مثل دکمه و direction و طبق این پارامتر ها تصویر تغییر کنه.
majid zare ۱۲ اسفند ۱۳۹۲، ۱۲:۳۴
ممنون از سایت خوب شما
من یک قالب وردپرس با آموزشهای شما ایجاد کردم که الان روی دامنه modposh.ir نصب شده
2 روز هست که همه افزونه های اسلاید شو را امتحان کردم مثل Cyclone Slider 2 ولی تو همه اونها تصاویر ثابت بود و علت را نفهمیدم
تا اینکه امروز عضو سایت شما شدم و در حال استفاده از آموزش اسلاید شو شما هستم مطمئن هستم مثل بقیه آموزش های شما مفید و کاربردی و قابل استفاده هست
فقط اگر امکان داشت و اینجا جای مناسبی بود بفرمایید چرا قالب من از افزونه هایی مثل Cyclone Slider 2 پشتیبانی نمیکنه و تصاویر را ثابت و در جا نشون میده
با تشکر
لقمان آوند ۱۲ اسفند ۱۳۹۲، ۱۲:۵۱
لطفا تو انجمن تاپیکی رو در مورد مشکلتون باز کنید و مطرح کنید. اعضای vip در اونجا سریعا پاسخ می گیرند .
مریم ۰۷ اسفند ۱۳۹۲، ۱۲:۰۵
بسیار عالی و مفید بود سپاس از شما
hasan2i2 ۱۶ بهمن ۱۳۹۲، ۲۰:۰۶
عالی بود
abbas ۰۱ بهمن ۱۳۹۲، ۱۵:۵۸
ممنون ولی من پول ندارم و ...
پروانه ۲۲ دی ۱۳۹۲، ۲۰:۲۴
با تشکر
ازشما
حسین بلالی بیدگلی ۲۰ دی ۱۳۹۲، ۲۰:۵۴
شکلک هاتون رو هم عوض کنید
حسین بلالی بیدگلی ۲۰ دی ۱۳۹۲، ۲۰:۵۶
راستی یادم رفت بگم آموزش فتوشاپ VIP‌هم بذارید .
اگه بذارید میخرم .........
محمد امین حیدری ۱۹ دی ۱۳۹۲، ۱۷:۴۳
سلام داداش رایگان بزار دیگه پول نداریم :sad:
کیوان علی محمدی ۱۹ دی ۱۳۹۲، ۲۳:۰۶
سلام محمد امین عزیز،الان ما متعهد به ارائه مطالب با سطح آموزشی بالاتر به کاربران VIP هستیم.شما هم نگران بخش عادی با قوت به کارش داره ادامه میده.
حسین محمدی ۱۹ دی ۱۳۹۲، ۱۱:۳۹
نمیدونم اشکال از کامپیوتر منه یا ...؟
ولی هرچی رو لینک دانلود میزنم تا فایلها رو دانلود کنم مینویسه :404 Not Found
لقمان آوند ۱۹ دی ۱۳۹۲، ۱۲:۴۴
لینک مشکل داشت . عذرخواهی می کنیم .
تصحیح شد . می تونید دانلود کنید .
حسین محمدی ۱۹ دی ۱۳۹۲، ۱۱:۱۳
چه آموزش کاربردی ای گذاشتید...من از همون اولش هم توی بخش صف انتشار این مطلب رو دیدم حدس میزدم شما نویسنده اش باشید....
کیوان علی محمدی ۱۹ دی ۱۳۹۲، ۲۲:۳۵
لطف داری برادر.
رضا ساطع بیدگلی ۱۸ دی ۱۳۹۲، ۱۸:۰۴
عالی
عالی
عالی
دیگه بهتر از این نمیشه
کیوان علی محمدی ۱۸ دی ۱۳۹۲، ۱۹:۰۰
چرا بهتر از این نمیشه؟؟؟ خیلی خیلی از این بهتر هم میشه، باید منتظر موند چون بهترین آموزش ها در راهه.
علی امینی ۱۸ دی ۱۳۹۲، ۱۷:۵۶
سلام داداش
میدونم این مطلب هم مثل بقیه عالیه :wink:
راستی این کروم که آپدیت شده ، همه ی تگ های هدر رو با یکم سایه نشون میده!دقت کردی؟
البته این دفعه واقعا تغییرات چشمگیری داشته هم تو قسمت بازرسی عنصر هم تو لیست ها.
کیوان علی محمدی ۱۸ دی ۱۳۹۲، ۱۹:۰۱
سلام علی جان ممنون.کروم راستش دقت نکردم؟نسخه چندش؟
مهشاد کلانتری ۱۸ دی ۱۳۹۲، ۱۶:۱۱
بسیار عالی
تشکر