JQuery İle Basit Slider Yapımı

Kendi Kendinize

 Slider'e ait CSS kodları: stil.css

* {
    font: 10px/10px trebuchet, verdana
}
#IcerikNolar, #Icerikler { list-style: none; clear: both; }
#IcerikNolar li{
    width: 15px;
    height: 15px;
    background-color: crimson;
    color: #ffffff;
    margin: 2px;
    padding: 2px;
    float: left;
}

#Icerikler li {
    width: 620px;
    height: 315px;
    background-color: crimson;
    float: left;
    overflow: hidden;
    display: none; /*ilk basta gosterme */
}

  HTML ve JQuery Kodları:

 <link type="text/css" rel="stylesheet" href="stil.css" />
        <script type="text/javascript" src="jquery-1.10.2.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $("#Icerikler li:first").show();
               
                $("#IcerikNolar li").mouseover(function(){
                   
                   Tiklanan=$(this).index();
                   
                   $("#Icerikler li").hide();
                   //$("#Icerikler li").eq(Tiklanan).css("display", "block");
                   $("#Icerikler li").eq(Tiklanan).fadeIn("slow");
                });
            });
        </script>
    </head>
    <body>

        <ul id="Icerikler">
            <li><img src="resimler/1.jpg" width="620" height="315"/></li>
            <li><img src="resimler/2.jpg" width="620" height="315"/></li>
            <li><img src="resimler/3.jpg" width="620" height="315"/></li>
            <li><img src="resimler/5.jpg" width="620" height="315"/></li>
            <li><img src="resimler/6.jpg" width="620" height="315"/></li>
            <li>F</li>
            <li>G</li>
        </ul>
       
        <ul id="IcerikNolar">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>

  Sonuç:

JQuery İle Basit Slider Yapımı

Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...