فوج

ک بلوک دیگه برای اضافه کردن عکس ها به اون بلوک که در مرحله قبل ساختیم
امروز جمعه 12 خرداد 1402
تبليغات تبليغات

آموزش ساخت اسلایدشو به کمک JQuery


 


آموزش ساخت اسلایدشو به کمک JQuery

 

 

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

پیش نمایش :

نمونه

 

۱٫ عکس زمینه

۲٫ دکمه های کنترل

۳٫ چند عکس برای اسلاید کردن

HTML :

 

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

1 <div id="slideshowContainer">
2  
3 </div>

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

 

2     <img src="images/image1.png" alt="" width="600" height="300" />
3     <img src="images/image2.png" alt="" width="600" height="300" />
4     <img src="images/image3.png" alt="" width="600" height="300" />
5     <img src="images/image4.png" alt="" width="600" height="300" />
6     <img src="images/image5.png" alt="" width="600" height="300" />
7 </div>

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

 

 

2 <div class="slideshow">
3         <img src="images/image1.png" alt="" width="600" height="300" />
4         <img src="images/image2.png" alt="" width="600" height="300" />
5         <img src="images/image3.png" alt="" width="600" height="300" />
6         <img src="images/image4.png" alt="" width="600" height="300" />
7         <img src="images/image5.png" alt="" width="600" height="300" />
8 </div>
9 </div>

 

خوب ، تو این مرحله باید دکمه های کنترلی رو اضافه کنیم . مثل کدهای زیر :

 

 

02 <div class="slideshow">
03          <img src="images/image1.png" alt="" width="600" height="300" />
04          <img src="images/image2.png" alt="" width="600" height="300" />
05          <img src="images/image3.png" alt="" width="600" height="300" />
06          <img src="images/image4.png" alt="" width="600" height="300" />
07          <img src="images/image5.png" alt="" width="600" height="300" />
08 </div>
09 <ul id="nav">
10     <li id="prev"><a href="#">Previous</a></li>
11     <li id="next"><a href="#">Next</a></li>
12 </ul>
13 </div>

 

JQuery :

 

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

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

 

 

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

 

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

 

 

02     $(document).ready(function() {
03         $('.slideshow').cycle({
04         fx: 'fade',
05         pause: 1,
06         prev: '#prev',
07         next: '#next'
08         });
09     });
10 </script>

 

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

می تونید همه تنظیمات رو اینجا ببینید

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

 

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

 

 

02 * {
03     margin:0px;
04     padding:0px;
05     border:0px;
06 }
07 body {
08     background:url(images/background.jpg) repeat-x;
09 }
10  
11 #slideshowContainer {
12     width632px;
13     margin100px auto 0 auto;
14     position:relative;
15 }
16 .slideshow {
17     height332px;
18 }
19 .slideshow img {
20     padding15px;
21     border1px solid #ccc;
22     background-color#eee;
23 }
24 #nav {
25     list-style-type:none;
26     z-index:150;
27 }
28 #nav li a {
29     display:block;
30     width:58px;
31     height:102px;
32     text-indent:-9999px;
33     outline:none;
34 }
35 #prev a {
36     background:url(images/left.png);
37     width:58px;
38     height:102px;
39     position:absolute;
40     top:120px;
41     left:-70px;
42 }
43 #next a {
44     background:url(images/right.png);
45     width:58px;
46     height:102px;
47     position:absolute;
48     top:120px;
49     right:-70px;
50 }
51 #next a:hover {
52     background:url(images/right_over.png);
53 }
54 #prev a:hover {
55     background:url(images/left_over.png);
56 }
57 </style>

 

خب ، تموم شد ، اسلاید شو ما آماده است ، از این اسلاید شو می تونید جاهای مختلف استفاده کنید و لذت ببرید . موفق باشید

http://www.ittutorial.ir/


 


 

دسته بندي: ابزار وب,اموزش و کد وب,

ارسال نظر

نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]

مطالب تصادفي

مطالب پربازديد