منتدى العرب
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا
ادارة المنتدي



 
الرئيسيةبحـثقائمة الاعضاءالمجموعاتس .و .جاليوميةالتسجيلدخول
قوانين المنتدىإنظم لفريق عملناإربح من النتالمكتبة الإلكترونيةمعرض الإستيلاتBAC 2012BEM 2012الكرة الجزائريةالكرة الأروبية
أهلا وسهلا بك يا نتمنى قضاء افضل الاوقات في ربوع منتديات العرب
اذا كنت زائر فتفضل بالتسجيل من هنا اما اذا كنت من اعضائنا الاعزاء فتفضل بالدخول من هنا


حفظ البيانات؟
  الرئيسية المنتديات مكتبة الصور قائمة الأعضاء بحث اتصل بنا سؤال وجواب التسجيل دخول
آخر المواضيع
الموضوع
تاريخ ارسال المشاركة
بواسطة
حصري عمل احصائيات للقسم مثل الفي بي تماما .
(تومبلايت)حصري كود ناف بار فوق الاقسام بطريقة جديدة ومميزة
(تـومبلـايت) وضع اسماء وا الوصف الفئات في ايطار تلقائي كالفيبى
[تومبلايت] وضع ايطار الأدوات الاشراف مثل الفي بي من
تومبيلات كود وضع ملاحظات تحت المرفقات مثل الفي بي
كود خانة المشرفين الاحترافية مع ايقونة شغال 100/100
[تومبلايت] جعل اخر مشاركة متحركة ومطورة بتقنية css ..
كود [ jQuery ] كود جافا وضع ايقونه بحث لقوقل بجانب عناوين المواضيع
(تومبلايت) شريط اخر المواضيع الرائع 2012
كود لوضع اكثر من استايل مميز وحصري على منتدى العرب ..
2014-08-19, 17:56
2014-08-06, 19:33
2013-08-05, 00:08
2013-08-04, 22:05
2013-08-04, 22:02
2013-06-05, 08:50
2013-06-05, 08:36
2013-03-05, 02:38
2013-02-18, 17:55
2012-08-19, 17:52
zizou2012
zizou2012
zooro250
zooro250
zooro250
MID0
MID0
naruto14145
mo2236301
ندى الجزيري

شاطر | 
 

 كود صور تتحركك بطريقه جميلة جدا ...

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
~> lamrisif <~
عدد المساهمات : 573
نقاط : 1743
تاريخ الميلاد : 11/09/1993
العمر : 23
معاينة صفحة البيانات الشخصي للعضوhttp://www.seyf-educ.com/
موضوع: كود صور تتحركك بطريقه جميلة جدا ... 2011-07-09, 10:20


كود وجدناه في بعض المنتديات وحبينا نقدمو الكم
عباره عن كود جافه بعمل على تحريك صور بطريقه جذابه جدا
الكود حاليا احنا مركبينو في صفحتنا الرئيسيه

صوره توضيحيه


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

ضع هذا الكود في javascript

الرمز:












ÇÓÇíá Çí ãíÓ íæ áÝÑÒ ÇáÇÍãÑ ÈÇáÊæãÈíáÇÊ ãÌÇäÇ áÇÍáì ãäÊÏì





//
$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption">[b][/b]


