Witam
Poszukuję rozwiązania jak w prosty sposób zrobić "rotator" w x/html
Chciałbym aby co 10 sekund wyświetlała się inna grafika BEZ ponownego wczytywania całej strony
Pełna wersja: [HTML] Wyświetlanie innej treści co 10 sek
Słabo "poszukujesz" Googe.pl => javascript slider
Musisz dodać odrobinkę js Link
A może taki skrypt ktoś ma:
Cytat(zagi195 @ 3.06.2010, 17:16:48 ) 
A może taki skrypt ktoś ma:
Google.pl ma. Jeszcze raz: javascript slider. Poszukaj sobie.
Ciężko pokazać wszystkie sposoby wyświetlania tego co oczekujesz zastosuj się do porad użytkownika pedro84
Szukałem, ale takiego nie mogę znaleźć
Cytat(zagi195 @ 3.06.2010, 18:38:48 )
Szukałem, ale takiego nie mogę znaleźć
Chyba sobie kpisz?
Cytat(zagi195 @ 3.06.2010, 18:38:48 )
Szukałem, ale takiego nie mogę znaleźć
Ale w jakim sensie ? bo wiesz na pewno są tam różne warianty które można zmodyfikować wygląd styl pod swoje upodobania ? ciężko znaleźć coś co można od razu wrzucić na serwer i gra gitara .
Cytat(zagi195 @ 3.06.2010, 18:38:48 )
Szukałem, ale takiego nie mogę znaleźć
http://css-tricks.com/javascript-page-slider-roundup/
znalezione pod hasłem "Javascript Slider" na pierwszej stronie...
No dobra znalazł ładny skrypcik 
Tylko, że gdy się przesuwają w nim bannery, to jak dojdzie do ostatniego to się zatrzymuje zamiast od nowa pokazywać
Tutaj kod pliku html
Tylko, że gdy się przesuwają w nim bannery, to jak dojdzie do ostatniego to się zatrzymuje zamiast od nowa pokazywaćTutaj kod pliku html
Cytat
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>DD Carusel. Test whis display:none;</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/stepcarousel.js"></script>
<style type="text/css">
.stepcarousel{
position: relative; /*leave this value alone*/
border: 1px solid black;
overflow: scroll; /*leave this value alone*/
width: 468px; /*Width of Carousel Viewer itself*/
height: 60px; /*Height should enough to fit largest content's height*/
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
width: 850px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
</style>
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true , moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:false},
defaultbuttons: {enable: false, moveby: 1, leftnav: ['img/317e0s5.gif', -5, 80], rightnav: ['img/33o7di8.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel">
<img src="img/1.gif" alt="" width="468" height="60" />
</div>
<div class="panel">
<img src="img/2.gif" alt="" width="468" height="60" />
</div>
<div class="panel">
<img src="img/3.gif" alt="" width="468" height="60" />
</div>
<div class="panel">
<img src="img/4.gif" alt="" width="468" height="60" />
</div>
<div class="panel">
<img src="img/5.png" alt="" width="468" height="60" />
</div>
</div>
</div>
<p id="mygallery-paginate" style="width: 250px; text-align:center">
<img src="img/opencircle.png" data-over="img/graycircle.png" data-select="img/closedcircle.png" data-moveby="1" />
</p>
<p>
<a href="java script:stepcarousel.stepBy('mygallery', -1)">Back 1 Panel</a>
<a href="java script:stepcarousel.stepBy('mygallery', 1)" style="margin-left: 80px">Forward 1 Panel</a>
<br />
<a href="java script:stepcarousel.stepTo('mygallery', 1)">To 1st Panel</a>
<a href="java script:stepcarousel.stepBy('mygallery', 2)" style="margin-left: 80px">Forward 2 Panels</a>
</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>DD Carusel. Test whis display:none;</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/stepcarousel.js"></script>
<style type="text/css">
.stepcarousel{
position: relative; /*leave this value alone*/
border: 1px solid black;
overflow: scroll; /*leave this value alone*/
width: 468px; /*Width of Carousel Viewer itself*/
height: 60px; /*Height should enough to fit largest content's height*/
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
width: 850px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
</style>
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true , moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:false},
defaultbuttons: {enable: false, moveby: 1, leftnav: ['img/317e0s5.gif', -5, 80], rightnav: ['img/33o7di8.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel">
<img src="img/1.gif" alt="" width="468" height="60" />
</div>
<div class="panel">
<img src="img/2.gif" alt="" width="468" height="60" />
</div>
<div class="panel">
<img src="img/3.gif" alt="" width="468" height="60" />
</div>
<div class="panel">
<img src="img/4.gif" alt="" width="468" height="60" />
</div>
<div class="panel">
<img src="img/5.png" alt="" width="468" height="60" />
</div>
</div>
</div>
<p id="mygallery-paginate" style="width: 250px; text-align:center">
<img src="img/opencircle.png" data-over="img/graycircle.png" data-select="img/closedcircle.png" data-moveby="1" />
</p>
<p>
<a href="java script:stepcarousel.stepBy('mygallery', -1)">Back 1 Panel</a>
<a href="java script:stepcarousel.stepBy('mygallery', 1)" style="margin-left: 80px">Forward 1 Panel</a>
<br />
<a href="java script:stepcarousel.stepTo('mygallery', 1)">To 1st Panel</a>
<a href="java script:stepcarousel.stepBy('mygallery', 2)" style="margin-left: 80px">Forward 2 Panels</a>
</p>
</body>
</html>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.