آموزش ساخت اسلایدشو در W3.JS
شروع اسلاید شو
w3.slideshow(selector, interval (milliseconds))
مثال
<img class="nature" src="/img_fjords.jpg">
<img class="nature" src="/img_mountains.jpg">
<img class="nature" src="/img_nature.jpg">
<script>
w3.slideshow(".nature");
</script>
خودتان امتحان کنيد »<img class="nature" src="/img_mountains.jpg">
<img class="nature" src="/img_nature.jpg">
<script>
w3.slideshow(".nature");
</script>
بدون شروع خودکار
برا ی جلوگیری ازشروع خودکار تصاویر در اسلاید شو، پارامتر interval را 0 تنظیم کنید:
اسلاید بعدی
با افزودن دکمه برای مرور کردن اسلاید شو:
زمانی که شما یک اسلاید شو را شروع می کنید،تابع w3.slideshow یک object برای نمایش اسلایدشو باز می گرداند.
var myShow = w3.slideshow("img", 0);
شی اسلاید شو دارای خاصیت ها و روش هایی مانند () next و() previous است.
مثال
<button onclick="myShow.previous()">Previous</button>
<button onclick="myShow.next()">Next</button>
خودتان امتحان کنيد »<button onclick="myShow.next()">Next</button>
اسلاید شو های بیشتر
هر عنصر HTML را در اسلاید شو میتوان گنجاند.
انتخاب عناصر با استفاده از انتخاب گر های css :
مثال
سر صفحه ها:
<h1 class="city">London</h1>
<h1 class="city">Paris</h1>
<h1 class="city">Tokyo</h1>
<script>
w3.slideshow(".city");
</script>
خودتان امتحان کنيد »<h1 class="city">Paris</h1>
<h1 class="city">Tokyo</h1>
<script>
w3.slideshow(".city");
</script>
- نوشته شده توسط زهرا داوودی
- بازدید: 5229
