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响应滑块自动

回答

相关问题