私は、青い背景の上にそれらを溶解することによって、写真とハイパーリンクで 4 つの div を変更する純粋な CSS カルーセルに取り組んでいます。
IE10/11、Opera 15、Mozilla 23、Safari 5.1.7 (win)、Safari ? で正常に動作します。(osx108)。Chrome 29 で実行する場合、1 つの問題を除いてほとんど問題ありません。2 つ以上のブラウザー タブで開くと、同期が失われ、画像がすぐにスキップされます。2 つ以上のブラウザ ウィンドウで開いている場合は、すべて問題ありません。
iPad2のSafariでも同様に壊れています。
ブラウザまたはコードの問題ですか？
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel v0</title>
<link href="carousel.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Carousel Start -->
<div class="carousel-items">
<div id="carousel-item-1" class="carousel-item">
<a class="carousel-item-text" href="#" title="Go to Showcase Item 1">
<span class="carousel-item-title">Showcase Item 1 Title</span>
<span class="carousel-item-description">Brief description or introduction into Showcase Item 1.</span>
</a>
</div>
<div id="carousel-item-2" class="carousel-item">
<a class="carousel-item-text" href="#" title="Go to Showcase Item 2">
<span class="carousel-item-title">Showcase Item 2 Title</span>
<span class="carousel-item-description">Brief description or introduction into Showcase Item 2.</span>
</a>
</div>
<div id="carousel-item-3" class="carousel-item">
<a class="carousel-item-text" href="#" title="Go to Showcase Item 3">
<span class="carousel-item-title">Showcase Item 3 Title</span>
<span class="carousel-item-description">Brief description or introduction into Showcase Item 3.</span>
</a>
</div>
<div id="carousel-item-4" class="carousel-item">
<a class="carousel-item-text" href="#" title="Go to Showcase Item 4">
<span class="carousel-item-title">Showcase Item 4 Title</span>
<span class="carousel-item-description">Brief description or introduction into Showcase Item 4.</span>
</a>
</div>
</div>
<!-- Carousel Finish -->
</body>
</html>
CSS:
/* Container to position carousel composition */
.carousel-items {
overflow: hidden;
width: 923px;
height: 355px;
background: rgba(0,19,127,0.3);
}
/* Deafault position of carousel items */
.carousel-item {
position: absolute!important;
width: 923px;
height:355px;
opacity: 0;
-webkit-animation: colorDissolve 24s linear infinite;
-moz-animation: colorDissolve 24s linear infinite;
-ms-animation: colorDissolve 24s linear infinite;
animation: colorDissolve 24s linear infinite;
}
/* Backgrounds to carousel items */
#carousel-item-1{background-image:url('one.jpg');}
#carousel-item-2{background-image:url('two.jpg');}
#carousel-item-3{background-image:url('three.jpg');}
#carousel-item-4{background-image:url('four.jpg');}
/* Animation delay for carousel item 2 */
.carousel-item:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
/* Animation delay for carousel item 3 */
.carousel-item:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
/* Animation delay for carousel item 4 */
.carousel-item:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
/* Appearance of carousel item description - Initial style*/
.carousel-item-text {
position:relative;
display:block;
top:285px;
z-index: 1500;
width: 923px;
height: 70px;
overflow: hidden;
color:#ffffff;
text-decoration:none;
background: rgba(0,19,127,0.3);
-webkit-transition: all 750ms ease;
-moz-transition: all 750ms ease;
-o-transition: all 750ms ease;
-ms-transition: all 750ms ease;
transition: all 750ms ease;
}
/* Appearance of carousel item description - Item hover style */
.carousel-item:hover > .carousel-item-text {
top:205px;
height: 150px;
}
/* Title of carousel item */
.carousel-item-title {
position:relative;
padding-left:20px;
font-size:xx-large;
line-height:70px;
letter-spacing: 2px;
}
/* Description of carousel item */
.carousel-item-description {
position:relative;
display:block;
width:783px;
padding-left:20px;
line-height:130%;
font-size:x-large;
}
/* The keyframes calculations are based on assumption of 4 items in the carousel. */
@-webkit-keyframes colorDissolve {
0%, 27%, 100% { opacity: 0; }
2%, 25% { opacity: 1; z-index:1000;}
}
@-moz-keyframes colorDissolve {
0%, 27%, 100% { opacity: 0; }
2%, 25% { opacity: 1; z-index:1000;}
}
@-ms-keyframes colorDissolve {
0%, 27%, 100% { opacity: 0; }
2%, 25% { opacity: 1; z-index:1000;}
}
@keyframes colorDissolve {
0%, 27%, 100% { opacity: 0; }
2%, 25% { opacity: 1; z-index:1000;}
}