Aslında birsürü var ben birkaç tane atacağım.
Slider 1:
Kod: <title>Ajax Haber Manşet-2</title> <FCK:meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style type="text/css"> /* Reset style */ * { margin:0; padding:0; word-break:break-all; } body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size:1em; } a { color:#0287CA; text-decoration:none; } a:hover { text-decoration:underline; } ul, li { list-style:none; } fieldset, img { border:none; } legend { display:none; } em, strong, cite, th { font-style:normal; font-weight:normal; } input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; } table { border-collapse:collapse; } html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/ /* iFocus style */ #ifocus { width:525px; height:245px; margin:20px; border:1px solid #DEDEDE; background:#F8F8F8; } #ifocus_pic { display:inline; position:relative; float:left; width:410px; height:225px; overflow:hidden; margin:10px 0 0 10px; } #ifocus_piclist { position:absolute; } #ifocus_piclist li { width:410px; height:225px; overflow:hidden; } #ifocus_piclist img { width:410px; height:225px; } #ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; } #ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); } #ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; } #ifocus_btn .current { background: url(images/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); } #ifocus_opdiv { position:absolute; left:0; bottom:0; width:410px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); } #ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; } #ifocus_tx .normal { display:none; } </style> <FCK:meta content="haber,manset,ajax,css,bedava,sitem," name="keywords" /> <FCK:meta content="Bedava Sitem Ve Diğer Tüm Siteler İçin" name="description" /> <script type="text/javascript">
function $(id) { return document.getElementById(id); }
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
function moveElement(elementID,final_x,final_y,interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y) {
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
function classNormal(iFocusBtnID,iFocusTxID){
var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
for(var i=0; i<iFocusBtns.length; i++) {
iFocusBtns[i].className='normal';
iFocusTxs[i].className='normal';
}
}
function classCurrent(iFocusBtnID,iFocusTxID,n){
var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
iFocusBtns[n].className='current';
iFocusTxs[n].className='current';
}
function iFocusChange() {
if(!$('ifocus')) return false;
$('ifocus').onmouseover = function(){atuokey = true};
$('ifocus').onmouseout = function(){atuokey = false};
var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
var listLength = iFocusBtns.length;
iFocusBtns[0].onmouseover = function() {
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (listLength>=2) {
iFocusBtns[1].onmouseover = function() {
moveElement('ifocus_piclist',0,-225,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',1);
}
}
if (listLength>=3) {
iFocusBtns[2].onmouseover = function() {
moveElement('ifocus_piclist',0,-450,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',2);
}
}
if (listLength>=4) {
iFocusBtns[3].onmouseover = function() {
moveElement('ifocus_piclist',0,-675,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',3);
}
}
}
setInterval('autoiFocus()',5000);
var atuokey = false;
function autoiFocus() {
if(!$('ifocus')) return false;
if(atuokey) return false;
var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
var listLength = focusBtnList.length;
for(var i=0; i<listLength; i++) {
if (focusBtnList[i].className == 'current') var currentNum = i;
}
if (currentNum==0&&listLength!=1 ){
moveElement('ifocus_piclist',0,-225,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',1);
}
if (currentNum==1&&listLength!=2 ){
moveElement('ifocus_piclist',0,-450,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',2);
}
if (currentNum==2&&listLength!=3 ){
moveElement('ifocus_piclist',0,-675,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',3);
}
if (currentNum==3 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (currentNum==1&&listLength==2 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (currentNum==2&&listLength==3 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
}
addLoadEvent(iFocusChange);
</script> <div align="center"> <div id="ifocus"> <div id="ifocus_pic"> <div style="left: 0pt; top: 0pt;" id="ifocus_piclist"> <ul> <li><a target="_blank" href="http://www.pcgazete.com/" _fcksavedurl="http://www.pcgazete.com/"><img alt="haber1" src="http://n1307.hizliresim.com/1c/x/qwu34.png" _fcksavedurl="http://n1307.hizliresim.com/1c/x/qwu34.png" /></a></li> <li><a target="_blank" href="http://www.pcgazete.com/" _fcksavedurl="http://www.pcgazete.com/"><img alt="haber 2 açıklama" src="http://n1307.hizliresim.com/1c/x/qwu34.png" _fcksavedurl="http://n1307.hizliresim.com/1c/x/qwu34.png" /></a></li> <li><a target="_blank" href="http://www.pcgazete.com/" _fcksavedurl="http://www.pcgazete.com/"><img alt="haber 3 açıklama" src="http://n1307.hizliresim.com/1c/x/qwu34.png" _fcksavedurl="http://n1307.hizliresim.com/1c/x/qwu34.png" /></a></li> <li><a target="_blank" href="http://www.pcgazete.com/" _fcksavedurl="http://www.pcgazete.com/"><img alt="haber 4 açıklama" src="http://n1307.hizliresim.com/1c/x/qwu34.png" _fcksavedurl="http://n1307.hizliresim.com/1c/x/qwu34.png" /></a></li> </ul> </div> <div id="ifocus_opdiv"> </div> <div id="ifocus_tx"> <ul> <li class="current">1. yazı içeriği</li> <li class="normal">2. Yazı İçeriği</li> <li class="normal">3. Yazı İçeriği</li> <li class="normal">4. yazı içeriği</li> </ul> </div> </div> <div id="ifocus_btn"> <ul> <li class="current"><img alt="" src="http://n1307.hizliresim.com/1c/x/qwu34.png" _fcksavedurl="http://n1307.hizliresim.com/1c/x/qwu34.png" /></li> <li class="normal"><img alt="" src="http://n1307.hizliresim.com/1c/x/qwu34.png" _fcksavedurl="http://n1307.hizliresim.com/1c/x/qwu34.png" /></li> <li class="normal"><img alt="" src="http://n1307.hizliresim.com/1c/x/qwu34.png" _fcksavedurl="http://n1307.hizliresim.com/1c/x/qwu34.png" /></li> <li class="normal"><img alt="" src="http://n1307.hizliresim.com/1c/x/qwu34.png" _fcksavedurl="http://n1307.hizliresim.com/1c/x/qwu34.png" /></li> </ul> </div> </div> </div> <br /> <p> </p> <p> </p> </meta> </meta> </meta>
Slider 2:
Kod:
<FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Number slideshow - simple and practical numbers image slideshow jQuery plugin(preload image and show loading animation)</title> <link href="css/number_slideshow.css" rel="stylesheet" type="text/css" /> <style type="text/css"> h2{ color: red; } pre{ padding: 4px; border: #F90 dotted 1px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/number_slideshow.js"></script> <script language="javascript" type="text/javascript">
$(function() {
$("#number_slideshow").number_slideshow({
slideshow_autoplay: 'enable',//enable disable
slideshow_time_interval: 3000,
slideshow_window_background_color: "#fff",
slideshow_window_padding: '1',
slideshow_window_width: '550',
slideshow_window_height: '332',
slideshow_border_size: '1',
slideshow_transition_speed: 500, //'normal','slow','fast' or numeral
slideshow_border_color: 'black',
slideshow_show_button: 'enable',//enable disable
slideshow_show_title: 'disable',//enable disable
slideshow_button_text_color: '#CCC',
slideshow_button_current_text_color: '#000',
slideshow_button_background_color: '#333',
slideshow_button_current_background_color: '#666',
slideshow_button_border_color: '#000',
slideshow_loading_gif: 'loading.gif',//loading pic, you can replace it.
slideshow_button_border_size: '1'
});
$("#number_slideshow1").number_slideshow({
slideshow_autoplay: 'enable',//enable disable
slideshow_time_interval: 5000,
slideshow_transition_speed: 'slow',//'normal','slow','fast' or numeral
slideshow_window_background_color: "#CCFFCC",
slideshow_window_padding: '0',
slideshow_window_width: '550',
slideshow_window_height: '332',
slideshow_button_current_text_color: '#fff',
slideshow_border_size: '0',
slideshow_border_color: '#006600',
slideshow_show_button: 'enable',//enable disable
slideshow_show_title: 'enable',//enable disable
slideshow_button_text_color: '#FFF',
slideshow_button_background_color: '#66CC00',
slideshow_button_current_background_color: '#006600',
slideshow_button_border_color: '#006600',
slideshow_loading_gif: 'loading.gif',//loading pic, you can replace it use youself gif.
slideshow_button_border_size: '0'
});
});
</script> <div id="showmsg"> </div> <div id="number_slideshow" class="number_slideshow"> <ul> <li><a href="#" _fcksavedurl="#"><img src="http://farm5.static.flickr.com/4127/5038574034_0fd2992492.jpg" _fcksavedurl="http://farm5.static.flickr.com/4127/5038574034_0fd2992492.jpg" width="407" height="301" alt="slideshow1" /></a></li> <li><a href="#" _fcksavedurl="#"><img src="http://farm5.static.flickr.com/4130/5026804650_f9fcfa8e56.jpg" _fcksavedurl="http://farm5.static.flickr.com/4130/5026804650_f9fcfa8e56.jpg" width="407" height="301" alt="slideshow2" /></a></li> <li><a href="#" _fcksavedurl="#"><img src="http://farm5.static.flickr.com/4109/5034953549_742bab63e8.jpg" _fcksavedurl="http://farm5.static.flickr.com/4109/5034953549_742bab63e8.jpg" width="407" height="301" alt="slideshow3" /></a></li> <li><a href="#" _fcksavedurl="#"><img src="http://farm5.static.flickr.com/4146/5037956979_0c66720a18.jpg" _fcksavedurl="http://farm5.static.flickr.com/4146/5037956979_0c66720a18.jpg" width="407" height="301" alt="slideshow4" /></a></li> </ul> <ul class="number_slideshow_nav"> <li><a href="#" _fcksavedurl="#">1</a></li> <li><a href="#" _fcksavedurl="#">2</a></li> <li><a href="#" _fcksavedurl="#">3</a></li> <li><a href="#" _fcksavedurl="#">4</a></li> </ul> <div style="clear: both"> </div> </div> <script>
// Copyright 2013 htmldrive.net Inc.
/**
* @project homepage: http://www.htmldrive.net/go/to/number-slideshow
* @project hescription: Number slideshow - simple and practical numbers image slideshow jQuery plugin.
* @author htmldrive.net
* @license http://www.apache.org/licenses/LICENSE-2.0
* More script and css style : htmldrive.net
*/
(function(a){
a.fn.number_slideshow=function(p){
var p=p||{};
var n=p&&p.slideshow_autoplay?p.slideshow_autoplay:"enable";
var o=p&&p.slideshow_time_interval?p.slideshow_time_interval:"5000";
var transition_speed=p&&p.slideshow_transition_speed?p.slideshow_transition_speed:"normal";
var button_current_text_color=p&&p.slideshow_button_current_text_color?p.slideshow_button_current_text_color:"#000";
var q=p&&p.slideshow_window_background_color?p.slideshow_window_background_color:"white";
var r=p&&p.slideshow_window_padding?p.slideshow_window_padding:"5";
var s=p&&p.slideshow_window_width?p.slideshow_window_width:"400";
var t=p&&p.slideshow_window_height?p.slideshow_window_height:"400";
var u=p&&p.slideshow_border_size?p.slideshow_border_size:"1";
var v=p&&p.slideshow_border_color?p.slideshow_border_color:"black";
var w=p&&p.slideshow_show_button?p.slideshow_show_button:"enable";
var H=p&&p.slideshow_show_title?p.slideshow_show_title:"enable";
var x=p&&p.slideshow_button_text_color?p.slideshow_button_text_color:"red";
var z=p&&p.slideshow_button_background_color?p.slideshow_button_background_color:"black";
var A=p&&p.slideshow_button_current_background_color?p.slideshow_button_current_background_color:"white";
var B=p&&p.slideshow_button_border_color?p.slideshow_button_border_color:"blue";
var C=p&&p.slideshow_button_border_size?p.slideshow_button_border_size:"2";
var s_l_g=p&&p.slideshow_loading_gif?p.slideshow_loading_gif:"loading.gif";
var first = false;
r += "px";
s += "px";
t += "px";
u += "px";
C += "px";
var D;
var E=0;
var F=a(this);
var G=F.find("ul:first").children("li").length;
if(F.find("ul").length==0||F.find("li").length==0){
a.append("Require content");
return null
}
F.show();
F.find("ul:first").children("li").children("a").children("img").css("width",s).css("height",t);
F.find("ul:first").css("background-image","url("+s_l_g+")").css("background-position","center center");
s_s_ul(F.find("ul:first"),r,s,t,u,v,q,z,x,s_l_g);
s_s_n(F.find(".number_slideshow_nav"),x,w,z,A,B,C);
F.find("ul:first").children("li").hide();
var img = new Image();
img.src = F.find("ul:first").children("li").eq(0).children("a").children("img").attr("src");
img.onload = function(){
if(first == false){
first = true;
play();
}
};
if(img.complete){
if(first == false){
first = true;
play();
}
}
F.find("ul:first").hover(function(){
clearTimeout(D);
},function(){
D=setTimeout(play,o);
});
F.find(".number_slideshow_nav").children("li").hover(
function(){
stop($(this));
},
function(){
}
);
function play(){
if(n=="enable"){
clearTimeout(D);
if(E >= G){
E = 0;
}
var speed = transition_speed;
F.find("ul:first").children("li").fadeOut(speed);
F.find("ul:first").children("li").eq(E).fadeIn(transition_speed);
F.find(".number_slideshow_nav").children("li").css("background-color",z);
F.find(".number_slideshow_nav").children("li").children("a").css("color",x);
F.find(".number_slideshow_nav").children("li").eq(E).css("background-color",A);
F.find(".number_slideshow_nav").children("li").eq(E).children("a").css("color",button_current_text_color);
E++;
if(E>=G){
E=0
}
D=setTimeout(play,o)
}else{
F.find("ul:first").children("li").eq(E).fadeIn();
}
}
function stop(a){
clearTimeout(D);
var b=a.parent().children().index(a);
if(b != (E-1)){
E=b+1;
F.find("ul:first").children("li").fadeOut();
F.find("ul:first").children("li").eq(b).fadeIn();
F.find(".number_slideshow_nav").children("li").css("background-color",z);
F.find(".number_slideshow_nav").children("li").eq(b).css("background-color",A)
}
}
function s_s_ul(a,b,c,d,e,f,g,h,i,l_g){
a.children("li").css("width",c).css("height",d);
if(H == 'enable'){
a.children("li").each(function(i){
a.children("li").eq(i).append("<p>"+a.children("li").eq(i).children("a").children("img").attr("alt")+"</p>");
});
}
a.children("li").children("p").css("background-color",h).css("color",i).css('width',parseInt(c)-10);
b=parseInt(b);
c=parseInt(c);
d=parseInt(d);
e=parseInt(e);
var h=c+e*2+b*2;
var i=d+e*2+b*2;
F.css("width",h);
F.css("height",i);
var j=d+"px";
var k=c+"px";
var l="border: "+f+" solid "+" "+e+"px; height:"+j+"; width:"+k+"; padding:"+b+"px; background-color:"+g+"; background-image:url("+l_g+");";
a.attr("style",l)
}
function s_s_n(b,c,d,e,f,g,h){
h=parseInt(h);
var j=b.children("li");
var a=j.children("a");
a.css("color",c);
var k="border: "+g+" solid "+" "+h+"px; background-color:"+e+";";
j.attr("style",k);
if(d!="enable"){
b.hide()
}
}
}
})(jQuery);
</script> <style type="text/css"> .number_slideshow{ line-height: 20px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; padding: 0px; margin: 0px; position: relative; display: none; } .number_slideshow .number_slideshow_nav{ filter: alpha(opacity=60); opacity: 0.6; padding: 0px; margin: 0px; position: absolute; bottom: 10px; right: 10px; } .number_slideshow .number_slideshow_nav li{ box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5); -o-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5); -khtml-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5); margin-left: 6px; position: relative; float: left; } .number_slideshow .number_slideshow_nav li a{ padding-left: 8px; padding-right: 8px; } .number_slideshow ul{ margin: 0px; background-position:center center; background-repeat: no-repeat; } .number_slideshow ul li{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -khtml-border-radius: 5px; padding: 0px; margin: 0px; list-style: none; position: absolute; } .number_slideshow ul li p{ margin: 0px; position: absolute; top: 0px; left: 0px; padding-left: 5px; padding-right: 5px; filter: alpha(opacity=60); opacity: 0.6; font-size: 13px; line-height: 23px; } .number_slideshow ul li a{ text-decoration: none; } .number_slideshow ul li a img{ border: none; } </style></meta>
Slider 3:
[/code]
<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> |