دستورات لازم برای ساخت slider

این تاپیک 4 پاسخ و 3 مشارکت کننده دارد . آخرین آپدیت توسط :  Shirin ،‏ 9 ماه و 2 هفته پیش .

این تاپیک تاکنون 251 بازدید داشته است .

نویسنده پست
دوشنبه ، 29 فوریه 2016     2:39 ب.ظ #


Shirin

Subscriber
5 پست7 تاپیک

من می خوام slider بسازم با این کدها اما دستورات لازم برای jQuery نمی دونم می شه راهنماییم کنید.

عکس هام ;display: none دارند.

باید در jQuery از تابعی استفاده کنم که عکس نمایش بده و با i++ بره عکس بعد ول دستوراتش بلد نیستم.
<body>
<form id="form1" runat="server">
<div class="wrapper">
<div class="slider">
<ul>
<li class="active"><a rel="nofollow" href="#">
<img src="Images/bazar-mobile-laptop.jpeg" /></a><p>sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!</p>
</li>
<li><a rel="nofollow" href="#">
<img src="Images/ghofl-com.jpg" /></a><p>sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!</p>
</li>
<li><a rel="nofollow" href="#">
<img src="Images/internet-fraud.jpg" /></a><p>sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!sample text is here!</p>
</li>
</ul>
</div>

1  تشکر
:: این تاپیک، پاسخ تائیدشده دارد : مشاهده پاسخ تائید شده توسط سوال کننده
سه شنبه ، 1 مارس 2016     12:21 ق.ظ #


Sajjad Sohrabi

Subscriber
118 پست8 تاپیک

سلام دوسته من
اگه بخواید کمکتون میکنم  اسلایدر رو خودتون طراحی کنید ولی به نظرم نیازی ندارید خودتون طراحی کنید تو سطح اینترنت خیلی پلاگین جی کوئری وجود داره که میتونید از اونا استفاده کنید هم حرفه ای هم ساده باز میل خودتونه اگه پلاگین میخواید بگید معرفی کنم و اگه میخواید خودتون طراحی کنید باز میتونم راهنمایی کنم

2  تشکر
سه شنبه ، 1 مارس 2016     1:01 ق.ظ # پاسخ تائید شده توسط سوال کننده


Ali Hosseini

Subscriber
13 پست0 تاپیک

باید به تگ های li پوزیشن absolute بدی و display:none بزاری کد زیر:
[/cod]

1  تشکر
سه شنبه ، 1 مارس 2016     9:21 ق.ظ #


Shirin

Subscriber
5 پست7 تاپیک

Ali Hosseini: با این روش شما فقط عکس اول نشان میده و به عکس بعدی نمیره

0  تشکر
سه شنبه ، 1 مارس 2016     10:31 ق.ظ #


Shirin

Subscriber
5 پست7 تاپیک

با این کد کار کرد مرسی
<script>
$(document).ready(function () {
var number = -1;
var li = $(".slider ul li");
var interval = setInterval(function () {
$(li).fadeOut(500);
number++;
if (number >= li.size()) {
number = 0;
}
$(li).eq(number).fadeIn(500);
}, 4000);
});
</script>

1  تشکر
پست 1 تا 5 (از مجموع 5 پست)

این تاپیک پاسخ تائید شده دارد و بسته شده است .