Patrocinados

jQuery এর সাহায্যে ওয়েবসাইটের ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন [এনিমেশন] করা।

0
4

jQuery এর সাহায্যে ওয়েবসাইটের ব্যাকগ্রাউন্ড একটারপর একটা পরিবর্তন করা যায়। অনেক সহজেই।

ডেমো দেখুন এখানে।

এর জন্য jQuery কোড গুলোঃ

<script>
jQuery(window).load(function(){
 var images = ['http://jakir.me/wp-content/uploads/2013/04/Forest-Highway.jpg',
 'http://jakir.me/wp-content/uploads/2013/04/highway.jpg'];
 var i = 0;

function changeBackground() {
 jQuery('#thumbs').css('background-image', function() {
 if (i >= images.length) {
 i=0;
 }
 return 'url(' + images[i++] + ')';
 });
 }
 // Call it on the first time
 changeBackground();
 // Set an interval to continue
 setInterval(changeBackground, 5000);
});
</script>

কিভাবে কাজ করে তা একটু ব্যাখ্যা করি। আমরা একটা ভ্যারিয়েবল নিয়েছি যার নাম image. এর মধ্যে আমরা ব্যাকগ্রাউন্ডের জন্য ব্যবহৃত ইমেজের লিঙ্ক গুলো রেখেছি।
আরেকটি ভ্যারিয়েবল নিয়েছি i, যা দিয়ে ইমেজ গুলোর মধ্যে লুপ চালানো হয়েছে পরবর্তিতে।

changeBackground নামে একটা ফাংশন লিখেছি যার মধ্যে jQuery CSS  একের পর এক ব্যাকগ্রাউন্ড সেট করছি। 
setInterval(changeBackground, 5000); কতক্ষন পর পর ব্যাকগ্রাউন্ড পরিবর্তন হবে তা সেট করে দিয়েছি। 
এই। আর কিছু না। অনেক সহজ, তাই না?

আপনি ইচ্ছে করলে কিছু এনিমেশনও যোগ করতে পারেন।

সম্পুর্ন কোডঃ


<!DOCTYPE html>
<html>
<head>

<style>
body{
margin:0;
background:#444;
}
#thumbs{
width:1000px;
height:500px;
margin:0 auto;
padding:50px;
overflow:hidden;
}

#text{
padding:50px;
font-size:18px;
color:#000;
background:#ccc;
opacity:.8;
}
</style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script>
jQuery(window).load(function(){
    var images = ['http://jakir.me/wp-content/uploads/2013/04/Forest-Highway.jpg',
	'http://jakir.me/wp-content/uploads/2013/04/highway.jpg'];
    var i = 0;

    function changeBackground() {
        jQuery('#thumbs').css('background-image', function() {
            if (i >= images.length) {
                i=0;
            }
            return 'url(' + images[i++] + ')';
        });
    }
    // Call it on the first time
    changeBackground();
    // Set an interval to continue
    setInterval(changeBackground, 5000);
});

</script>
</head>
<body>
<div id="thumbs">
<div id="text">
স্বপ্ন দেখতে ভালোলাগে। ভালোলাগে আকাশ কুসুম(!) চিন্তা করতে। সময় পেলেই বই পড়ি। পাঠ্য বই না। গল্পের বই আর সাইন্স ফিকশন। বেশি বই পড়া হয়েছে আমার পিসির সামনে বসে PDF বই। এখন ও পড়ি। যার বেশির ভাগই PDF। ফ্রী বই গুলো ডাউনলোড করে কত যে বইয়ের টাকা বাঁচিয়ে দিয়েছি আল্লাহই জানে। বইয়ের লেখকেরা ক্ষমা করলেই হয়। প্রোগ্রামিং প্র্যাকটিস করলেও অলস। আর অলস বলেই হয়তো পড়তে ভালোবাসি। সবার কাছে দোয়া চাই যেন পড়তে পড়তেই মরতে পারি।
</div>
</div>
</body>
</html>
Buscar
Categorías
Read More
Tech
খুব সহজে ইন্টারনেট ডাউনলোড ম্যানেজার এক্সটেনশন গুগল ক্রোম ব্রাউজারে এড করুন | Techtunes | টেকটিউনস
প্রোটেক্টেড ডিভিডি থেকে কপি/ব্যাকআপ DVD SHRINK দিয়ে দুঃসাহসী টিনটিন
By Nettumi 2026-09-25 03:51:54 0 21
Tech
FLEXILOAD SOFTWARE - ফ্লেক্সিলোড সফটওয়্যার | Techtunes | টেকটিউনস
!!বাঙ্গালী হইয়া জন্মাইছেন আবার নেটও নিছেন অথচ Paltalk ব্যবহার করেন নাই তা হইতে পারে না!! ফয়সল
By Nettumi 2026-09-25 15:58:46 0 12
Nulled
RealInvest v1.0 - Complete Real Estate Investment Platform PHP Script
RealInvest v1.0 – Complete Real Estate Investment Platform PHP Script Free Download. Real...
By Nettumi 2026-09-18 03:45:03 0 22
Hacking Course
কপি আইফোন চেনার উপায় কি? নকল আইফোন চেনার উপায় জানুন
অ্যাপল এর আইফোন এর জনপ্রিয়তা স্মার্টফোন জগতে সবচেয়ে বেশি। আমাদের দেশে আগের চেয়ে আইফোন এর...
By Nettumi 2026-09-25 09:59:13 0 41
Tech
উপায় ক্যাশ আউট ও সেন্ড মানি খরচ কত? - Banglatech24.com
ইউনাইটেড কমার্শিয়াল ব্যাংক (UCB) এর মোবাইল ব্যাংকিং সেবা, উপায় (Upay) দিনদিন জনপ্রিয় হয়ে...
By Nettumi 2026-09-25 10:19:19 0 19
‎ ‎ ‎
Nettumi https://nettumi.com