少許JQuery+CSS3代碼實現輪播器 (初次寫文章，思路，文筆都不足，輕噴)

1.前言，看過不少的輪播器代碼；可是心中，老想着有沒有簡單的辦法來實現一樣的效果。搜到這個（下方連接），眼前一亮，便動手實踐改進。主要工做，仍是對文章第一段提出的「若是中間間隔有圖片，那麼在css3動畫的執行過程當中仍是會看到，比較不給力」問題，進行改進，以及實現自動輪播。
不知道是哪位大神寫出來的，也不知道後續有沒有更新解決方案，總之，沒搜到，因而，獻醜貼代碼吧。

使用html5+css3來實現slider切換效果告別javascript+css連接描述

2.源碼連接裏有，這裏只說改變的地方，和本身寫的代碼。

2.1 將CSS樣式處，#slidebrs .inner處的過渡動畫取出，改成新的animated類，代碼

@charset utf-8;
            /* common */
            
            body {
                background: #ddd;
                overflow-x: hidden;
            }
            
            img {
                max-width: 70%;
            }
            
            #bd {
                width: 960px;
                margin: 100px auto;
                max-width: 960px;
            }
            /* module: sliders */
            
            #sliders {
                border-radius: 5px;
                box-shadow: 1px 1px 4px #666;
                padding: 1%;
                background: #fff;
            }
            
            #overflow {
                width: 100%;
                overflow: hidden;
            }
            
            #sliders .inner {
                width: 500%;
                cursor: pointer;
            }
            
            .animated {
                transiton: all 1s linear;
                -webkit-transition: all 1s linear;
            }
            
            #sliders article {
                float: left;
                width: 20%;
            }
            
            #sliders article .info {
                position: absolute;
                opacity: 0;
                padding: 30px;
                color: #666;
                font-family: Arial;
                transition: opacity 0.1s ease-out;
                -webkit-transform: translateZ(0);
                -webkit-transition: opacity 0.1s ease-out;
            }
            
            #sliders article .info h1 {
                font-size: 22px;
                font-weight: bold;
                margin: 0 0 5px;
            }
            
            #sliders article .info a {
                color: #666;
                text-decoration: none;
            }
            /* module: controls */
            
            #controls {
                height: 50px;
                width: 100%;
                margin-top: -25%;
            }
            
            #controls label {
                display: none;
                width: 50px;
                height: 50px;
                opacity: 0.3;
                cursor: pointer;
            }
            
            #controls label:hover {
                opacity: 1;
            }
            /* module: active */
            
            #active {
                width: 40%;
                margin: 23% auto 0 auto;
                text-align: center;
            }
            
            #active label {
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 5px;
                background: #bbb;
                border-color: #777;
            }
            
            #active label:hover {
                background: #ccc;
            }
            /* input checked change style */
            
            #slider1:checked~ #active label:nth-child(1),
            #slider2:checked~ #active label:nth-child(2),
            #slider3:checked~ #active label:nth-child(3),
            #slider4:checked~ #active label:nth-child(4),
            #slider5:checked~ #active label:nth-child(5) {
                background: #333;
            }
            
            #slider1:checked~ #controls label:nth-child(5),
            #slider2:checked~ #controls label:nth-child(1),
            #slider3:checked~ #controls label:nth-child(2),
            #slider4:checked~ #controls label:nth-child(3),
            #slider5:checked~ #controls label:nth-child(4) {
                display: block;
                float: left;
                background: url(../img/prev.png) no-repeat;
                margin-left: -70px;
            }
            
            #slider1:checked~ #controls label:nth-child(2),
            #slider2:checked~ #controls label:nth-child(3),
            #slider3:checked~ #controls label:nth-child(4),
            #slider4:checked~ #controls label:nth-child(5),
            #slider5:checked~ #controls label:nth-child(1) {
                display: block;
                float: right;
                background: url(../img/next.png) no-repeat;
                margin-right: -70px;
            }
            
            #slider1:checked~ #sliders article:nth-child(1) .info,
            #slider2:checked~ #sliders article:nth-child(2) .info,
            #slider3:checked~ #sliders article:nth-child(3) .info,
            #slider4:checked~ #sliders article:nth-child(4) .info,
            #slider5:checked~ #sliders article:nth-child(5) .info {
                opacity: 1;
                transition: all 0.6s ease-out 1s;
                -webkit-transition: all 0.6s ease-out 1s;
            }
            
            #slider1:checked~ #sliders .inner {
                margin-left: 0;
            }
            
            #slider2:checked~ #sliders .inner {
                margin-left: -100%;
            }
            
            #slider3:checked~ #sliders .inner {
                margin-left: -200%;
            }
            
            #slider4:checked~ #sliders .inner {
                margin-left: -300%;
            }
            
            #slider5:checked~ #sliders .inner {
                margin-left: -400%;
            }

