هناك الكثير من تقنيات العرض في الجافا سكريبت، ولكن لاحظ هذا الموقع  <a href="http://mckinney.com/">McKinney </a>وكيفية الحركه عليه بمنتهي السلاسه.
<h2>عارض الشرائح - (جي كويري سلايدر):</h2>
لمشاهده التنفيذ اضغط <a href="http://jonraasch.com/demo/fancy-slideshow-navigation">هنا</a>

لنبدأ معا في عمل هذا السلايدر أولا علينا إضافة بعض الملامح الأساسيه وهي عملdiv لكل شريحه وتسميتها بإسمها كالتالي:
[html]
<div id="slideshow">
<div id="slideshow-reel">
<div>
<h1>Slide 1</h1>
</div>
<div>
<h1>Slide 2</h1>
</div>
<div>
<h1>Slide 3</h1>
</div>
<div>
<h1>Slide 4</h1>
</div>
<div>
<h1>Slide 5</h1>
</div>
<div>
<h1>Slide 6</h1>
</div>
</div>
</div>
[/html]
قمنا بعمل الأن ستة شرائح والتي يمكن ملئها بأي محتوي نريده ولاان نضيف التالي في ملف css :
[html]
#slideshow {
    width: 900px;
    height: 500px;
    overflow: hidden;
    position: relative;
}

#slideshow-reel {
    width: 5400px;
    height: 450px;
    position: absolute;
    top: 0;
    left: 0;
}

#slideshow-reel .slide {
    width: 900px;
    height: 450px;
    float: left;
    background-color: gray;
}
[/html]
هنا، لقد حددنا أبعاد العرض، جنبا إلى جنب مع إخفاء الشرائح الأخرى في بكرة. لقد حددنا أيضا أبعاد البكرة : مع ست شرائح في 900 بكسل لكل منهما ، وحددنا الأبعاد لكافة الشرائح الفردية وقمت بتحريكهم الي اليسار لكي تملأ شاشه السلايدر.
<h1>الحركة الأساسية في عارض الصور:</h1>
والأن لنضيف بعض أكواد الجي كويري لإضافة تأشير الحركة علي عارض الصور
[html]
$(function() {
    function changeSlide( newSlide ) {
        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });
    }

    function nextSlide() {
        changeSlide( currSlide + 1 );
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1;

    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});
[/html]
قمنا بعمل دالة changeSlide () ، التي تقوم بتغير الشريحه. هذه الدالة لعمل فهرس للشريحه بجوار المعرض،
ثانيا قمنا بعمل فحص للتأكد من أن قيمة الشريحه التاليه ليست عالية جدا أو منخفضة لتكون في العارض.
وقمنا ببناء دالة nextSlide () ، الذي يطلق ببساطة changeSlide () لعرض الشريحة التالية في البكرة. ثم قمنا بتحديد وقت العرض مع setTimeout ().
<h2>التحريك الي اليمين والي اليسار:</h2>
والأن نقوم بعمل أزرار التحريك الي اليمين والي اليسار وزر متابعة العرض
[html]
<a id="slideshow-prev" href="#"></a>
<a id="slideshow-next" href="#"></a>
[/html]
وللتبسيط،لقد قمنا بإضافة علامة المتابعة إلى مصدر HTML.
لنقوم الأن بإضافة التأثيرات الخاصه بهذه اللينكات الداخليه لعرض السابق او التالي
[html]
#slideshow-prev, #slideshow-next {
    display: block;
    position: absolute;
    top: 190px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 28px 21px;
    border-color: transparent;
    outline: none;
}

#slideshow-prev:hover, #slideshow-next:hover {
    opacity: .5;
    filter: alpha(opacity=50);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

#slideshow-prev {
    left: 0;
    border-right-color: #fff;
}

#slideshow-next {
    right: 0;
    border-left-color: #fff;
}
[/html]
أخيرا، دعونا نبني ملف الجافا سكريبت لدينا:
[html]
$(function() {
    function changeSlide( newSlide ) {
        // cancel any timeout
        clearTimeout( slideTimeout );

        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // hide / show the arrows depending on which frame it's on
            if ( currSlide == 0 ) $slidePrevNav.hide();
            else $slidePrevNav.show();

            if ( currSlide == maxSlide ) $slideNextNav.hide();
            else $slideNexNav.show();

            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });

        // animate the navigation indicator
        $activeNavItem.animate({
            left : currSlide * 150
        }, 400, 'swing');
    }

    function nextSlide() {
        changeSlide( currSlide + 1 );
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1,
    $slidePrevNav = $slideshow.find('#slideshow-prev'),
    $slideNextNav = $slideshow.find('#slideshow-next');

    // set navigation click events

    // left arrow
    $slidePrevNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide - 1 );
    });

    // right arrow
    $slideNextNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide + 1 );
    });

    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});
[/html]
في هذه الدوال ، قمنا بعمل activeSlideshow إلى false ، مما يؤدي إلى تعطيل الحركة التلقائية للبكرة. وهذا يوفر تجربة أفضل للمستخدم من خلال السماح للمستخدم التحكم بالعرض يدويا. ثمقمنا بعمل تحريك الشريحة السابقة أو التالية باستخدام changeSlide (). ثم قمنا بعمل clearTimeout (). هذا يعمل جنبا إلى جنب مع القيمة activeSlideshow، أي إلغاء التكرار يتدلى من setTimeout.

ثم قمنا بتعريف بعض الرموز لإخفاء وإظهار التنقل من خلال السهم.
<h2>لتحريك عارض الصور من أسفل:</h2>
وهذا هو الكود الجي كويري
[html]
$(function() {
    function changeSlide( newSlide ) {
        // cancel any timeout
        clearTimeout( slideTimeout );

        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // hide / show the arrows depending on which frame it's on
            if ( currSlide == 0 ) $slidePrevNav.hide();
            else $slidePrevNav.show();

            if ( currSlide == maxSlide ) $slideNextNav.hide();
            else $slideNextNav.show();

            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });

        // animate the navigation indicator
        $activeNavItem.animate({
            left : currSlide * 150
        }, 400, 'swing');
    }

    function nextSlide() {
        changeSlide( currSlide + 1 );
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1,
    $slidePrevNav = $slideshow.find('#slideshow-prev'),
    $slideNextNav = $slideshow.find('#slideshow-next'),
    $activeNavItem = $slideshow.find('#active-nav-item');

    // set navigation click events

    // left arrow
    $slidePrevNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide - 1 );
    });

    // right arrow
    $slideNextNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide + 1 );
    });

    // main navigation
    $slideshow.find('#slideshow-nav a.nav-item').click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( $(this).index() );
    });

    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});
[/html]
أولا، لقد قمنا بتضمين الرسوم المتحركة الثانية في changeSlide ()، وهذه المرة لتحريك المؤشر النشط في الملاحة، ثم كررنا الخطوة السابقه والفرق الرئيسي هو أننا نريد أن نقله 150px فقط لكل شريحة.

ثم قمنا بعمل  تعطيل الحركة التلقائية، وتحديد activeSlideshow إلى false.، وأضفنا changeSlide ()،
والأن إكتملت الحركة الملاحية لدينا وأصبح عارض الصور جاهز لينول إعجاب الزوار