Плавная смена изображения в JavaScript

Код JavaScript (вставлять между тегами <head> и </head>):


<script type="text/javascript">
var total_pics_num = 4; // колличество изображений
var interval = 5000; // задержка между изображениями
var time_out = 1; // задержка смены изображений
var i = 0;
var timeout;
var opacity = 100;
function fade_to_next() {
opacity--;
var k = i + 1;
var image_now = 'image_' + i;
if (i == total_pics_num) k = 1;
var image_next = 'image_' + k;
document.getElementById(image_now).style.opacity = opacity/100;
document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')';
document.getElementById(image_next).style.opacity = (100-opacity)/100;
document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')';
timeout = setTimeout("fade_to_next()",time_out);
if (opacity==1) {
opacity = 100;
clearTimeout(timeout);
}
}
setInterval (
function() {
i++;
if (i > total_pics_num) i=1;
fade_to_next();
}, interval
);

</script>


Код HTML (вставлять между тегами <body> и </body>):


<div>
<img src='slide_1.jpg' id="image_1" style="position: absolute;" />
<img src='slide_2.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
<img src='slide_3.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
<img src='slide_4.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
</div>


Слайд шоу на 4 картинки

========================СЛАЙДЫ в CSS  ===================

#outlook a {

  padding: 0;

}

body {

  width: 100% !important;

  height: 100% !important;

  margin: 0;

  padding: 0;

  line-height: 100% !important;

}

table, td {

  border-collapse: collapse !important;

  mso-table-lspace: 0pt !important;

  mso-table-rspace: 0pt !important;

}

img {

  border: 0;

  display: block;

  outline: none;

  text-decoration: none;

  -ms-interpolation-mode: bicubic;

}

body, table, td, font {

  -ms-text-size-adjust: 100%;

  -webkit-text-size-adjust: 100%;

}

.ExternalClass, .ExternalClass span, .ExternalClass td, .ExternalClass div {

  line-height: 100%;

}

/* iOS ADDRESS / TEL NUMBERS */

a[x-apple-data-detectors] {

  color: inherit !important;

  text-decoration: none !important;

  font-size: inherit !important;

  font-family: inherit !important;

  font-weight: inherit !important;

  line-height: inherit !important;

}

/* Slider */

#slider {

  position: relative;

  width: 100%;

  overflow: hidden;

  min-height: 400px;

  height: auto;

}

#control {

  position: relative;

  left: 0px;

  white-space: nowrap;

  animation: slider-navigate 12s linear infinite alternate;

  -webkit-animation: slider-navigate 12s linear infinite alternate;

  -moz-animation: slider-navigate 12s linear infinite alternate;

  -o-animation: slider-navigate 12s linear infinite alternate;

  font-size: 0px;

  width: 100%;

}

#control img {

  margin: 0px;

  padding: 0px;  

  vertical-align: middle;

  -moz-animation: show-width 1s infinite;

  -webkit-animation: show-width 1s infinite;

  -o-animation: show-width 1s infinite;

  animation: show-width 1s infinite;

  display: inline-block;

}

/* blows images up to 100% width */

  @keyframes show-width {

  0% {

width: 25%;

max-width: 25%;

}

  100% {

width: 25%;

max-width: 25%;

}

}

  @-moz-keyframes show-width {

  0% {

width: 25%;

max-width: 25%;

}

  100% {

width: 25%;

max-width: 25%;

}

}

  @-webkit-keyframes show-width {

  0% {

width: 25%;

max-width: 25%;

}

  100% {

width: 25%;

max-width: 25%;

}

}

  @-o-keyframes show-width {

  0% {

width: 25%;

max-width: 25%;

}

  100% {

width: 25%;

max-width: 25%;

}

}

/* slide animation */

  @keyframes slider-navigate {

  0% {left: 0%;display: block;width: 400%;}

  14.3% {left: 0%;}

  28.6% {left: -100%;}

  42.9% {left: -100%;}

  57.2% {left: -200%;}

  71.5% {left: -200%;}

  85.8% {left: -300%;}

  100% {left: -300%;width: 400%;}

}

  @-webkit-keyframes slider-navigate {

  0% {left: 0%;display: block;width: 400%;}

  14.3% {left: 0%;}

  28.6% {left: -100%;}

  42.9% {left: -100%;}

  57.2% {left: -200%;}

  71.5% {left: -200%;}

  85.8% {left: -300%;}

  100% {left: -300%;width: 400%;}

}

  @-moz-keyframes slider-navigate {

  0% {left: 0%;display: block;width: 400%;}

  14.3% {left: 0%;}

  28.6% {left: -100%;}

  42.9% {left: -100%;}

  57.2% {left: -200%;}

  71.5% {left: -200%;}

  85.8% {left: -300%;}

  100% {left: -300%;width: 400%;}

}

  @-o-keyframes slider-navigate {

  0% {left: 0%;display: block;width: 400%;}

  14.3% {left: 0%;}

  28.6% {left: -100%;}

  42.9% {left: -100%;}

  57.2% {left: -200%;}

  71.5% {left: -200%;}

  85.8% {left: -300%;}

  100% {left: -300%;width: 400%;}

}

/* MOBILE STYLES */

@media only screen and (max-width: 414px) {

.wrapper {

  width: 100% !important;

}

.container {

  width: 100% !important;

}

#slider {

  min-height: inherit !important;

}

}

===============================================

На страницу:

<table width="100%" cellpadding="0" cellspacing="0" border="0">

 <tbody><tr>

 <td valign="top" align="center">

 

 

 

 <table width="800" cellpadding="0" cellspacing="0" border="0" class="wrapper">

 <tbody><tr>

 <td align="center">

 

 <table width="800" cellpadding="0" cellspacing="0" border="0" class="container">

 <tbody><tr>

 <td>

 <div id="slider">

 <div id="control"> 

 <img src="http://www.hovawart.su/01slaid/01.png" style="width: 100%;"> 

 <img src="http://www.hovawart.su/01slaid/02.png" style="max-width: 0.1px; width: 0.1px;">

 <img src="http://www.hovawart.su/01slaid/03.png" style="max-width: 0.1px; width: 0.1px;">

 <img src="http://www.hovawart.su/01slaid/04.png" style="max-width: 0.1px; width: 0.1px;">

 

 </div>

 <div style="clear: both;"></div>

 </div>

 <div style="clear: both;"></div>

 </td>

 </tr>

 </tbody></table>

 

 </td>

 </tr>

 </tbody></table> 

 </td>

 </tr>

</tbody></table>
Студии Lotus WEB:

ПОРТФОЛИО   КАТАЛОГ   НОВЫЕ РАБОТЫ   ПОЛЕЗНАЯ ИНФОРМАЦИЯ 
 ФОТОСТУДИЯ   ЗОО САЛОН   САЙТЫ ПАРТНЕРЫ   ОТЗЫВЫ   КОНТАКТЫ  
Лотус. Создание сайтов для питомников и заводчиков  ©  admin  
 
 Рейтинг сайтов о собаках. Топ лучших собачьих сайтов.