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

بپرسید

0

{{ digitTrunc(content.likes) }}

<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 را از طریق تابع محاسبه کنم.

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

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران

پاسخ ها به این سوال

پاسخ ها به این سوال

{{ digitTrunc(post.likes) }}

این پست در تاریخ {{ dateString(new Date(post.deleteDate)) }} توسط {{ post.deletedByUser }} حذف شده است.

دلیل حذف: {{ post.deleteReason ?? 'نامشخص' }}

{{ err }}
{{ post.userAchivements.rhodiumAchievements }}
{{ post.userAchivements.platinumAchievements }}
{{ post.userAchivements.goldAchievements }}
{{ post.userAchivements.silverAchievements }}
{{ post.userAchivements.bronzeAchievements }}
{{ timeSince(new Date(post.date)) }} قبل

برای ثبت پاسخ خود در وب سایت وارد حساب کاربری خود شوید
قابلیت ارسال مطلب توسط مدیریت سایت غیر فعال شده است