رفتن به مطلب

در خواست کمک برای پویا سازی یک اسلایدر html


پست های پیشنهاد شده

دوستان سلام

من می خواهم یک اسلایدر درست کنم تا حالا هم نصف مسیر را رفتم و این را درست کردم. ولی مشکلش این هست که هیچ کد جی کوئری در این اسلایدر استفاده نکردم و بهمین خاطر وفتی که روی هر کدوم از دایره ها (که اسلاید ها را عوض می کنند) کلیک می کنم صفحه می پره به اول اون بخش و مشکل بعدیش هم این هست که خودش به صورت خودکار اسلاید ها رو عوض نمی کنم. من می خواستم بهم کمک کنید تا این اسلایدر را پویا کنم تا خودش اسلاید ها رو طبق یک زمان مشخص شده ای عوض کنه و اینکه وقتی اسلاید را عوض می کنم صفحه به بالا یا پایین نپره.

اینجه هم می تونید اسلایدری که ساختم را ببنینید

لینک به ارسال

برای حل مشکل پرش میتویند بجای # از javascript(void(0)) استفاده کنید

لینک به ارسال

برای حل مشکل پرش میتویند بجای # از javascript(void(0)) استفاده کنید

من برنامه نویسی جاوا اسکریپت بلد نیستم.

لینک به ارسال

برنامه نویسی نمی خواد


<a href="#">link</a>

را تبدیل کنید به


<a href="javascript:void(0)">link</a>

لینک به ارسال

برنامه نویسی نمی خواد


<a href="#">link</a>

را تبدیل کنید به


<a href="javascript:void(0)">link</a>

در حال حاظر دکمه های اسلاید ها به شکل زیر هستند


<div class="navii">
<a title="" href="#slid1"></a>
<a title="" href="#slid2"></a>
<a title="" href="#slid3"></a>
<a title="" href="#slid4"></a>
<a title="" href="#slid5"></a>
</div>

من اون ها را به شکل زیر تغییر دادم ولی دیگه اسلاید ها تغییر نمی کنند


<div class="navii">
<a href="javascript:void(slid1)" title=""></a>
<a href="javascript:void(slid2)" title=""></a>
<a href="javascript:void(slid3)" title=""></a>
<a href="javascript:void(slid4)" title=""></a>
<a href="javascript:void(slid5)" title=""></a>
</div>

حتی به شکل زیر هم تغییر دادم ولی باز جواب نداد


<div class="navii">
<a href="javascript:void(0)" id="slid1" title=""></a>
<a href="javascript:void(0)" id="slid2" title=""></a>
<a href="javascript:void(0)" id="slid3" title=""></a>
<a href="javascript:void(0)" id="slid4" title=""></a>
<a href="javascript:void(0)" id="slid5" title=""></a>
</div>

ویرایش شده توسط سعید شعبانی
لینک به ارسال

همون شکل آخر درست هست

البته این فقط برای جلوگیری از پرش هست

مشکل شما همین هست یا چیز دیگه؟

لینک به ارسال

همون شکل آخر درست هست

البته این فقط برای جلوگیری از پرش هست

این که کار نمیکنه اینجا را ببینید.

مشکل شما همین هست یا چیز دیگه؟

بعد از اینکه پرش را درست کردم می خواهم به صورت خودکار بعد از چند ثانیه اسلاید ها عوض بشند.

لینک به ارسال

احتمالا اسلایدر شما با استفاده از خاصیت target در css3 درست شده که با تغییر پیوندها کار نمی کنه این نوع اسلایدر هم در اتومات شدن و هم باقی مسائل مشکل ساز خواهد بود اسلایدری تحت چاوا اسکریپت یا jquery نصب کنید که مشکل نخورید یا همین اسلایدر را به jquery تبدیل کنید

لینک به ارسال

احتمالا اسلایدر شما با استفاده از خاصیت target در css3 درست شده که با تغییر پیوندها کار نمی کنه این نوع اسلایدر هم در اتومات شدن و هم باقی مسائل مشکل ساز خواهد بود اسلایدری تحت چاوا اسکریپت یا jquery نصب کنید که مشکل نخورید یا همین اسلایدر را به jquery تبدیل کنید

چجوری می تونم به jquery تبدیلش کنم؟

لینک به ارسال

یک راهش


