ورود

View Full Version : سوال: چرخشی کردن یک اسلاید با کمک حلقه



DariushGreat
یک شنبه 11 مرداد 1394, 11:37 صبح
سلام
خسته نباشید
آقا من با دانش اندک jQuery یک اسلاید نوشتم که وقتی موس میره روی هر بخش از list-1 تمامی خسیسه هاش به show-1 منتقل بشه و نمایش داده بشه.


$(document).ready(function() {
var originalContent = $(".show").html();
$(".list-1").hover(function() {
var idNumber = $(this).data("something");
var textBody = $(this).html();

$(".show-1").attr("id",idNumber);
$(".show-1").html(textBody);
$(".show-1").css('background','#efefef');
}, function() {
$(".show-1").html(originalContent);
$(".show-1").css('background','none');
});
});
$(document).ready(function(){
$(".show-1").mouseover(function(){
$(this).css("background", "#efefef");
});
$(".show-1").mouseout(function(){
$(this).css("background", "none");
});
});


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

ممنون از کمکتون :قلب:

sinoser
دوشنبه 12 مرداد 1394, 15:44 عصر
1- بخش کد html رو هم بزار
2- چرخش خودکار دیگه چیه ؟ منظورت انجام به صورت حلقه ای هست مثلا هر یک ثانیه و .. یا نه انیمیشن

DariushGreat
سه شنبه 13 مرداد 1394, 11:36 صبح
1- بخش کد html رو هم بزار
2- چرخش خودکار دیگه چیه ؟ منظورت انجام به صورت حلقه ای هست مثلا هر یک ثانیه و .. یا نه انیمیشن

سلام
این برای گزینه یک:


$(document).ready(function() {
var originalContent = $(".show").html();
$(".list-1").hover(function() {
var idNumber = $(this).data("something");
var textBody = $(this).html();

$(".show-1").attr("id",idNumber);
$(".show-1").html(textBody);
$(".show-1").css('background','#efefef');
}, function() {
$(".show-1").html(originalContent);
$(".show-1").css('background','none');
});
});
$(document).ready(function(){
$(".show-1").mouseover(function(){
$(this).css("background", "#efefef");
});
$(".show-1").mouseout(function(){
$(this).css("background", "none");
});
});




<div class="right-slide">


<div data-something="15019" class="list-1">
<a class="listthumb" href="http://www.waternews.ir/1394/05/%d8%b7%d8%b1%d8%ad%e2%80%8c%d9%87%d8%a7%d9%8a-%d8%a2%d8%a8-%d8%a8%d8%a7-%d8%aa%d9%88%d8%ac%d9%87-%d8%a8%d9%87-%d8%b4%d8%b1%d8%a7%d9%8a%d8%b7-%d8%ad%d9%88%d8%b6%d9%87%e2%80%8c%d9%87%d8%a7-%d8%a7%d9%88/"><img width="250" height="183" src="http://www.waternews.ir/wp-content/uploads/2015/07/farhangnews_97459-281679-1413788811-250x183.jpg" data-lazy-type="image" data-lazy- src="http://www.waternews.ir/wp-content/uploads/2015/07/farhangnews_97459-281679-1413788811-250x183.jpg" class="lazy lazy-hidden faretorghab wp-post-image" alt="طرح‌های آب با توجه به شرایط حوضه‌ها اولویت‌بندی می‌شوند" title="طرح‌های آب با توجه به شرایط حوضه‌ها اولویت‌بندی می‌شوند" /><noscript><img width="250" height="183" src="http://www.waternews.ir/wp-content/uploads/2015/07/farhangnews_97459-281679-1413788811-250x183.jpg" class="faretorghab wp-post-image" alt="طرح‌های آب با توجه به شرایط حوضه‌ها اولویت‌بندی می‌شوند" title="طرح‌های آب با توجه به شرایط حوضه‌ها اولویت‌بندی می‌شوند" /></noscript></a>
<h3 class="zigurat">
<a href="http://www.waternews.ir/1394/05/%d8%b7%d8%b1%d8%ad%e2%80%8c%d9%87%d8%a7%d9%8a-%d8%a2%d8%a8-%d8%a8%d8%a7-%d8%aa%d9%88%d8%ac%d9%87-%d8%a8%d9%87-%d8%b4%d8%b1%d8%a7%d9%8a%d8%b7-%d8%ad%d9%88%d8%b6%d9%87%e2%80%8c%d9%87%d8%a7-%d8%a7%d9%88/">طرح‌های آب با توجه به شرایط حوضه‌ها اولویت‌بندی می‌شوند</a>
</h3>
<p>در احداث سد شفارود، وزارت نیرو و سازمان محیط زیست با هم هماهنگ هستند، طرح بازنگری شده و بنابر مصالح زیست‌محیطی علاوه بر کاهش حجم مخزن،‌ ارتفاع سد نیز کاهش یافته است.</p>
</div>



