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;
}

そして、基本的に、私のスライドとして、これらのうちの 4 つがあります。

                <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

周りを見回して何か他のことを試してみると、IE は新しい css3 アニメーションでうまく動作しないことがわかりました。したがって、javascriptでこれを行うことを検討します。

編集：Jqueryが問題だったので、基本的なJavascriptを使用して独自のスライダーを作成することにしました。私はこの CSS が気に入ったので、スライダーのボタンを 10 秒ごとに「偽クリック」する小さな JS を作成しました。

    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 に答える
0

そのページのページ ソースを調べてみてください。ほとんどがそのままの HTML であるため、ここから始めるのが最適です。ページを右クリックして、「ソースを表示」をクリックしてください。必要なものはすべてそこにあります。

于 2012-10-23T15:29:49.460 に答える