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