CSS3響應滑塊自動

我的問題是，我已經看到了CSS3動畫是自動滑塊，有沒有什麼辦法讓這個滑塊自動旋轉，仍有按鈕的工作？

的CSS是這樣的：

/* Slider Setup */ 

input { 
display: none; 
} 

#slide1:checked ~ #slides .inner { margin-left:0; } 
#slide2:checked ~ #slides .inner { margin-left:-100%; } 
#slide3:checked ~ #slides .inner { margin-left:-200%; } 
#slide4:checked ~ #slides .inner { margin-left:-300%; } 


#overflow { 
width: 100%; 
overflow: hidden; 
} 

#slides .inner { 
width: 500%; 
line-height: 0; 
} 

#slides article { 
width: 20%; 
float: left; 
} 

/* Slider Styling */ 

/* Control Setup */ 

#controls { 
margin: -25% 0 0 0; 
width: 100%; 
height: 50px; 
} 

#controls label { 
display: none; 
width: 50px; 
height: 50px; 
opacity: 0.3; 
} 

#active { 
margin: 23% 0 0; 
text-align: center; 
} 

#active label { 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
display: inline-block; 
width: 10px; 
height: 10px; 
background: #bbb; 
} 

#active label:hover { 
background: #ccc; 
border-color: #777 !important; 
} 

#controls label:hover { 
opacity: 0.8; 
} 

#slide1:checked ~ #controls label:nth-child(2), 
#slide2:checked ~ #controls label:nth-child(3), 
#slide3:checked ~ #controls label:nth-child(4), 
#slide4:checked ~ #controls label:nth-child(1){ 
background: url('imgs/next.png') no-repeat; 
float: right; 
margin: 0 -70px 0 0; 
display: block; 
} 


#slide1:checked ~ #controls label:nth-child(4), 
#slide2:checked ~ #controls label:nth-child(1), 
#slide3:checked ~ #controls label:nth-child(2), 
#slide4:checked ~ #controls label:nth-child(3){ 
background: url('imgs/prev.png') no-repeat; 
float: left; 
margin: 0 0 0 -70px; 
display: block; 
} 

#slide1:checked ~ #active label:nth-child(1), 
#slide2:checked ~ #active label:nth-child(2), 
#slide3:checked ~ #active label:nth-child(3), 
#slide4:checked ~ #active label:nth-child(4) { 
background: #333; 
border-color: #333 !important; 
} 

/* Info Box */ 

.info { 
line-height: 20px; 
margin: 0 0 -150%; 
position: absolute; 
font-style: italic; 
padding: 30px 30px; 
opacity: 0; 
color: #000; 
text-align: left; 
} 

.info h3 { 
color: #333; 
margin: 0 0 5px; 
font-weight: normal; 
font-size: 22px; 
font-style: normal; 
} 

/* Slider Styling */ 




/* Animation */ 

#slides .inner { 
-webkit-transform: translateZ(0); 
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ 

-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ 
} 

#slider { 
-webkit-transform: translateZ(0); 
-webkit-transition: all 0.5s ease-out; 
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out; 
} 

#controls label{ 
-webkit-transform: translateZ(0); 
-webkit-transition: opacity 0.2s ease-out; 
-moz-transition: opacity 0.2s ease-out; 
-o-transition: opacity 0.2s ease-out; 
transition: opacity 0.2s ease-out; 
} 

#slide1:checked ~ #slides article:nth-child(1) .info, 
#slide2:checked ~ #slides article:nth-child(2) .info, 
#slide3:checked ~ #slides article:nth-child(3) .info, 
#slide4:checked ~ #slides article:nth-child(4) .info{ 
opacity: 1; 
-webkit-transition: all 1s ease-out 0.6s; 
-moz-transition: all 1s ease-out 0.6s; 
-o-transition: all 1s ease-out 0.6s; 
transition: all 1s ease-out 0.6s; 
} 

.info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile { 
-webkit-transform: translateZ(0); 
-webkit-transition: all 0.5s ease-out; 
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out; 
}

，基本上我有這四個，我的幻燈片：

   <article > 
        <div class="info">     
         <div id="slideContent"> 
          <div> 
           <h1></h1> 
           <h1 style="color:#ff9900;"><b></b></h1> 
          </div> 
          <div id="slideTxt"></div> 
          <div id="slideBtn"></div> 
         </div> 
        </div> 
        <img src="imgs/slide background" /> 
       </article>

來源

2012-10-23 Luthfur Miah

我知道自動化是可能的：HTTP：//www.anthonycalzadilla.com/css3-ATAT/我只是很困惑就出來實施這一概念。 –

你不得不接受CSS3動畫只能通過大多數瀏覽器的某些版本實現。如果你已經準備好接受一些javascript後備，那沒問題，但是對於你的應用程序，你也可以考慮一個更小的目標。這就像開發iPhone應用程序一樣，從開始就知道它不能在Android設備上運行。 –

嘗試尋找在該頁面的頁面源代碼。因爲它主要是直接的HTML，所以它是最好的開始。只需右鍵單擊該頁面並點擊「查看源代碼」。所有你需要的就在那裏。

來源

2012-10-23 15:29:49 Askanison4

感謝您的迴應，但他的頁面沒有任何自動化。我在評論中張貼的頁面確實存在，但不是幻燈片放映方式。我只是沒有得到如何建立連接。 –

哦，所以你想讓它自己滑過？最簡單的方法是使用純JS超時，並在超時時觸發單選按鈕的單擊事件。在純HTML和CSS中;看看你鏈接的頁面的來源。它使用CSS3動畫。 – Askanison4

在環顧四周，想別的事情，我發現，IE不會與新的CSS3動畫發揮出色。因此，我將考慮用javascript來做這件事。

編輯：所以我決定，因爲jQuery的是問題，只要使用一些基本的JavaScript，使我自己的滑塊。我喜歡這個CSS，因此只是讓一個小JS每10秒「假按一下」滑塊的按鈕。

var labelNumber=1; 
var flag = true; 
function customSlideShow(){ 
    if(flag){ 
     $("label[for='slide" + labelNumber + "']").trigger('click'); 
     labelNumber++; 
     if (labelNumber==5){labelNumber=1;}; 
     setTimeout(customSlideShow, 10000); 
    };}

來源

2012-10-23 21:10:33

CSS3響應滑塊自動

回答

相關問題