- SSbyHTML5: <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>スライドショー基本形</title> <style> #cf4 { position:relative; height:400px; width:700px; margin:0 auto; } #cf4 img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } @keyframes cf4FadeInOut { 0% { opacity:1; } 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes cf4FadeInOut0 { 0% { opacity:1; } 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes cf4FadeInOut0 { 0% { opacity:1; } 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } 100% { opacity:1; } } #cf4 img#img_1:nth-of-type(1) { animation-delay: 6s; } #cf4 img#img_2:nth-of-type(2) { animation-delay: 4s; } #cf4 img#img_3:nth-of-type(3) { animation-delay: 2s; } #cf4 img#img_4:nth-of-type(4) { animation-delay: 0s; } #cf4 img#img_1:nth-of-type(1) { -webkit-animation-delay: 6s; } #cf4 img#img_2:nth-of-type(2) { -webkit-animation-delay: 4s; } #cf4 img#img_3:nth-of-type(3) { -webkit-animation-delay: 2s; } #cf4 img#img_4:nth-of-type(4) { -webkit-animation-delay: 0s; } #cf4 img#img_1:nth-of-type(1) { -moz-animation-delay: 6s; } #cf4 img#img_2:nth-of-type(2) { -moz-animation-delay: 4s; } #cf4 img#img_3:nth-of-type(3) { -moz-animation-delay: 2s; } #cf4 img#img_4:nth-of-type(4) { -moz-animation-delay: 0s; } #cf4 img { animation-name: cf4FadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 8s; animation-direction: ; } #cf4 img { -webkit-animation-name: cf4FadeInOut0; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 8s; -webkit-animation-direction: ; } #cf4 img { -moz-animation-name: cf4FadeInOut0; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-duration: 8s; -moz-animation-direction: ; } </style> </head> <body> <div id="cf4"> <img src="http://oursatra.sakura.ne.jp/nakamura/wp-content/uploads/2013/07/img1.jpg" width="600" id="img_1"> <img src="http://oursatra.sakura.ne.jp/nakamura/wp-content/uploads/2013/07/img2.jpg" width="600" id="img_2"> <img src="http://oursatra.sakura.ne.jp/nakamura/wp-content/uploads/2013/07/img3.jpg" width="600" id="img_3"> <img src="http://oursatra.sakura.ne.jp/nakamura/wp-content/uploads/2013/07/img4.jpg" width="600" id="img_4"> </div> </body> <body> <p>音声を再生します</p> <p>動作確認ブラウザ；IE10、Chrome、FireFox</p> <div> <audio src="http://oursatra.sakura.ne.jp/nakamura/wp-content/uploads/2013/07/one_day.mp3" controls> </audio> </div> </body> </html>