Hoạt ảnh khung chính không đồng bộ

Hoạt động chính xác trên hệ thống tệp cục bộ của tôi, không phải từ máy chủ. Nó bắt đầu không đồng bộ vì một lý do nào đó. Cảm ơn vì bất kì sự giúp đỡ. Chỉ nhà cung cấp có tiền tố cho WebKit. Thử nghiệm trong Chrome 26.Demo: http://cssdesk.com/jjqKK Hoạt ảnh khung chính không đồng bộ

HTML:

<ul class="slides"> 
    <li><img src="http://placehold.it/200x100" /><span class="caption">Image 1</span></li> 
    <li><img src="http://placehold.it/200x100" /><span class="caption">Image 2</span></li> 
    <li><img src="http://placehold.it/200x100" /><span class="caption">Image 3</span></li> 
</ul>

CSS:

ul.slides{ 
    position: relative; 
    background: #000; 
    height: 100px; 
    width: 200px; 
    padding: 0; 
} 
ul.slides li{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    height: inherit; 
    width: inherit; 
    padding: 0; 
    margin: 0; 
    -webkit-animation: slideshow 9s linear infinite; 
} 
ul.slides.clickpause:active li{ 
    -webkit-animation-play-state:paused; 
} 
ul.slides li:nth-child(1){ -webkit-animation-delay: 0s; } 
ul.slides li:nth-child(2){ -webkit-animation-delay: 3s; } 
ul.slides li:nth-child(3){ -webkit-animation-delay: 6s; } 
@-webkit-keyframes slideshow{ 
0%{ 
    opacity: 0; 
    z-index: 2; 
} 
3%{ 
    opacity: 1; 
} 
30%{ 
    opacity: 1; 
} 
33%{ 
    opacity: 0; 
} 
34%{ 
    z-index: 1; 
} 
100%{ 
    opacity: 0; 
} 
} 
ul.slides li img{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    padding: 0; 
    margin: 0 
} 
ul.slides li span{ 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    background: rgba(40, 40, 40, 0.8); 
    color: #FFF; 
    padding: 5px 
}

Demo: http://cssdesk.com/jjqKK

hãy có câu trả lời có sử dụng JavaScript. Cảm ơn!

Nguồn

2013-04-07 Mooseman

Bạn có nghĩa là nó nhấp nháy 'slide thứ ba, trước khi hoạt cảnh bắt đầu ? – Chris

Có vẻ tốt trên Chrome của tôi. Có lẽ đã có một đèn flash trong đầu, tôi không thể nói. –

@Chris Không, nó không được đồng bộ ở đây. ví dụ: trang trình bày 1 hiển thị trong 3 giây, trong khi trang trình bày 2 hiển thị dưới 1 giây; sau đó có một sự chậm trễ sau khi Slide 3 trước khi slide 1 xuất hiện một lần nữa. – Mooseman

Hoạt ảnh của bạn có thể không phải lúc nào cũng bắt đầu cùng một lúc.

Tôi nhận thấy rằng sự chậm trễ tiêu cực hoạt động thực sự tốt với việc giữ mọi thứ được đồng bộ hóa. Với kỹ thuật này, mỗi hoạt ảnh sẽ tải cùng lúc, nhưng một số phần bắt đầu trong quá khứ. Kiểm tra các ví dụ jsbin:

http://jsbin.com/EreYIdE/2/edit

sửa thêm ví dụ inline:

ul { 
 
    background: #000; 
 
    height: 100px; 
 
    padding: 0; 
 
    position: relative; 
 
    width: 200px; 
 
} 
 

 
li { 
 
    height: inherit; 
 
    margin: 0; 
 
    opacity: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: inherit; 
 
    
 
    -webkit-animation: slideshow 9s linear infinite; 
 
    animation: slideshow 9s linear infinite; 
 
} 
 

 
li:nth-child(1) { 
 
    -webkit-animation-delay: -9s; 
 
    animation-delay: -9s; 
 
} 
 

 
li:nth-child(2) { \t 
 
    -webkit-animation-delay: -6s; 
 
    animation-delay: -6s; 
 
} 
 

 
li:nth-child(3) { \t 
 
    -webkit-animation-delay: -3s; 
 
    animation-delay: -3s; 
 
} 
 

 
@-webkit-keyframes slideshow { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    3% { 
 
    opacity: 1; 
 
    } 
 
    30% { 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes slideshow { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    3% { 
 
    opacity: 1; 
 
    } 
 
    30% { 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
img { 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 

 
span { 
 
    background: rgba(40, 40, 40, 0.8); 
 
    color: #fff; 
 
    padding: 5px; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset=utf-8 /> 
 
<title>JS Bin</title> 
 
</head> 
 
<body> 
 
<ul> 
 
    <li> 
 
    <img src="http://placehold.it/200x100"> 
 
    <span>Image 1</span> 
 
\t 
 
    <li> 
 
    <img src="http://placehold.it/200x100"> 
 
    <span>Image 2</span> 
 
\t 
 
    <li> 
 
    <img src="http://placehold.it/200x100"> 
 
    <span>Image 3</span> 
 
</ul> 
 
</body> 
 
</html>

Nguồn

2014-01-17 00:02:18 helloworld

Hoạt động ở đây, cảm ơn! – Mooseman

Bạn sẽ phải thêm một kích hoạt hoạt hình sử dụng javascript

Javascript demo

window.onload = function(){ }

hoặc jQuery demo

$(window).load(function(){})

như hình ảnh động CSS3 và chuyển s bắt đầu ngay trước khi tải tài liệu.

Nguồn

2013-04-08 07:37:41

Ý tưởng ở đây là không có JS. – Mooseman

Từ những gì tôi có thể nói, đây là cách duy nhất để đồng bộ hóa hoạt ảnh CSS. Ít nhất JS là rất tối thiểu. Các lựa chọn thay thế duy nhất khác sẽ liên quan đến rất nhiều JS (thêm/loại bỏ các lớp học và sử dụng chuyển tiếp, thay vì CSS keyframe hình ảnh động). Điều này không xứng đáng với bất kỳ downvotes. Cảm ơn, Ahmad. –

Xin chào, liên kết bị hỏng trên bản demo của bạn..vui lòng bạn có thể giải thích thêm trong ví dụ của mình (dòng đầy đủ mã), thx :) –

Hoạt ảnh khung chính không đồng bộ

Trả lời

Các vấn đề liên quan