Resimlere manuel bir kontrol olmadan belli bir süreye göre birinin kaybolup, diğerinin gelmesini HTML + CSS ile yapabilirsiniz.
Yok, ben manuel geçişle olsun istiyorum derseniz de, JavaScript kullanmanız gerekiyor.
Otomatik geçiş için @Key-frame ile yapılan bir örneği göstereyim size;
CSS kodlarında bulunan
animation: ustslider2 50s infinite;"50s" yazan yerden geçişin ne kadar sürede olacağını ayarlayabilirsiniz.
HTML Kodları:
CSS Kodları:
.ustslider1 {
position: absolute;
-webkit-animation: ustslider1 50s infinite; /* Chrome, Safari, Opera */
animation: ustslider1 50s infinite;
}
.ustslider2 {
position: absolute;
-webkit-animation: ustslider2 50s infinite; /* Chrome, Safari, Opera */
animation: ustslider2 50s infinite;
}
.ustslider3 {
position: absolute;
-webkit-animation: ustslider3 50s infinite; /* Chrome, Safari, Opera */
animation: ustslider3 50s infinite;
}
.ustslider4 {
position: absolute;
-webkit-animation: ustslider4 50s infinite; /* Chrome, Safari, Opera */
animation: ustslider4 50s infinite;
}
/* Üst Slider 1 */
@-webkit-keyframes ustslider1 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
2% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
24% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
25% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
@keyframes ustslider1 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
2% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
24% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
25% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
/* Üst Slider 2 */
@-webkit-keyframes ustslider2 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
25% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
27% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
49% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
50% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
@keyframes ustslider2 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
25% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
27% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
49% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
50% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
/* Üst Slider 3 */
@-webkit-keyframes ustslider3 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
50% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
52% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
74% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
75% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
@keyframes ustslider3 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
50% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
52% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
74% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
75% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
/* Üst Slider 4 */
@-webkit-keyframes ustslider4 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
75% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
77% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
99% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
@keyframes ustslider4 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
75% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
77% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
99% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}