[CSS][JavaScript]automatyczny slider Opcje

[-wysoki_22-]

Witam, posiadam szablon strony html5, który kupiłem i dostosowałem. Jestem można szczerze powiedzieć zielony w sprawie programowania, ale poradziłem sobie z dostosowaniem do swoich potrzeb.
Strona posiada jako tło zdjęcia oraz slider, którym ręcznie można zmieniać tła strony.
Moje pytanie, czy można w dosyć prosty sposób przerobić na automatyczną zmianę zdjęć co określony czas np 5s, czy jest to wyższa szkoła jazdy??
Z góry dziękuje za odpowiedź.
mogę wkleić elementy css lub js jeśli trzeba

[szczemp]

Domyślam się, że ręcznie zmieniać tło oznacza, że po kliknięciu w jakiś element tło się zmieni. I pewnie jest to napisane w java scripcie lub jakimś jego frameworku. Dla kogoś, kto już widział i napisał coś w javascripcie nie powinno to być trudne. Sprowadzi się to do zmiany kliknięcia na jakieś odliczanie czasu. Chociaż to może zależeć od skomplikowania całego kodu tego slajdera.
Pokaż kod odpowiedzialny za to, a łatwiej będzie pomóc.

[-wysoki_22-]

plik script.js wygląda tak

CODE

include("js/jquery.color.js");
include("js/jquery.backgroundpos.js");
include("js/jquery.easing.js");
include("js/jquery.mousewheel.js");
include("js/jquery.fancybox-1.3.4.pack.js");
include("js/jquery-ui-1.8.11.custom.min.js");
include("js/cScroll.js");
include("js/googleMap.js");
include("js/superfish.js");
include("js/switcher.js");
include("js/bgStretch.js");
include("js/sImg.js");
include("js/forms.js");
include("js/MathUtils.js");
include("js/sprites.js");
include("js/forms.js");

function include(url) {
document.write('<script src="' + url + '"></script>');
}
var MSIE = false,
content, defColor;

function addAllListeners() {
$('.soc_icons>li>a').hover(
function(){
$(this).children('img').stop().animate({'top':'-73px'},300,'easeOutExpo');
},
function(){
$(this).children('img').stop().animate({'top':'0px'},500,'easeOutCubic');
}
);
$('.prev').hover(
function(){
if (!MSIE) {
$(this).children('span').stop().animate({'backgroundPosition':'right center'},300,'easeOutExpo');
} else {
$(this).children('span').stop().css({'backgroundPosition':'right center'});
}
},
function(){
if (!MSIE) {
$(this).children('span').stop().animate({'backgroundPosition':'left center'},500,'easeOutCubic');
} else {
$(this).children('span').stop().css({'backgroundPosition':'left center'});
}
}
);
$('.next').hover(
function(){
if (!MSIE) {
$(this).children('span').stop().animate({'backgroundPosition':'left center'},300,'easeOutExpo');
} else {
$(this).children('span').stop().css({'backgroundPosition':'left center'});
}
},
function(){
if (!MSIE) {
$(this).children('span').stop().animate({'backgroundPosition':'right center'},500,'easeOutCubic');
} else {
$(this).children('span').stop().css({'backgroundPosition':'right center'})
}
}
);
$('.scrollUp').hover(
function(){
$(this).stop().animate({'backgroundPosition':'center bottom'},300,'easeOutExpo');
},
function(){
$(this).stop().animate({'backgroundPosition':'center top'},500,'easeOutCubic');
}
);
$('.scrollDown').hover(
function(){
$(this).stop().animate({'backgroundPosition':'center top'},300,'easeOutExpo');
},
function(){
$(this).stop().animate({'backgroundPosition':'center bottom'},500,'easeOutCubic');
}
);
$('.list2>li>a,.list3>li>a')
.find('strong').css('top','200px').end()
.hover(
function(){
if (!MSIE){
$(this).children('.sitem_over').css({display:'block',opacity:'0'}).stop().animate({'opacity':1}).end()
.find('strong').css({'opacity':0}).stop().animate({'opacity':1,'top':'0'},350,'easeInOutExpo');
} else {
$(this).children('.sitem_over').stop().show().end()
.find('strong').stop().show().css({'top':'0'});
}
},
function(){
if (!MSIE){
$(this).children('.sitem_over').stop().animate({'opacity':0},1000,'easeOutQuad',function(){$(this).children('.sitem_over').css({display:'none'})}).end()
.find('strong').stop().animate({'opacity':0,'top':'200px'},1000,'easeOutQuad');
} else {
$(this).children('.sitem_over').stop().hide().end()
.find('strong').stop().hide();
}
}
);
var val1 = $('.list2>li>div>h3').css('color');
var val2 = $('.list2>li>div>p').css('color');
$('.list2>li').hover(
function(){
$(this).children('div').stop().animate({'backgroundPosition':'center bottom'},300,'easeOutExpo').end()
.find('>div>h3').stop().animate({'color':'#fff'},300,'easeOutExpo').end()
.find('>div>p').stop().animate({'color':'#becd5a'},300,'easeOutExpo').end()
},
function(){
$(this).children('div').stop().animate({'backgroundPosition':'center top'},600,'easeOutCubic').end()
.find('>div>h3').stop().animate({'color':val1},600,'easeOutCubic').end()
.find('>div>p').stop().animate({'color':val2},600,'easeOutCubic')
}
);
}

$(document).ready(ON_READY);
function ON_READY() {
/*SUPERFISH MENU*/
$('.menu #menu').superfish({
delay: 800,
animation: {
opacity: 'show'
},
speed: 'slow',
autoArrows: false,
dropShadows: false
});
}

