شرح عمل سلايد شو بسيط بال jquery فقط بدون إضافات

السلام عليكم ورحمة الله وبركاته

حياكم الله احبتي في الله .. اليوم مع درس جديد حول الجيكويري jQuery

اليوم ان شاء الله سنتعرف او بالاحرى سنتعلم كيف نصمم ونبرمج سلايد شو Slide Show

ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

الطريقة سهلة جداا .. تابعوا الاكواد التالية :

كود html

<!DOCTYPE html>
<html dir="rtl">
<head>
    <meta charset="utf-8" />
    <title>slide show</title>

<style type="text/css">
*{ padding:0; margin:0; outline:0;}
h3{
    padding: 10px 0px;
    background: rgba(33, 44, 55, .7);
    width: 418px;
    border-bottom: 2px solid rgba(225, 33, 33, .8);
    color: #fff;
    font: 13px tahoma
}
#slideshow {
    padding: 5px;
    width: 400px;
    height:267px;
    border: solid 1px #ccc;
    box-shadow: 0px 0px 5px #999;
    margin: 5px;
}
.img_slide li {
    display: none;
    list-style: none;
    float: right;
}
.img_slidde li img {
    padding: 5px;
}
.slideshow {
margin-right: 0px auto;
}
.slideshow li {
    list-style: none;
    display: inline-block;
    width: 85px;
    height: 57px;
    padding: 3px;
}
.slideshow li img {
    cursor: pointer;
}
.active {
    border: solid 1px #ccc;
}

</style>



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

<script src="js/plugin.js"></script>
<title>Slideshow</title>
</head>
<body>
    <center>
        <h3>سلايد شو</h3>
        <div id="slideshow">
            <ul class="img_slide">
                <li id="1"><img src="img/1.gif" width="400" height="267" /></li>
                <li id="2"><img src="img/2.jpg" width="400" height="267" /></li>
                <li id="3"><img src="img/3.jpg" width="400" height="267" /></li>
                <li id="4"><img src="img/4.gif" width="400" height="267" /></li>
            </ul>
        </div>

        <ul class="slideshow">
            <li class="active" id="1"><img src="img/1.gif" height="57" width="85" /></li>
            <li id="2"><img src="img/2.jpg" height="57" width="85" /></li>
            <li id="3"><img src="img/3.jpg" height="57" width="85" /></li>
            <li id="4"><img src="img/4.gif" height="57" width="85" /></li>
        </ul>
    </center>
</body>
</html>

كودjQuery

$(document).ready(function(){
    $(".img_slide li").first().fadeIn(); // هذا الكود لتفعيل أول صورة فى ال li

    $(".slideshow > li") .click(function(){ //هذا الكود عند الضغط على اى صورة
        var i = $(".slideshow > li").index(this); // هذا الكود يرتب ال li بداية من 0
        var id = $(this).attr('id'); // هذا الكود يأخذ رقم ال id الرقم الموجود بداخلة

        if(i == 0){ // هذا شرط لأول عنصر من عناصر ال li لاحظوا يبدأ ب 0 والباقى هكذا

            $(".img_slide li").hide();
            $(".img_slide li[id="+id+"]").fadeIn();

        }else if (i == 1){

            $(".img_slide li").hide();
            $(".img_slide li[id="+id+"]").fadeIn();

        }else if (i == 2){

            $(".img_slide li").hide();
            $(".img_slide li[id="+id+"]").fadeIn();

        }else if (i == 3){

            $(".img_slide li").hide();
            $(".img_slide li[id="+id+"]").fadeIn();

        }

        $(".slideshow > li") .removeAttr("class"); //هنا لحذف الكلاس الى سمناة active
        $(this) .addClass("active"); //هنا لإضافة الكلاس على الصورة المضغوط عليها

        return false;
    });
});

الى هنا استودعكم الله والسلام عليكم

الدرس منقول من هنا : منتدى ترايدنت

بقلم محمد طه

محمد طه مدون مغربي مهتم ببرمجة وتصميم المواقع ومهووس بتعلم كل جديد في مجال البرمجة والتصميم واحب نشر ما اعرفه ليتعلم منه الناس باسلوبي الخاص

مدونة ملك العرب التعليمية

الثلاثاء، 24 مارس 2015

شرح عمل سلايد شو بسيط بال jquery فقط بدون إضافات

بقلم محمد طه