<div data-something="15016" class="list-1">
<a class="listthumb" href="http://www.waternews.ir/1394/05/%d9%85%d8%b1%d8%af%d9%85-%d9%85%d8%b3%d8%a6%d9%84%d9%87-%d8%a2%d8%a8-%d8%b1%d8%a7-%d9%85%d8%b4%da%a9%d9%84-%d8%af%d9%88%d9%84%d8%aa-%d9%85%db%8c%e2%80%8c%d8%af%d8%a7%d9%86%d9%86%d8%a f-%d9%86%d9%87/"><img width="250" height="183" src="http://www.waternews.ir/wp-content/uploads/2015/08/aIMG_9969-e1438666021488-250x183.jpg" data-lazy-type="image" data-lazy- src="http://www.waternews.ir/wp-content/uploads/2015/08/aIMG_9969-e1438666021488-250x183.jpg" class="lazy lazy-hidden faretorghab wp-post-image" alt="مردم مسئله آب را مشکل دولت می‌دانند نه مشکل خودشان" title="مردم مسئله آب را مشکل دولت می‌دانند نه مشکل خودشان" /><noscript><img width="250" height="183" src="http://www.waternews.ir/wp-content/uploads/2015/08/aIMG_9969-e1438666021488-250x183.jpg" class="faretorghab wp-post-image" alt="مردم مسئله آب را مشکل دولت می‌دانند نه مشکل خودشان" title="مردم مسئله آب را مشکل دولت می‌دانند نه مشکل خودشان" /></noscript></a>
<h3 class="zigurat">
<a href="http://www.waternews.ir/1394/05/%d9%85%d8%b1%d8%af%d9%85-%d9%85%d8%b3%d8%a6%d9%84%d9%87-%d8%a2%d8%a8-%d8%b1%d8%a7-%d9%85%d8%b4%da%a9%d9%84-%d8%af%d9%88%d9%84%d8%aa-%d9%85%db%8c%e2%80%8c%d8%af%d8%a7%d9%86%d9%86%d8%a f-%d9%86%d9%87/">مردم مسئله آب را مشکل دولت می‌دانند نه مشکل خودشان</a>
</h3>
<p>نشست تخصصی بحران آب و مسئولیت‌های مدنی، با حضور کارشناسان و مسئولان دولتی و مدنی، عصر یکشنبه در محل سندیکای شرکت‌های ساختمانی ایران برگزار شد. این نشست میزبان صاحب‌نظرانی از ارگان‌های مختلف دولتی و غیردولتی بود که بحران آب را از دیدگاه‌های متفاوت مورد بررسی قرار دادند. محمد درویش، معاون آموزشی رئیس سازمان حفاظت محیط‌زیست، [&hellip;]</p>
</div>



<div data-something="15014" class="list-1">
<a class="listthumb" href="http://www.waternews.ir/1394/05/%d8%b1%d9%88%d8%af%d8%ae%d8%a7%d9%86%d9%87-%d8%b1%d8%a7-%d8%af%d9%88%d8%b1-%d9%85%db%8c%e2%80%8c%d8%b2%d9%86%d9%86%d8%af-%d8%aa%d8%a7-%d8%b5%d8%af%d8%a7%db%8c-%d8%a7%d8%b9%d8%aa%d8%b1%d8%a7%d8%b6/"><img width="250" height="183" src="http://www.waternews.ir/wp-content/uploads/2015/07/1389535655-250x183.jpg" data-lazy-type="image" data-lazy- src="http://www.waternews.ir/wp-content/uploads/2015/07/1389535655-250x183.jpg" class="lazy lazy-hidden faretorghab wp-post-image" alt="رودخانه را دور می‌زنند تا صدای اعتراض مردم ساکت شود" title="رودخانه را دور می‌زنند تا صدای اعتراض مردم ساکت شود" /><noscript><img width="250" height="183" src="http://www.waternews.ir/wp-content/uploads/2015/07/1389535655-250x183.jpg" class="faretorghab wp-post-image" alt="رودخانه را دور می‌زنند تا صدای اعتراض مردم ساکت شود" title="رودخانه را دور می‌زنند تا صدای اعتراض مردم ساکت شود" /></noscript></a>
<h3 class="zigurat">
<a href="http://www.waternews.ir/1394/05/%d8%b1%d9%88%d8%af%d8%ae%d8%a7%d9%86%d9%87-%d8%b1%d8%a7-%d8%af%d9%88%d8%b1-%d9%85%db%8c%e2%80%8c%d8%b2%d9%86%d9%86%d8%af-%d8%aa%d8%a7-%d8%b5%d8%af%d8%a7%db%8c-%d8%a7%d8%b9%d8%aa%d8%b1%d8%a7%d8%b6/">رودخانه را دور می‌زنند تا صدای اعتراض مردم ساکت شود</a>
</h3>
<p>به گزارش پایگاه خبری تحلیلی اب ایران،یک عضو هیات مدیره جمعیت طبیعت یاران اصفهان گفت: حقابه زیست محیطی تالاب گاوخونی فقط و فقط از آب زاینده رود است و تالاب با دادن این حق احیا می‌شود. آرش جزینی گفت: عده‌ای می‌گویند برای زاینده رود مرثیه خوانی نکنید این رودخانه می‌تواند ادامه حیات داشته باشد اما [&hellip;]</p>
</div>



