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

دائما نقدم لكم اخر ما نحصل عليه من تقنيات واكواد حصرية ومميزة لا نخفيها ابدا عنكم ....

اولا الكود حصري وربي شاهد على ذلك لم اقك بنقله بتاتا .....

الكود عبارة عن بنرات او اعلانات لموقعك تتبدل خلال فترة معينة بطريقة جدا مميزة

اقتباس :

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

//Execute the slideShow, set 3 seconds for each images
slideShow(9500);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('

');

//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');

}

//]]>

• 



• 



• 




• 

اولا خطوات التركيب ...

1-قم بتغيير اللون الاحمر بالكود الى روابط الصور التي تريدها مع الانتباه ان تكون عرض الصورة وطلها كالاتي 760*90

2-ثانيا نقوم بتغيير اللون الاخضر الى النص الذي تريده ان يظهر مع الاعلان

طبعا الكود السابق يحتوي على اربع بنرات او اعلانات اذا اردت زيداتهم فقط قم بإضافة هذا الى اخر الكود

اقتباس:

3- قم بعمل صفحة html جديدة وضع بها الكود السابق بعد التعديل عليه كما يناسبك

4- الخطوة الاخيرة هي ان تستدعي الصفحة من خلال فريم وهو كالاتي
اقتباس:



فقط قم باستبدال الرابط الموجود باللون الاحمر بالرابط الذ وضعت فيه الكود في صفحة ال html الموجود في الخطوة رقم 3


الان فقط ضع الكود الموجود في الخطوة رقم 4 فقط في المكان الذي تريد ان يظهر فيه الاعلانات او البنرات ...

انتهى الشرح وبالتوفيق