少许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的灵活运用。

一定另有别的处理思绪,献丑,求抱大神大腿,求大神指导。
    原文作者:遗忘的晨曦丶_
    原文地址: https://segmentfault.com/a/1190000007944016
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