<div data-something="15009" class="list-1">
<a class="listthumb" href="http://www.waternews.ir/1394/05/%da%a9%d9%85%e2%80%8c%d8%a2%d8%a8%db%8c%d8%8c%d9%8 5%d8%ad%db%8c%d8%b7%e2%80%8c%d8%b2%db%8c%d8%b3%d8% aa-%d8%ae%d9%88%d8%b2%d8%b3%d8%aa%d8%a7%d9%86-%d8%b1%d8%a7-%d8%a8%d9%87-%d8%a8%d8%ad%d8%b1%d8%a7/"><img width="250" height="183" src="http://www.waternews.ir/wp-content/uploads/2015/05/محصولات-کشاورزی-خوزستان-250x183.jpg" data-lazy-type="image" data-lazy- src="http://www.waternews.ir/wp-content/uploads/2015/05/محصولات-کشاورزی-خوزستان-250x183.jpg" class="lazy lazy-hidden faretorghab wp-post-image" alt="کم‌آبی،محیط‌زیست خوزستان را به بحران می‌برد" title="کم‌آبی،محیط‌زیست خوزستان را به بحران می‌برد" /><noscript><img width="250" height="183" src="http://www.waternews.ir/wp-content/uploads/2015/05/محصولات-کشاورزی-خوزستان-250x183.jpg" class="faretorghab wp-post-image" alt="کم‌آبی،محیط‌زیست خوزستان را به بحران می‌برد" title="کم‌آبی،محیط‌زیست خوزستان را به بحران می‌برد" /></noscript></a>
<h3 class="zigurat">
<a href="http://www.waternews.ir/1394/05/%da%a9%d9%85%e2%80%8c%d8%a2%d8%a8%db%8c%d8%8c%d9%8 5%d8%ad%db%8c%d8%b7%e2%80%8c%d8%b2%db%8c%d8%b3%d8% aa-%d8%ae%d9%88%d8%b2%d8%b3%d8%aa%d8%a7%d9%86-%d8%b1%d8%a7-%d8%a8%d9%87-%d8%a8%d8%ad%d8%b1%d8%a7/">کم‌آبی،محیط‌زیست خوزستان را به بحران می‌برد</a>
</h3>
<p>به گزارش پایگاه خبری تحلیلی آب ایران، معاون محیط‌زیست طبیعی اداره‌کل حفاظت محیط‌زیست خوزستان، وضع کم‌آبی در مراتع و مناطق طبیعی و حفاظت‌شده استان را رو به بحران توصیف کرد. «عادل مولا» اظهار کرد: شرایط آبی مناطق طبیعی خوزستان در شرایط بدی قرار دارد و به دلیل خشک شدن چشمه​ها و کاهش منابع آبی، وضع [&hellip;]</p>
</div>


</div>

<div class="left-slide">

