Forum'da ara:
Ara


Yazar Mesaj
Mesaj07.12.2012, 19:59 (UTC)    
Mesaj konusu: Yardım

Arkadaşlar comlu sitelerde foto albümleri olurya resimlere tıklayınca sağa sola kaydırma oluyor resimler arasında bu kodu bana yollaya bilecekmisiniz
Mesaj08.12.2012, 08:33 (UTC)    
Mesaj konusu:

Sanırım sitenize slider eklemek istiyorsunuz.
Size 2 farklı seçenek sunucağım.


1-) Slider
Kod:
<!--ibrahimahimansetkoduBasi--> <style type="text/css"> #slider {     width: 600px;     height: 200px;     margin: 40px auto 0;     overflow: visible;     background-color: #362c30;     border: 10px solid #362c30;     -moz-transition: all 150ms ease-in;     -webkit-transition: all 150ms ease-in;     -o-transition: all 150ms ease-in;     position: relative; }   #mask {     overflow: hidden; }   #slider:hover {     background-color: #fff;     border: 10px solid #ddd; }   #slider:hover #pause {     opacity: 1; }   #slider:hover #progress {     background-color: rgba(255,255,255,0.0); }   #slider:hover ul, #slider:hover #progress, #slider:hover #overlay {     -moz-animation-play-state: paused;     -webkit-animation-play-state: paused; }   #pause {     width: 600px;     height: 200px;     position: absolute;     top: 0;     opacity: 0;     background-image: url(http://img.webme.com/pic/i/ibrahim-ahi/ibrahimahi-manset-alani.png);     background-position: 566px 10px;     background-repeat: no-repeat;     pointer-events: none;     -moz-transition: all 150ms ease-in;     -webkit-transition: all 150ms ease-in;     -o-transition: all 150ms ease-in; }   #progress {     width: 1px;     height: 1px;     background-color: #ffd000;     -moz-animation: progress 18s infinite;     -webkit-animation: progress 18s infinite;     position: relative;     top: -1px;     -moz-transition: all 150ms ease-in;     -webkit-transition: all 150ms ease-in;     -o-transition: all 150ms ease-in; }   #overlay {     width: 600px;     height: 200px;     position: absolute;     top: 0;     background-image: url(http://img.webme.com/pic/i/ibrahim-ahi/ibrahimahi.png);     background-position: center;     background-repeat: no-repeat;     pointer-events: none;     -moz-transition: all 150ms ease-in;     -webkit-transition: all 150ms ease-in;     -o-transition: all 150ms ease-in;     opacity: 0.5;     -moz-animation: overlay-fade 18s infinite;     -webkit-animation: overlay-fade 18s infinite; }   #slider ul {     width: 2400px;     list-style: none;     padding: 0;     margin: 0;     -moz-animation: slide-animation 18s infinite;     -webkit-animation: slide-animation 18s infinite;     position: relative;     left: 0px; }   #slider li {     display: inline;     width: 600px;     height: 200px;     margin: 0;     padding: 0;     float: left;     position: relative;     background-image: url(http://img.webme.com/pic/i/ibrahim-ahi/ibrahimahi-yukleniyor.gif);     background-position: 50% 50%;     background-repeat: no-repeat; }   #slider li:last-of-type {     background-color: #362c30; }   #slider li a {     display: block;     text-decoration: none; }   #slider li span {     display: block;     width: 560px;     padding: 15px 20px;     position: absolute;     bottom: 0;     left: 0;     background-color: rgba(54,44,48,0.6);     border-top: 1px solid #362c30;     text-shadow: 1px 1px 1px #362c30;     pointer-events: none;     text-align: left; }   #slider-shadow {     width: 100%;     height: 260px;     background-image: url(http://img.webme.com/pic/i/ibrahim-ahi/slider-shadow.png);     background-position: center bottom;     background-repeat: no-repeat;     margin: 10px auto 0; }   @-webkit-keyframes slide-animation { 0% {opacity:0;} 2% {opacity:1;} 20% {left:0px; opacity:1;} 22.5% {opacity:0.6;} 25% {left:-600px; opacity:1;} 45% {left:-600px; opacity:1;} 47.5% {opacity:0.6;} 50% {left:-1200px; opacity:1;} 70% {left:-1200px; opacity:1;} 72.5% {opacity:0.6;} 75% {left:-1800px; opacity:1;} 95% {opacity:1;} 98% {left:-1800px; opacity:0;} 100% {left:0px; opacity:0;} } @-moz-keyframes slide-animation { 0% {opacity:0;} 2% {opacity:1;} 20% {left:0px; opacity:1;} 22.5% {opacity:0.6;} 25% {left:-600px; opacity:1;} 45% {left:-600px; opacity:1;} 47.5% {opacity:0.6;} 50% {left:-1200px; opacity:1;} 70% {left:-1200px; opacity:1;} 72.5% {opacity:0.6;} 75% {left:-1800px; opacity:1;} 95% {opacity:1;} 98% {left:-1800px; opacity:0;} 100% {left:0px; opacity:0;} } @-webkit-keyframes progress { 0% {width:0px; opacity:0;} 2% {width:0px; opacity:1;} 20% {width:600px; opacity:1;} 22.5% {width:600px; opacity:0;} 22.59% {width:0px;} 25% {width:0px; opacity:1;} 45% {width:600px; opacity:1;} 47.5% {width:600px; opacity:0;} 47.59% {width:0px;} 50% {width:0px; opacity:1;} 70% {width:600px; opacity:1;} 72.5% {width:600px; opacity:0;} 72.59% {width:0px;} 75% {width:0px; opacity:1;} 95% {width:600px; opacity:1;} 98% {width:600px; opacity:0;} 100% {width:0px; opacity:0;} } @-moz-keyframes progress { 0% {width:0px; opacity:0;} 2% {width:0px; opacity:1;} 20% {width:600px; opacity:1;} 22.5% {width:600px; opacity:0;} 22.59% {width:0px;} 25% {width:0px; opacity:1;} 45% {width:600px; opacity:1;} 47.5% {width:600px; opacity:0;} 47.59% {width:0px;} 50% {width:0px; opacity:1;} 70% {width:600px; opacity:1;} 72.5% {width:600px; opacity:0;} 72.59% {width:0px;} 75% {width:0px; opacity:1;} 95% {width:600px; opacity:1;} 98% {width:600px; opacity:0;} 100% {width:0px; opacity:0;} } @-webkit-keyframes overlay-fade { 0% {opacity:0;} 2% {opacity:0.5;} 95% {opacity:0.5;} 98% {opacity:0;} 100% {opacity:0;} } @-moz-keyframes overlay-fade { 0% {opacity:0;} 2% {opacity:0.5;} 95% {opacity:0.5;} 98% {opacity:0;} 100% {opacity:0;} }   #slider ul li span h2 {     font-size: 24px;     line-height: 24px;     color: #fff;     font-weight: normal;     font-family: 'Communist-Regular';     text-shadow: 1px 1px 1px #362c30; }  </style>
<div id="slider-shadow">
<div id="slider">
<div id="mask">
<ul>
    <li><a href="#" title="Manşetler D&uuml;zenleniyorrr"><img src="http://img.webme.com/pic/i/ibrahim-ahi/haber1.png" alt="" /></a><span>
    <h2>BURAYA A&Ccedil;IKLAMA</h2>
    </span></li>
    <li><a href="#" title="Buraya Bişiler Yazacam"><img src="http://img.webme.com/pic/i/ibrahim-ahi/haber2.png" alt="" /></a>          <span>
    <h2>BURAYA A&Ccedil;IKLAMA</h2>
    </span></li>
    <li><a href="#" title="Buraya Başlık Yazacam &lt;img src=" smilies.webme.com="" smiles="" border="0">&quot;&gt;<img src="http://img.webme.com/pic/i/ibrahim-ahi/haber3.png" alt="" /></a></li>
    <li><a href="#" title="Buryada Bişiler Gelecek"><img src="http://img.webme.com/pic/i/ibrahim-ahi/haber3.png" alt="" /></a></li>