function showSplash(){
content.find('>ul').stop().animate({'height':'0'},800,'easeOutExpo');
}

function hideSplash(){
content.find('>ul').stop().animate({'height':'100%'},800,'easeOutExpo');
}

function hideSplashQ(){
content.find('>ul').css({'height':'100%'});
}

function ON_LOAD(){
MSIE = ($.browser.msie) && ($.browser.version <= 8);
$('.spinner').fadeOut();

$('.readMore').sprites({
method:'gStretch',
hover: true
});

$('.list2>li>a,.list3>li>a').attr('rel','appendix')
.prepend('<span class="sitem_over"><strong></strong></span>')
$('.list2>li>a,.list3>li>a').fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'centerOnScroll': true
});

$('.scroll').cScroll({
duration: 500,
easing: 'easeOutExpo',
step:'80px'
});
$('.scrollUp').click(function(){
$('.scroll').cScroll('up')
return false;
});
$('.scrollDown').click(function(){
$('.scroll').cScroll('down')
return false;
});

//content switch
content = $('#content');
content.tabs({
show:0,
preFu:function(_){
_.li.css({'visibility':'hidden'});
hideSplashQ();
},
actFu:function(_){
if(_.curr){
if (_.n == 0){
showSplash();
} else {
hideSplash();
}
_.curr
.css({'top':'1300px','visibility':'visible'}).stop(true).delay(400).show().animate({'top':'30px'},{duration:1000,easing:'easeOutExpo'});
}
if(_.prev){
_.prev
.show().stop(true).animate({'top':'-1300px'},{duration:600,easing:'easeInExpo',complete:function(){
if (_.prev){
_.prev.css({'visibility':'hidden'});
}
}
});
}
}
});
defColor = $('#menu>li>a').eq(0).css('color');
var nav = $('.menu');
nav.navs({
useHash:true,
defHash: '#!/page_home',
hoverIn:function(li){
$('>a', li).stop().animate({color: '#fff'},250,'easeOutExpo');
$('>strong',li).stop().animate({'top':'0px','height':'100%'},150,'easeOutCubic');
},
hoverOut:function(li){
if ((!li.hasClass('with_ul')) || (!li.hasClass('sfHover'))) {
$('>a', li).stop().animate({color: defColor},700,'easeOutCubic');
$('>strong',li).stop().animate({'top':'23px','height':'0'},700,'easeOutCubic');
}
}
})
.navs(function(n){
$('#content').tabs(n);
});

setTimeout(function(){
$('#bgStretch').bgStretch({
align:'leftTop',
autoplay: false,
navs:$('.pagin').navs({})
})
.sImg({
sleep: 1000,
spinner:$('<div class="spinner spinner_bg"></div>').css({opacity:1}).stop().hide(3000)
});
var img=0;
var num=$('.pagin li').length-1;
$('.navbox p').text((img+1)+'/'+$('.pagin li').length);
$('.prev').click(function(){
img=img-1;
if (img<0) img=img+num+1;
$.when($('#bgStretch img')).then(function(){
$('.pagin li a').eq(img).click();
})
$('.navbox p').text((img+1)+'/'+$('.pagin li').length);
return false
});
$('.next').click(function(){
img=img+1;
if (img>num) img=img-num-1;
$.when($('#bgStretch img')).then(function(){
$('.pagin li a').eq(img).click();
})
$('.navbox p').text((img+1)+'/'+$('.pagin li').length);
return false
});
},0);

setTimeout(function(){ $('body').css({'overflow':'visible'}); },300);
addAllListeners();

$(window).trigger('resize');
}

$(window).resize(function (){
if (content) content.stop().animate({'top':(windowH()-content.height())*.5},500,'easeOutCubic');
});

function listen(evnt, elem, func) {
if (elem.addEventListener) // W3C DOM
elem.addEventListener(evnt,func,false);
else if (elem.attachEvent) { // IE DOM
var r = elem.attachEvent("on"+evnt, func);
return r;
}
}
listen("load", window, ON_LOAD);

[-wysoki_22-]

a początek strony (index.html) tak

CODE

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href='images/favicon.ico' type='image/x-icon' rel='shortcut icon'>
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="bgStretch"> <img src="images/bg_pic1.jpg" alt> </div>
<div id="glob">
<div class="spinner"></div>
<div class="pagin">
<ul>
<li><a href="images/bg_pic1.jpg"></a></li>
<li><a href="images/bg_pic2.jpg"></a></li>
<li><a href="images/bg_pic3.jpg"></a></li>
<li><a href="images/bg_pic4.jpg"></a></li>
<li><a href="images/bg_pic5.jpg"></a></li>
<li><a href="images/bg_pic6.jpg"></a></li>
</ul>
</div>
<div class="bgNav">
<a href="#" class="prev"><span></span></a>
<a href="#" class="next"><span></span></a>
</div

[dzikiwaz]

Powinno zadziałać.


$(window).load(function() {
$('#slider').nivoSlider({
animSpeed: 500, // Slide transition speed
pauseTime: 6000 // How long each slide will show
});

[-wysoki_22-]

hmm, a gdzie to mam wkleić - w pliku script, obojętnie gdzie?

[-wysoki_22-]

bardzo prosze o pomoc w powyższym temacie? mam w końcu już prawie skończoną stronę i chciałbym zrobić to tak jak opisane powyżej. Pomoże ktoś(IMG:style_emoticons/default/questionmark.gif)