<div class="show-1" id="15019">
<a class="showthumb" href="http://www.waternews.ir/1394/05/%d8%b7%d8%b1%d8%ad%e2%80%8c%d9%87%d8%a7%d9%8a-%d8%a2%d8%a8-%d8%a8%d8%a7-%d8%aa%d9%88%d8%ac%d9%87-%d8%a8%d9%87-%d8%b4%d8%b1%d8%a7%d9%8a%d8%b7-%d8%ad%d9%88%d8%b6%d9%87%e2%80%8c%d9%87%d8%a7-%d8%a7%d9%88/"><img width="250" height="183" src="http://www.waternews.ir/wp-content/uploads/2015/07/farhangnews_97459-281679-1413788811-250x183.jpg" data-lazy-type="image" data-lazy- src="http://www.waternews.ir/wp-content/uploads/2015/07/farhangnews_97459-281679-1413788811-250x183.jpg" class="lazy lazy-hidden faretorghab wp-post-image" alt="طرح‌های آب با توجه به شرایط حوضه‌ها اولویت‌بندی می‌شوند" title="طرح‌های آب با توجه به شرایط حوضه‌ها اولویت‌بندی می‌شوند" /><noscript><img width="250" height="183" src="http://www.waternews.ir/wp-content/uploads/2015/07/farhangnews_97459-281679-1413788811-250x183.jpg" class="faretorghab wp-post-image" alt="طرح‌های آب با توجه به شرایط حوضه‌ها اولویت‌بندی می‌شوند" title="طرح‌های آب با توجه به شرایط حوضه‌ها اولویت‌بندی می‌شوند" /></noscript></a>
<h3><a href="http://www.waternews.ir/1394/05/%d8%b7%d8%b1%d8%ad%e2%80%8c%d9%87%d8%a7%d9%8a-%d8%a2%d8%a8-%d8%a8%d8%a7-%d8%aa%d9%88%d8%ac%d9%87-%d8%a8%d9%87-%d8%b4%d8%b1%d8%a7%d9%8a%d8%b7-%d8%ad%d9%88%d8%b6%d9%87%e2%80%8c%d9%87%d8%a7-%d8%a7%d9%88/">طرح‌های آب با توجه به شرایط حوضه‌ها اولویت‌بندی می‌شوند</a></h3>
<p class="body"><p>در احداث سد شفارود، وزارت نیرو و سازمان محیط زیست با هم هماهنگ هستند، طرح بازنگری شده و بنابر مصالح زیست‌محیطی علاوه بر کاهش حجم مخزن،‌ ارتفاع سد نیز کاهش یافته است.</p>
</p>
</div>


</div>


برای بخش دوم هم باید بگم که، الآن وقتی با موس روی یکی از آیتم های اسلایدر راست، کل محتوای اون توسط اسلایدر چپ فچ میشه. میخوام علاوه بر این قابلیت، به طور خودکار و با مکث مثلا 6 ثانیه ای، دونه دونه محتویات هر بخش از اسلاید راست توسط چپی فچ بشه بعد دوباره برگرده از اول. دقیقا مثل اسلایدرای معمولی که هر محتوا رو برای چند ثانیه نمایش میدن میرن اسلاید بعدی.

sinoser
سه شنبه 13 مرداد 1394, 19:48 عصر
خب دوست من این همه اسلایدر چرا اصرار داری خودت بنویسی اونم با کلی باگ و نقص فنی !!! وقتتو از سر راه اوردی؟!!
راستش بلدم ولی حقیقتش حال ندارم بنویس اخه واس خودمم نمی کنم این کارو , از پلاگینا استفاده می کنم کلیم امکانات بیشتر دارن.
http://www.htmldrive.net/categorys/show/2/slideshow-scroller

DariushGreat
چهارشنبه 14 مرداد 1394, 15:57 عصر
خب دوست من این همه اسلایدر چرا اصرار داری خودت بنویسی اونم با کلی باگ و نقص فنی !!! وقتتو از سر راه اوردی؟!!
راستش بلدم ولی حقیقتش حال ندارم بنویس اخه واس خودمم نمی کنم این کارو , از پلاگینا استفاده می کنم کلیم امکانات بیشتر دارن.
http://www.htmldrive.net/categorys/show/2/slideshow-scroller

دوست عزیز عقلم میرسید قبل این که بیام اینجا تاپیک بزنم خودم بگردم. اون چیزی که کارفرما از من خواسته هیچ جایی وجود نداره. در نتیجه خودم باید بنویسم :|

DariushGreat
چهارشنبه 14 مرداد 1394, 16:25 عصر
خب دوست من این همه اسلایدر چرا اصرار داری خودت بنویسی اونم با کلی باگ و نقص فنی !!! وقتتو از سر راه اوردی؟!!
راستش بلدم ولی حقیقتش حال ندارم بنویس اخه واس خودمم نمی کنم این کارو , از پلاگینا استفاده می کنم کلیم امکانات بیشتر دارن.
http://www.htmldrive.net/categorys/show/2/slideshow-scroller

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

sinoser
چهارشنبه 14 مرداد 1394, 16:32 عصر
خب فدات شم چرا داغ می کنی !!! بنویس کی جلوتو گرفته !!:متفکر:
راهنمایی هم اینه : تعداد المان های دارای کلاس list-1 رو میگیری بعد به وسیله یک حلقه زمان دار window.setInterval این کار رو می کنی.
قبل این حلقه یک متغییر اندیس میسازی و صفر میدی داخل این حلقه هم هر بار یکی به این اضافه می کنی و می گی اگر از تعداد کل کمتر بود بیا و المان دارای اون اندیس رو به تابع بفرست.
این تابع داخلش همون کارایی که توی hover می کنی هست و سویچ بینشم می تونی یک ارگومان بزاری که اگر مثلا true بود کار mouseEnter رو بکنه و اگر false کار خروج موس و داخل تابع هم با یه if ساده اینا رو جا می کنی. از این تابع توی hover هم می تونی استفاده کنی.

حله ؟