اجعل البانر الخاص بمنتداك متحرك تلقائيا 2016
اهلا وسهلا باعضاء صن سيت الكرام
اليوم اتيت لكم بموضوع حصرى
تقنية جديده لتحويل بانر المنتدى لديك بدل من صورة ثابتة الى سلايد شو مميز
مثال
ملحوظة كتب:قد لا يعمل اذا كنت غيرت معرف البانير الاصلى فى القالب header
طريقة التركيب سهلة جدا فقط الى اكواد الجافا واضف العنصر الجديد
اسم العنصر: كام تشاء
مكان الظهور: جميع الصفحات او كما تشاء ان يعمل السلايد شو
المحتوى: اضف الكود التالى
ضع رد مناسب!!
الكود:
[hide] (function() {
var BannerRotator = {
images : [
'http://i21.servimg.com/u/f21/18/21/60/73/free10.png',
'http://i21.servimg.com/u/f21/18/21/60/73/logo10.png'
],
start_delay : 5000,
duration : 5000,
height : 'auto',
fade_image : true,
fade_speed : 1200,
keep_initial : true,
remember_position : true,
preload : true,
// technical data below
index : -1,
logo : null,
// increment the index and display the next image in rotation after a small delay
next : function(ms) {
if (ms === undefined) ms = FA.BannerRotator.duration;
window.setTimeout(function() {
if (++FA.BannerRotator.index >= FA.BannerRotator.images.length) FA.BannerRotator.index = 0; // reset index when it exceeds "images" length
if (FA.BannerRotator.remember_position) my_setcookie('fa_banner_index', FA.BannerRotator.index); // remember the last banner shown
// fade banner in and out
if (FA.BannerRotator.fade_image) {
$(FA.BannerRotator.logo).fadeOut(FA.BannerRotator.fade_speed, function() {
FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index]; // set next banner
$(this).fadeIn(FA.BannerRotator.fade_speed, FA.BannerRotator.next); // fade it in
});
}
// default rotation
else {
FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index];
FA.BannerRotator.next();
}
}, ms);
},
// initial start up to get the correct logo node and setup some other settings
init : function() {
var logo = document.getElementById('i_logo') || document.getElementById('logo') || document.getElementById('pun-logo'),
index = my_getcookie('fa_banner_index');
if (logo) {
FA.BannerRotator.logo = logo.tagName == 'IMG' ? logo : logo.firstChild;
FA.BannerRotator.logo.style.height = FA.BannerRotator.height;
if (FA.BannerRotator.keep_initial) FA.BannerRotator.images[FA.BannerRotator.images.length] = FA.BannerRotator.logo.src;
if (FA.BannerRotator.remember_position && index) {
FA.BannerRotator.index = +index;
FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index] || FA.BannerRotator.images[0];
}
FA.BannerRotator.next(FA.BannerRotator.start_delay);
} else if (window.console && window.console.warn) {
console.warn('Your forum version is not optimized for this plugin');
}
}
};
if (!window.FA) FA = {};
if (!FA.BannerRotator) {
FA.BannerRotator = BannerRotator;
if (FA.BannerRotator.preload) {
for (var i = 0, j = FA.BannerRotator.images.length, img; i < j; i++) {
img = document.createElement('IMG');
img.src = FA.BannerRotator.images[i];
}
}
$(FA.BannerRotator.init);
}
}());والان شرح التحكم فى السلايد شو
images : [
'https://i.servimg.com/u/f21/18/21/60/73/free10.png',
'https://i.servimg.com/u/f21/18/21/60/73/logo10.png'
],
هذه المنطقة هى الصور يمكنك اضافة المزيد من الصور عن طريق اضافة سطر يحتوى على الاتى
'رابط الصورة'
وانتبه لوجود العلامتين والا سوف تقوم بتعطيل الكود باكمله
الجزىء الثانى
start_delay : 5000,
وهو مدة الانظار بين الصورة والاخرى 5000 تساوى 5 ثوانى
duration : 5000,
نفس الوظيفة الاختلاف فقط انه يعين مدة الظهور للصورة
height : 'auto',
وهو ارتفاع الصور الوضع الافتراضى هو تلقائى لذا يستحسن استخدام صور بنفس المقاسات او تغير auto الى الارتفاع المطلوب تحديده سواء بالنسبة المئوية او بالبكسل
واذا كان لديك المذيد من الاستفسارات قسم الدعم مفتوح لك فى اى وقت
#جافا #كود #بانر
