-
gomerc
Uzman Üye
|
08.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üzenleniyorrr"><img src="http://img.webme.com/pic/i/ibrahim-ahi/haber1.png" alt="" /></a><span>
<h2>BURAYA AÇ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ÇIKLAMA</h2>
</span></li>
<li><a href="#" title="Buraya Başlık Yazacam <img src=" smilies.webme.com="" smiles="" border="0">"><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"> </div>
<div id="overlay"> </div>
<div id="pause"> </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... |
|