Плавная смена изображения в JavaScriptКод 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>):
Слайд шоу на 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> |