سعید شعبانی

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

15 پست در این موضوع قرار دارد

دوستان سلام

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

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

به اشتراک گذاری این پست


لینک به پست

برای حل مشکل پرش میتویند بجای # از 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 استفاده کنم اگر ممکن هست در این مورد هم راهنماییم کنید. متشکرم

به اشتراک گذاری این پست


لینک به پست

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

به اشتراک گذاری این پست


لینک به پست

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

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

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط msb
      سلام
      افزونه ای لازم دارم که چند مطلب کوتاه رو به صورت اسلایدی نمایش بده
      البته هر اسلاید سه مطلب حداقل داشته باشه
      مثل تصویر ی که پیوست کردم
      ممنون میشم اگه افزونه خاصی میشناسید معرفی کنید
       

    • توسط mehr-cs
      سلام
      منمیخوام یه قسمت تحت عنوان تاریخچه داشته باشم به این صورت که، تو یک باکس کوچیک تمامی حروف الفبا رو داشته باشم و لوگوی کل تاریخچه ی برند هام تو صفحه باشه و کاربر بعد از کلیک کردن روی هر کدوم از حروف الفبا، کلیه تاریخچه هایی که با اون حرف شروع میشه رو ببینه !
      دوستان راهنمایی میکنن ؟
    • توسط marpeech
      سلام دوستان
       
      من دنبال یه افزونه اسلایدر می گردم که بتونه اسلاید تمام صفحه و ریسپانسیو درست کنه. اما با یه شرط! و اون این باشه که توی تمام مرورگرها و دستگاه ها هم تمام صفحه باشه. الان من اسلایدر تمام صفحه دارم اما وقتی از توی اپرا نگاه میکنم تمام صفحه ست، توی موزیلا یه کمی از ارتفاعش کم میشه، توی کروم هم همینطور (در همه این موارد از عرض، تمام صفحه ست اما از ارتفاع کم و زیاد میشه). عرض اسلایدر رو هم 100% تعیین میکنم اما برای ارتفاعش راه حلی ندارم. ممنون میشم که راهنمایی کنید
    • توسط IFTHEN
      یه اسلایدر دارم، می خوام یک تگ مثل X رو تعریف کنم و هر پستی که این تگ (برچسب) رو داشت عکس شاخصش داخل اسلایدر صفحه اصلی نمایش داده بشه.
      ممنون می شم راهنمایی بفرمایید به چه صورت می تونم این کار رو انجام بدم.
    • توسط رهنمافرد
      سلام
      امیدوارم حالتون خوب باشه.
      دنبال افزونه ای هستم که آخرین مطالب (یا دسته ای خاص) رو به صورت اسلایدر متنی نمایش بده. به این صورت که برای چند ثانیه عنوان مطلب نمایش داده بشه و بعد عنوان مطلب بعدی نمایش داده بشه و الی آخر ...
      هرچقدر گشتم مدلی که ارائه شده بود شبیه کارکرد تگ marquee بود ولی من می خواهم عناوین چند ثانیه ای مکث داشته باشند و بعد عوض بشن نه این که به صورت scroll حرکت کنند.
      امیدوارم تونسته باشم منظورم رو برسونم ...
      ممنون می شم اگر همچین پلاگینی سراغ دارید معرفی کنید.
      خیلی خیلی متشکر