<a href="javascript:void(0)" deta="slide1" class="slidebuttons" title="">کلید </a>
<a href="javascript:void(0)" deta="slide2" class="slidebuttons" title="">کلید </a>
<a href="javascript:void(0)" deta="slide3" class="slidebuttons" title="">کلید </a>
<a href="javascript:void(0)" deta="slide4" class="slidebuttons" title="">کلید </a>
<a href="javascript:void(0)" deta="slide5" class="slidebuttons" title="">کلید </a>
<div id="slide1" class="slides"> اسلاید </div>
<div id="slide2" class="slides"> اسلاید </div>
<div id="slide3" class="slides"> اسلاید </div>
<div id="slide4" class="slides"> اسلاید </div>
<div id="slide5" class="slides"> اسلاید </div>
<script type="text/javascript">
<!--
$(".slidebuttons").click(function() {
var myID = "#"+$(this).attr("deta");
if($(myID).is(":hidden")) {
$(".slides").slideUp("500");
$(myID).slideDown("500");
}
});
//-->
</script>

لینک به ارسال

یک راهش


<a href="javascript:void(0)" deta="slide1" class="slidebuttons" title="">کلید </a>
<a href="javascript:void(0)" deta="slide2" class="slidebuttons" title="">کلید </a>
<a href="javascript:void(0)" deta="slide3" class="slidebuttons" title="">کلید </a>
<a href="javascript:void(0)" deta="slide4" class="slidebuttons" title="">کلید </a>
<a href="javascript:void(0)" deta="slide5" class="slidebuttons" title="">کلید </a>
<div id="slide1" class="slides"> اسلاید </div>
<div id="slide2" class="slides"> اسلاید </div>
<div id="slide3" class="slides"> اسلاید </div>
<div id="slide4" class="slides"> اسلاید </div>
<div id="slide5" class="slides"> اسلاید </div>
<script type="text/javascript">
<!--
$(".slidebuttons").click(function() {
var myID = "#"+$(this).attr("deta");
if($(myID).is(":hidden")) {
$(".slides").slideUp("500");
$(myID).slideDown("500");
}
});
//-->
</script>

جناب فخار خیلی خوب بود الان اسلایدر به درستی کار می کنه فقط دو تا مورد دیگه می مونه اگر کمکم کنید ممنون می شم.

1- در حال حاظر افکتی که برای تغییر اسلاید ها در نظر گرفته شده از پایین به بالا هست ولی من می خواهم از افکت fade مثل اسلایدر اول صفحه مایکروسافت استفاده کنم.

2- چجوری میشه کاری کرد که اسلاید ها در یک زمان مشخصی تغییر کنند؟

لینک به ارسال

خسته تر از اونم که کدهاتون رو دستکاری کنم البته برای فید شدن این تغییر کافیه


$(".slides").fadeOut("500");
$(myID).fadeIn("500");

را جای


$(".slides").slideUp("500");
$(myID).slideDown("500");

گذاشته بشه

برای اتوماتیک کردن باید از setTimeiout استفاده بشه

این نمونه آماده همراه با فایل راهنما است و به صورت خودکار سه مطلب آخر سایت را در اسلایدشو می خونه فایل های آنرا مطالعه کنید و طبق آن کدهای خود را ویرایش کنید و یا از خود فایل استفاده کنید

slide1.zip

لینک به ارسال

خسته تر از اونم که کدهاتون رو دستکاری کنم البته برای فید شدن این تغییر کافیه


$(".slides").fadeOut("500");
$(myID).fadeIn("500");

را جای


$(".slides").slideUp("500");
$(myID).slideDown("500");

گذاشته بشه

برای اتوماتیک کردن باید از setTimeiout استفاده بشه

این نمونه آماده همراه با فایل راهنما است و به صورت خودکار سه مطلب آخر سایت را در اسلایدشو می خونه فایل های آنرا مطالعه کنید و طبق آن کدهای خود را ویرایش کنید و یا از خود فایل استفاده کنید

slide1.zip

جناب فخار کارتون خیلی عالی بود و با کمی ویرایش به اون اسلایدری که می خواستم رسیدم فقط یک چیزی مونده و اون هم اینکه من می خواهم از افکت fade استفاده کنم اگر ممکن هست در این مورد هم راهنماییم کنید. متشکرم

لینک به ارسال

این اسلایدر رتمام ترکیبش بر اساس اسکرول به چپ هست و در واقع باید همه چیش برای فید شدن تغییر کنه ولی کدی که شما داشتید رو که عرض کردم چی کار کنید

لینک به ارسال

این اسلایدر رتمام ترکیبش بر اساس اسکرول به چپ هست و در واقع باید همه چیش برای فید شدن تغییر کنه ولی کدی که شما داشتید رو که عرض کردم چی کار کنید

من از اون اسلایدر آماده ای که دادید استفاده کردم. خوب اگر که زیاد کار می بره فعلا بیخیالش می شم تا ببینم بعدا چی میشه

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...