التمرير باستمرار شريط أفقي يحتوي على صور في jquery؟

Question

أود أن أفعل شيئا مثل هذا: http://javascript.about.com/library/blcmarquee1.htm.

يبدو أن البرنامج النصي الذي تمت الإشارة إليه هو laggy قليلا (قديم؟)، لذلك كنت أتساءل عما إذا كان أي شخص يعرف حلا أفضل. (حلول مسج مرحبا.)

Answer 1

وجدت للتو هذا - مدفوعة jQuery، ولديها صور. أنا أعتزم استخدامه لمشروع حالي.

http://logicbox.net/jquery/simplyscroll/

تحديث: لقد استخدمت الآن هذا في رمز الإنتاج. البرنامج المساعد قادر على حلقات الصور 70+ 150 × 65px بسلاسة للغاية - والتي كانت هناك عدد من البرنامج المساعد آخر جربته مماثلة لهذه الفشل.

لاحظ أنه بإكراؤه z-index القضايا في IE 6/7 ولم تظهر إلخ. - ولكن هذا قد يكون أيضا جزئيا بسبب بلدي CSS. لأي شخص تواجه مشكلة في عدم إظهار على الإطلاق في IE تحقق من المعيار IE z-index إصلاحات: http://www.google.com/search؟q=ie+z+index-issues.

آخر تحديث: إضافة أشياء يجب مراعاتها عند تنفيذ المكونات الإضافية مثل هذه:

• عدد العناصر ونوع المحتوى للتمرير. لقد وجدت رقما سيبدأ في خلل بمجرد أن يكون لديك أكثر من 15 صورة للتمرير.
• لقد وجدت عددا من هذه الإضافات التي كانت مرتبطة بالإصدارات القديمة من jQuery
• إذا كانت الصور التمرير هي كلها بنفس الحجم مرة أخرى عددا من المكونات الإضافية التي جربتها مع عملت فقط إذا كانت جميع الصور بنفس الحجم ولكنها لم تجعل هذا واضحا في البرامج التعليمية. أعتقد، ثم تشغيل الإضافات، ثم قم بتعيين سلسلة من علامات LI التي هي جميع X Wedd
• التأثيرات - سيقوم البعض بالتمرير باستمرار من شأنه أن يتحرك صورة واحدة صورة واحدة للمرة الثانية ثم نقل صورة أخرى

لقد وجدت الآن أن هذه المكونات الإضافية التخريبية لتكون جيدة جدا أيضا.

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

Answer 2

جرس جيكيري السلس الحريري و مختبرات جيفا سرادق

Answer 3

مجرد فكرة. هل يمكنك أن تفعل شيئا مثل هذا.

<style type="text/css">

.imgwindow{
width:500px; //or whatever
height:65px; //or whatever
position:relative;
overflow:hidden;
}

.imgholder{
min-width:2000px;
height:65px;
position:absolute;
left:-200px;
}

.inline-image{
display:inline-block;
}

</style>

<script type="text/javascript">

var img;

function imgScroll(){
 img = $(".inline-image").first();
 img.animate({width:0},2500,'linear',function(){
   img.remove();
   $(".imgholder").append(img);
   imgScroll();
 });

}

$(document).ready(function(){

imgScroll();  

});

</script>

و html

<div class="imgwindow">
  <div class="imgholder">
   <img class="inline-image" src="image1" /><img class="inline-image" src="image2" />...
  </div>
</div>