گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1396/04/21 - 16:26
كد :7700
در این مقاله به آموزش ایجاد اسلاید شود با جاوا اسکریپت و کتابخانه w3.js خواهیم پرداخت
ایجاد اسلاید شو با جاوا
در این آموزش نحوه ایجاد یک اسلاید شو توسط کتابخانه w3.js می پردازیم
مثال:
<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>
مشادهده نتیجه
حرکت اسلاید بدون تکرار
برای اینکه اسلایدر فقط مرتبه اول اجرا شود پارامتر interval را برابر صفر قرار دهید:
مثال:
w3.slideshow(".nature", 0);
مشاهده نتیجه
متد w3.slideshow() عملگرهای اسلایدر را میتواند در اختیار شما قرار دهد:
var myShow = w3.slideshow(".nature", 0);
حرکت اسلایدر با کمک دکمه
برای حرکت اسلایدر با کمک دکمه های Next و previous از دو متد next() و previous() استفاده می کنیم.
مثال:
<button onclick="myShow.previous()">Previous</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>
مشاهده نتیجه
شرکت طراحی سایت سارگون مجری تخصصی طراحی سایت با ما تماس بگیرید.