Question

我已经按照here.

所述设置了一个使用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>

Answer 1

尝试查看该页面的页面来源。因为它主要是直接HTML，所以最好的起点。只需右键单击页面并点击“查看源”即可。你只需要就在那里。

Answer 2

在环顾四周并尝试别的东西时，我发现IE对于较新的css3动画效果不佳。因此，我将研究使用javascript进行此操作。

编辑：所以我决定，因为Jquery是问题，只需使用一些基本的Javascript并制作我自己的滑块。我喜欢这个css one因此只是制作了一个小型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);
    };}

Css3响应滑块自动化

2 个答案: