در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

محمدحسن سلمانی

طراحی اسلایدر اسکرولینگ با تولید توابع در جی کوئری

<section id="SectionSliderScrol_1">

<div class="ScrolingDiv" id="ScrolingDiv_1" onload="CreateWidthDivSlides(this)">

<div class="ScrolingDiv" id="ScrolingDiv_2" onload="CreateWidthDivSlides(this)">

<section >

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

سایت دیجی کلا چندتا اسلایدر داره که بصورت اسکرولینگ افقی میباشد (مثل لب تاپ - پربازدیدها و ... که در راستای افقی جابجا میشه)

مطمئنا طراحاشون نیومده و هر بار دستورات جاوا اسکریپت یا جی کوئری را تکرار نکرده و یک دستور و تابع برای همه نوشته.

داخل دوتا div بالا چندتا DIV و اسلاید عکس ها قرار داره ...

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

زمانی که سایت لود میشه نیاز دارم عناصر و تگ های داخلی هر دو div بالا(یا هر چندتا که از نظر ساختار html و css دقیقا یکی هستند) بصورت مجزا قابل دسترس باشن.مثلا با استفاده از event attr ها .

همانند کد زیر که برای حرکت مساقل هر اسلایدر اسکرول نوشتم.

<left>

<section id="SectionSliderScrol_1">

<h1 class="CaptionScolingSlider">

پیشنهادهای دیجی کالا برای شمـــــا

</h1>

<div class="ScrolingDiv" id="ScrolingDiv_1"">

<header class="header_CaptionSliderScroling">

کالای دیجیتال

</header>

<div class="SliderScrolChildDiv" id="SliderScrolChildDiv_1">

<div class="SliderScrolOuterDiv">

<div class="SliderScrolInnerDiv" id="SliderScrolInnerDiv_1">

<a title="tooltip برای نمایش وقتی روی لینک کاربر موس را نگه دارد">

<img src="ImagesSliderScrolingsliderscroling_1/Xiaomi-Mi-4i-Dual-SIM-Mobile-Phone---16GB.jpg">

<div class="DescriptProductSliderScrolDiv">

<span class="NameProductScolSliderSpan">

گوشی موبایل ایسوس مدل ZENPhone GoTo ZB500KL</span>

<span class="PriceProductScolSliderSpan">

<!--<span class="OldPriceSpan">-->

<!--300,000-->

<!--</span>-->

<span class="NewPriceSpan">980,000<span>تومان<span&gt; &lt;span>

</span>

</div>

</a>

<a title="tooltip برای نمایش وقتی روی لینک کاربر موس را نگه دارد">

<img src="ImagesSliderScrolingsliderscroling_1/TP-Link-Neffos-Y5-TP802A-Dual-SIM-Mobile-Phone-bfb567.jpg"

alt="گوشي موبايل شياومي مدل Redmi Note 2 دو سيم کارت ظرفيت 16 گيگابايت">

<div class="DescriptProductSliderScrolDiv">

<span class="NameProductScolSliderSpan">

گوشی موبایل شیائومی مدل(Mi 4i)دوسیم کارت ظرفیت 16G &lt;span>

<span class="PriceProductScolSliderSpan">

<span class="OldPriceSpan">

500,000

</span>

<span class="NewPriceSpan">435,000<span>تومان<span&gt; &lt;span>

</span>

</div>

</a>

</div>

</div>

<span class="IconArrowNextSliderScoling" onclick="MovingSliderScrollin('Left', this)"

title="Next Slider"></span>

<span class="IconArrowBackSliderScoling" onclick="MovingSliderScrollin('Right',this)"

title="Back Slider"></span>

</div>

</div>

div/>مشابه کد بالا <div class="ScrolingDiv" id="ScrolingDiv_2"">

دستور جی کوئری میخوام که وقتی صفحه لود میشه بشه بصورت مجزا به عناصر داخلی دسترسی داشت چون اگر این دستور جی کوئری را بنویسم مجموع عناصر در کل صفحه بدون را به من میده که بکارم نمییاد (دستوری مثل onclick="function(x) "

مثلا اگر دستور جی کوئری زیر را برای تعداد تگ های a بنویسم مجوع تگ ها داخل div class="ScrolingDiv" را بمن میده

var ScrolingDiv=$('.ScrolingDiv').find(a)

در اینجا تعداد تگ های a داخل div با کلاس ScrolingDiv را به من میده در حالیکه من تعداد تگ های داخل هر تگ با کلاس ScrolingDiv را نیاز دارم تا بتونم براساس تعداد اسلایدر های داخل این تگ (شاید داخل ScrolingDiv اولی 5اسلایدر باشد و در دومی 10 و در سومی 15تا) عرض کل هر تگ با کلاس ScrolingDiv را از طریق تابع محاسبه کنم.

متاصفانه نتونستم خیلی خوب توضیح بدهم اگر نیاز به فایل اصلی هست میتونم بفرستم

#جاوا_اسکریپت_مقدماتی #جی_کوئری #طراحی_وب
لذت یادگیری با توسینسو
به عنوان شخصی که مدت هاست از سایت توسینسو استفاده می کنم باید بگم که واقعاً یکی از بهترین مرجع ها برای ارتقاء دانش شخصی هست. دوره های سایت، راهکارها و مطالب، همگی عالی هستند.
پاسخ شما
برای ارسال پاسخ خود وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....