1

我已经设置了一个仅使用 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>
4

2 回答 2

0

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

于 2012-10-23T15:29:49.460 回答
0

在环顾四周并尝试其他方法时，我发现 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-23T21:10:33.100 回答