也有其它有些小樣式變化,好比，inner添加了cursor:pointer；
還在HTML中input標籤全添加了hidden屬性，用於隱藏一個小BUG，BUG結尾有說，但影響不大。

  2.2 如下是jQuery代碼，版本2.1.4 ，手打代碼，出錯莫怪。

<div id="bd">
            <input checked type="radio" name="slider" id="slider1">
            <input type="radio" name="slider" id="slider2">
            <input type="radio" name="slider" id="slider3">
            <input type="radio" name="slider" id="slider4">
            <input type="radio" name="slider" id="slider5">
            <div id="sliders">
                <div id="overflow">
                    <div class="inner">
                        <article>
                            <div class="info">
                                <h1>Title1</h1>
                                <a href="#">Description1</a>
                            </div>
                            <img src="img/1.jpg" />
                        </article>
                        <article>
                            <div class="info">
                                <h1>Title2</h1>
                                <a href="#">Description2</a>
                            </div>
                            <img src="img/2.jpg" />
                        </article>
                        <article>
                            <div class="info">
                                <h1>Title3</h1>
                                <a href="#">Description3</a>
                            </div>

                            <img src="img/3.jpg" />
                        </article>
                        <article>
                            <div class="info">
                                <h1>Title4</h1>
                                <a href="#">Description4</a>
                            </div>
                            <img src="img/4.jpg" />
                        </article>
                        <article>
                            <div class="info">
                                <h1>Title5</h1>
                                <a href="#">Description5</a>
                            </div>
                            <img src="img/2.jpg" />
                        </article>
                    </div>
                </div>
            </div>
            <div id="controls">
                <label for="slider1"></label>
                <label for="slider2"></label>
                <label for="slider3"></label>
                <label for="slider4"></label>
                <label for="slider5"></label>
            </div>
            <div id="active">
                <label for="slider1"></label>
                <label for="slider2"></label>
                <label for="slider3"></label>
                <label for="slider4"></label>
                <label for="slider5"></label>
            </div>
        </div>

$(function() {
                var $input = $("input");
                var $inner = $input.siblings("#sliders").find(".inner");
                var $article = $("article");
                var $prevDom = $("input:checked");
                var $prevDomIndex = $("input:checked").index();

                $input.each(function() {
                    var _this = $(this);
                    _this.on("click", function() {
                        var _index = _this.index();
                        $inner.addClass("animated");
                        if($prevDom[0].id != ("slider" + _index) && $prevDom[0].id != ("slider" + (_index + 2))) { //若是點擊圖片間隔一個及以上，取消動畫過程。不會閃閃閃眼睛。。
                            $inner.removeClass("animated");
                        }
                        $prevDom = _this;
                        $prevDomIndex = _index;
                    });
                });
                var timer = setInterval(autoAnimate, 3000);

                $article.on("mouseover", function() {
                    clearInterval(timer);
                }).on("mouseout", function() {
                    timer = setInterval(autoAnimate, 3000);
                });
                
                function autoAnimate() {
                    if($prevDomIndex == $input.length - 1) {
                        $input.eq($prevDomIndex).prop("checked", false);
                        $inner.removeClass("animated");
                        $input.eq(0).prop("checked", true);
                    } else {
                        $inner.addClass("animated");
                        $prevDom.prop("checked", false).next("input").prop("checked", true);
                    }
                    $prevDom = $("input:checked");
                    $prevDomIndex = $("input:checked").index();
                }

            })

3.結語，小BUG就是，刪除input標籤的hidden屬性；執行如下順序，在input標籤組上，若點擊間隔爲一個及以上，下一次點擊相鄰圖片時，不會出現動畫。 可是下方laber標籤就沒有這個BUG，沒有去想。 匆匆結束，代碼確定也能夠優化。
收穫就是,深深認識到了CSS3中「~「選擇符的厲害之處，以及laber input的靈活運用。

確定還有其它解決思路，獻醜，求抱大神大腿，求大神指點。