سلام خیلی از دوستان دنبال اسلاید شویی میگردن که کامل باشه و بتواند
نیازشان را رفع کند در ادامه مطلب اسلایدشوی براتون معرفی میشه که میتوانید نوع
تعویض اسلاید رو خودتون انتخاب کنید. با ما همراه شوید .
جی کوئری یکی از جدیدترین تکنولوژی میباشد که قطعا برای مبتدیان و کسانی که تاحال با ان کار نکردن خیلی جالب وشگفت انگیز خواهد آمد.
امروز این اسلاید شو را توسط جی کوئری ساده برای شما ترسیم خواهیم کرد.
در اولین قدم لطفا فایل های این اسلاید شو را به قالبتان انتقال دهید. (فایل ها : اسلاید ها و css )
ادرس ها را وارد html کنید دقت کنید که آدرس ها را دقیق وارد کنید.
<script type="text/javascript" src="js/jquery-1.3.js"></script> <script type="text/javascript"src="js/jquery.cycle.all.js"></script>آدرس های بالا را در قسمت head قالب قرار دهید.
سپس فایل استایل (css) اسلاید شو را در قسمت head وارد کنید.
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
حال نوبت به فراخوانی میرسد باید فایل jquery.cycle.all.js فراخوانی شود .
<script type="text/javascript"> $(document).ready(function(){ $('#myslides').cycle({ fx: 'fade', speed: 5000, timeout: 2000 }); }); </script>
خوب ۵۰ درصد کار تموم شد بعد از فراخوانی کافیست از استایل کمک بگیرید و در قسمت body مانند کد زیر عمل کنید.
<body> <div id="myslides"> <img src="images/capitol.jpg" /> <img src="images/flowers.jpg" /> <img src="images/countryscene.jpg" /> </div> </body>
شما میتوانید هر تعداد اسلاید اضافه کنید بدون آنکه کار خاصی انجام دهید در قسمت body تنها id=myslide مهم است و حتما باید باشد.
اگر در تکه کد بالا(قسمت فراخوانی) دقت کنید میبینید اسلاید ها از حالت fade برای عوض شدن استفاده میکنن شما میتوانید هر یکی از مقادیر پایین را جایگزین کرده و حالت های جدیدی از اسلاید را تجربه نمایید.
- blindX
- blindY
- blindZ
- cover
- curtainX
- curtainY
- fade
- fadeZoom
- growX
- growY
- none
- scrollUp
- scrollDown
- scrollLeft
- scrollRight
- scrollHorz
- scrollVert
- shuffle
- slideX
- slideY
- toss
- turnUp
- turnDown
- turnLeft
- turnRight
- uncover
- wipe
- zoom
خوب شما میتوانید حتی زمان خروج و سرعت اسلاید رو هم تنظیم کنید باز به قسمت فراخوانی دقت کنید
speed: 5000, timeout: 2000
با تغییر مقادیر بالا که بر واحد میلی ثانیه است میتوانید زمان دلخواه و سرعت دلخواه را تنظیم کنید.
میتوانید نمونه نهایی کار را مشاهده کنید.
دانلود فایل های مرتبط
فید (خوراک):
یک قالب داده است که به
کاربران اجازه میدهد محتویاتی که مرتباً بهروز
میشوند را بهراحتی پیگیری نمایند.
thanks
با سلام وخسته نباشید
من اگر بخواهم این اسلاید شو را در سایتم که مدیریتش با دیتا لایف
میباشد استفاده کنم چکار باید بکنم لطفا اموزش قدم به قدم بگذارید
دوست عزیز اگر اسلاید شو استاتیک باشد فرقی نمیکند با جایگزنی کد ها تو هر جایی میتونید اسلاید شو را داشته باشین
با تشکر از زحماتتون ولی من هر کاری کردم موفق نشدم نمی دونم چرا. کد های script + java رو تو head گذاشتم و myslide رو تو body ولی ۲ تا هدر روی هم میان و حرکتی هم ندارن میشه کمک کنید