</ul>
</div>
<div id="progress">&nbsp;</div>
<div id="overlay">&nbsp;</div>
<div id="pause">&nbsp;</div>
</div>
</div>
<!--ibrahimahimansetkoduSonu-->


2-) Slider
Kod:
<script type="text/javascript" src="http://img5.xooimage.com/files/d/e/5/jquery-2--f80ba5.js"></script><script type="text/javascript" src="http://img25.xooimage.com/files/c/d/0/easyslider1.5-11fb25a.js"></script><script type="text/javascript">
        $(document).ready(function(){   
            $("#slider").easySlider({
                controlsBefore:    '<p id="controls">',
                controlsAfter:    '</p>',
                auto: true,
                continuous: true
            });
            $("#slider2").easySlider({
                controlsBefore:    '<p id="controls2">',
                controlsAfter:    '</p>',       
                prevId: 'prevBtn2',
                nextId: 'nextBtn2'   
            });           
        });   
    </script><style type="text/css">                img{border:none;}            #container2{             margin:0 auto;          position:relative;          text-align:left;          width:696px;          background:#fff;                 margin-bottom:2em;          }                          #content2{          position:relative;          }              /* Easy Slider */       #slider{}         #slider ul, #slider li, #slider2 ul, #slider2 li{          margin:0;          padding:0;          list-style:none;          }      #slider li, #slider2 li{          /*              define width and height of list item (slide)              entire slider area will adjust according to the parameters provided here          */          width:553px;          height:241px;          overflow:hidden;          }          #slider2 li{          background:#f1f1f1;          }             #slider2 li h2{          margin:0 20px;          padding-top:20px;          }         #slider2 li p{          margin:20px;          }                                      p#controls, p#controls2{          margin:0;          position:relative;          }           #prevBtn, #nextBtn, #prevBtn2, #nextBtn2{          display:block;          margin:0;          overflow:hidden;          text-indent:-8000px;                 width:60px;          height:75px;          position:absolute;          left: 0px;          top:-160px;          }         #nextBtn, #nextBtn2{          left:493px;          }                                                             #prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{          display:block;          width:60px;          height:75px;            background:url('http://img.webme.com/pic/o/osmantalay/left_manset.png') no-repeat 0 0;             }         #nextBtn a, #nextBtn2 a{          background:url('http://img.webme.com/pic/o/osmantalay/right_manset.png') no-repeat 0 0;             }                                                  /* // Easy Slider */</style> <div id="container2"> <div id="content2"> <div id="slider"> <ul>     <li><a href="#" _fcksavedurl="#">      <img alt=" " src="http://www.spurcus.comli.com/imagenes/entradas/begone2.jpg" _fcksavedurl="http://www.spurcus.comli.com/imagenes/entradas/begone2.jpg" width="553" height="241" /></a></li>     <li><a href="#" _fcksavedurl="#">      <img alt="Css Template Preview" src="http://img27.xooimage.com/files/5/2/f/02-15766a0.jpg" _fcksavedurl="http://img27.xooimage.com/files/5/2/f/02-15766a0.jpg" width="696" height="241" /></a></li>     <li><a href="h#" _fcksavedurl="h#">      <img alt="Css Template Preview" src="http://img43.xooimage.com/files/0/f/9/03-15766a3.jpg" _fcksavedurl="http://img43.xooimage.com/files/0/f/9/03-15766a3.jpg" width="696" height="241" /></a></li>     <li><a href="#" _fcksavedurl="#">      <img alt="Css Template Preview" src="http://img43.xooimage.com/files/5/7/9/04-15766a5.jpg" _fcksavedurl="http://img43.xooimage.com/files/5/7/9/04-15766a5.jpg" width="696" height="241" /></a></li>     <li><a href="#" _fcksavedurl="#">      <img alt="Css Template Preview" src="http://img25.xooimage.com/files/1/2/b/05-15766a7.jpg" _fcksavedurl="http://img25.xooimage.com/files/1/2/b/05-15766a7.jpg" width="696" height="241" /></a></li> </ul> </div></div></div>


İyi forumlar...
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu