العرض المستمر وتدوير المحتوي باستخدام JS,CSS

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

لتحميل السكريبت اضغط هنـــــــــا

لإلقاء نظره علي العض المستمر للمحتوي اضغط هنـــــــــــا

أولا قم بوضع النص هنا علي هذا الشكل

<ul id="tips">
	<li>... if you want to become a better coder you need to eat your vegetables?</li>
	<li>... it takes more time to code a web page then to make a pizza?</li>
	<li>... you should validate your code?</li>
	<li>... jQuery is your friend? For real!</li>
	<li>... no matter what some people claim, you can't learn CSS in 3 hours?</li>
</ul>

وقم بإضافة هذا التنسيق

#tips, #tips li{
	margin:0;
	padding:0;
	list-style:none;
	}
#tips{
	width:250px;
	font-size:16px;
	line-height:120%;
	}
#tips li{
	padding:20px;
	background:#e1e1e1;
	display:none; /* hide the items at first only */
	}

الفقرات سوف تكون مقسمه وسوف تحفظ في مكان ما علي السيرفير وسوف يتم عرضها بالترتيب عليك ان تقوم بإضافه كود الجافا كويري هذا

<script type="text/javascript" src="js/jquery.js"></script>

وطبعا قم بإضافة هذا الكود الذي يقوم بوظيفة العرض بطريقة عشوائية ودوريه :

<script type="text/javascript">

this.randomtip = function(){
	var length = $("#tips li").length;
	var ran = Math.floor(Math.random()*length) + 1;
	$("#tips li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){
	randomtip();
});

</script>

اليك الكود كاملا:

<script type="text/javascript">

this.randomtip = function(){

	var pause = 3000; // define the pause for each tip (in milliseconds)
	var length = $("#tips li").length;
	var temp = -1;

	this.getRan = function(){
		// get the random number
		var ran = Math.floor(Math.random()*length) + 1;
		return ran;
	};
	this.show = function(){
		var ran = getRan();
		// to avoid repeating
		while (ran == temp){
			ran = getRan();
		};
		temp = ran;
		$("#tips li").hide();
		$("#tips li:nth-child(" + ran + ")").fadeIn("fast");
	};

	show(); setInterval(show,pause);

};

$(document).ready(function(){
	randomtip();
});

</script>

وهذا هو التنفيذ عليك بالضغط هنـــــــــا

والأن بعد قراءة هذه المقاله جيدا سوف تستطيع أن تعرض محتواك بالشكل الأنيق المناسب