سعید شعبانی

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

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

دوستان سلام

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

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

0

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


لینک به پست

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

3

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


لینک به پست

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

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

0

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


لینک به پست

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


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

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


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

5

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


لینک به پست

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


<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>

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

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


لینک به پست

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

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

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

3

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


لینک به پست

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

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

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

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

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

0

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


لینک به پست

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

0

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


لینک به پست

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

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

0

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


لینک به پست

یک راهش


<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>

2

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


لینک به پست

یک راهش


<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- چجوری میشه کاری کرد که اسلاید ها در یک زمان مشخصی تغییر کنند؟

0

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


لینک به پست

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


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

را جای


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

گذاشته بشه

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

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

slide1.zip

4

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


لینک به پست

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


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

را جای


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

گذاشته بشه

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

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

slide1.zip

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

1

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


لینک به پست

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

2

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


لینک به پست

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

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

0

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط Mohamad™
      سلام وقتتون بخیر
      این چه افزونه اسلایدری هستش که
       
      بغیر از اسلایدر سمت راست - سمت چپ هم دارای سایدباری هستش

    • توسط shahram.arian
      سلام 
      In root directory of the site create the file yandex_132d009f655f1611.html with the following content:   <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body>Verification: 132d009f655f1611</body> </html> این کد html رو کجای ورد پرس قرار بدم داخل سایت ممنون می‌شم کمک کنید؟
    • توسط Siaavash
      برای یک سایت داخل مطلب های ارسالی متن به صورت فارسی و انگلیسی همزمان وجود داره و برای این قسمت یک باکس در نظر گرفته شده که در سمت چپ متن یا کلمه انگلیسی و در سمت راست متن یا کلمه فارسی قرار بگیره. (تصویر پیوست).
      برای اینکار به صورت زیر عمل شده:
      <div class="sample"> <span class="en">English</span> <span class="fa">فارسی</span> <div> که  CSS این قسمت هم به شکل زیر هست:
      .sample { width: 93%; font-size: 1em; margin: 10px auto; padding: 5px 10px; border: none; border-radius: 2px; clear: both; } span.de{ float: left } .de { direction: ltr; } .fa { direction: rtl; } وقتی کاربر بخواد پست بنویسه درگیر نوشتن کد های html می شه.
       
      حالا سوال اینه که آیا راهی وجود داره برای کاربری که به کدهای HTML آشنایی نداره این پروسه رو به صورتی تعریف کرد که درگیر کد های HTML نشه؟
      اولین راه حلی که به ذهنم رسید تعریف این کد ها داخل ادیتور وردپرس هست، که کاربر معمولی (نا آشنا با HTML) با استفاده از اون و زدن دکمه (برای مثال) Sample-Box، باکس (کد div به همراه کلاس مربوطه) رو داخل متن قرار بده و بعد از نوشتن متن انگلیسی و فارسی داخل باکس با استفاده از دکمه های En و Fa کد span به همراه کلاس های مربوطه رو به هر کدوم اختصاص بده (شبیه به کاری که در حال حاضر برای Bold و ... در نوشته و یا انتخاب H از طریق Drop-Box تیترها انجام می شه)
      آیا راه حل دیگه ای غیر از این وجود داره؟
      در صورتی که بهترین راه حل همین راه حل بالاست، به چه طریق می شه این کار رو عملی کرد؟
       

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

    • توسط mehr-cs
      سلام
      منمیخوام یه قسمت تحت عنوان تاریخچه داشته باشم به این صورت که، تو یک باکس کوچیک تمامی حروف الفبا رو داشته باشم و لوگوی کل تاریخچه ی برند هام تو صفحه باشه و کاربر بعد از کلیک کردن روی هر کدوم از حروف الفبا، کلیه تاریخچه هایی که با اون حرف شروع میشه رو ببینه !
      دوستان راهنمایی میکنن ؟