</li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
  function () {
          clearInterval(timer);
  },
  function () {
          timer = setInterval('gallery()',speed);
  }
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
          //Display the content
          $('#slideshow-caption h3').html(title);
          $('#slideshow-caption p').html(desc);
          $('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>



body {
margin:0;

}
ul.slideshow {
list-style:none;
width:728px;
height:90px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:728px;
height:90px;
border:none;
}
#slideshow-caption {
width:728px;
height:25px;
position:absolute;
bottom:0;
left:0;
color:#000000;
background:#FFFFFF;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}


[list]
[*][url=http://www.t3lem.org/][img]http://www.t3lem.org/users/1814/21/36/40/album/ououo-12.gif[/img][/url]
[*][url=http://www.imissyoulovers.com/f2-montada][img]http://i48.servimg.com/u/f48/14/58/23/42/ooooo-10.gif[/img][/url]
[*][url=http://www.imissyoulovers.com/t13465-topic][img]http://i48.servimg.com/u/f48/14/58/23/42/ooooou10.gif[/img][/url]

[/list]




اتبع الخطوات






فكره الكود

يجب ان تضعه في صفحه هتمل

وتضع الكود تالي في التشكيلات العامه او الاعلانات الخاصه
وتضع في رابط صفحه الهتمل الي عملتها
الرمز:

 <iframe src="رابط الصفحه " scrolling="no" width="728" align="center" frameborder="no" height="92"></iframe>


الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.seyf-educ.com/
عدد المساهمات : 6
نقاط : 6
تاريخ الميلاد : 12/06/1978
العمر : 38
معاينة صفحة البيانات الشخصي للعضو
موضوع: رد: كود صور تتحركك بطريقه جميلة جدا ... 2011-07-09, 22:45

بارك الله فيك أخى الكريم

وأرجو شرح هذا الكود

لأنك تفضلت وذكرت فى بداية الموضوع بأن نضع الكود فى صفحة javascript

ثم فى نهاية الموضوع ذكرت بأن نضع الكود فى صفحة هتمل !!!!!!!!

أرجو التوضيح ... مع خالص الشكر والتقدير لك ولمجهودك الرائع






الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
~> lamrisif <~
عدد المساهمات : 573
نقاط : 1743
تاريخ الميلاد : 11/09/1993
العمر : 23
معاينة صفحة البيانات الشخصي للعضوhttp://www.seyf-educ.com/
موضوع: رد: كود صور تتحركك بطريقه جميلة جدا ... 2011-07-10, 06:41

يا صديقي هما كودين الأول يوضع في صفحة الجافا سكريبت والثاني يوضع في صفحة الهتمل وشكرا على مرورك علينا




موقع الدراسة والتعليم في الجزائر - أكادمية سيف
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.seyf-educ.com/
عدد المساهمات : 6
نقاط : 6
تاريخ الميلاد : 12/06/1978
العمر : 38
معاينة صفحة البيانات الشخصي للعضو
موضوع: رد: كود صور تتحركك بطريقه جميلة جدا ... 2011-07-10, 07:32

ياصديقى ولكنك ذكرت فى بداية الموضوع أن الكود الأول يوضع فى javascript

والكود الثانى يوضع فى التشكيلات العامة

سؤالى هو

هل ننشىء صفحة هتمل ونضع فيها نفس الكود الذى وضعناه فى صفحة ال javascript

أرجو إفادتى ,,, ولك جزيل الشكر والتقدير


الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
~> lamrisif <~
عدد المساهمات : 573
نقاط : 1743
تاريخ الميلاد : 11/09/1993
العمر : 23
معاينة صفحة البيانات الشخصي للعضوhttp://www.seyf-educ.com/
موضوع: رد: كود صور تتحركك بطريقه جميلة جدا ... 2011-07-10, 07:46

يا اخي نعم تنشأ صفحة الهتمل وتضع فيه الكود الثاني وممكن طلب من إليك يا صديقي




موقع الدراسة والتعليم في الجزائر - أكادمية سيف
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.seyf-educ.com/
~> lamrisif <~
عدد المساهمات : 573
نقاط : 1743
تاريخ الميلاد : 11/09/1993
العمر : 23
معاينة صفحة البيانات الشخصي للعضوhttp://www.seyf-educ.com/
موضوع: رد: كود صور تتحركك بطريقه جميلة جدا ... 2011-07-10, 07:59

وتضع رابط صفحة الجافا سكريبت في الكود الثاني




موقع الدراسة والتعليم في الجزائر - أكادمية سيف
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.seyf-educ.com/
عدد المساهمات : 6
نقاط : 6
تاريخ الميلاد : 12/06/1978
العمر : 38
معاينة صفحة البيانات الشخصي للعضو
موضوع: رد: كود صور تتحركك بطريقه جميلة جدا ... 2011-07-24, 11:05

:king:
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
عدد المساهمات : 6
نقاط : 6
تاريخ الميلاد : 12/06/1978
العمر : 38
معاينة صفحة البيانات الشخصي للعضو
موضوع: رد: كود صور تتحركك بطريقه جميلة جدا ... 2011-08-06, 10:41

يا أخى الكود ناقص أو خطأ

أنت ذكرت أن الكود الأول يوضع فى javascript
والكود الثانى يوضع فى التشكيلات العامة

أين الكود الذى يوضع فى الهتمل """؟؟؟؟؟؟؟؟؟؟
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
~> lamrisif <~
عدد المساهمات : 573
نقاط : 1743
تاريخ الميلاد : 11/09/1993
العمر : 23
معاينة صفحة البيانات الشخصي للعضوhttp://www.seyf-educ.com/
موضوع: رد: كود صور تتحركك بطريقه جميلة جدا ... 2011-08-06, 11:14

اخي انتظر سوف أجلب لك الكود شكرا على الإستفسار




موقع الدراسة والتعليم في الجزائر - أكادمية سيف
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.seyf-educ.com/
~> lamrisif <~
عدد المساهمات : 573
نقاط : 1743
تاريخ الميلاد : 11/09/1993
العمر : 23
معاينة صفحة البيانات الشخصي للعضوhttp://www.seyf-educ.com/
موضوع: رد: كود صور تتحركك بطريقه جميلة جدا ... 2011-08-06, 11:21

تفضل أخي الكود اللي تبحث عنه









موقع الدراسة والتعليم في الجزائر - أكادمية سيف
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.seyf-educ.com/
 

كود صور تتحركك بطريقه جميلة جدا ...

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى العرب  :: منتديات تطوير المواقع والمنتديات :: منتديات التطوير والمساعدة :: منتدى تطوير phpBB 1. 2. 3 :: أكواد JavaScript & jQuery-