资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/少量JQuery+CSS3代码实现轮播器 (初次写文章，思路，文笔都不足，轻喷)

少量JQuery+CSS3代码实现轮播器 (初次写文章，思路，文笔都不足，轻喷)

gotham / 1071人阅读

摘要：主要工作，还是对文章第一段提出的如果中间间隔有图片，那么在动画的执行过程中还是会看到，比较不给力问题，进行改进，以及实现自动轮播。肯定还有其它解决思路，献丑，求抱大神大腿，求大神指点。

1.前言，看过很多的轮播器代码；但是心中，老想着有没有简单的办法来实现同样的效果。搜到这个（下方链接），眼前一亮，便动手实践改进。主要工作，还是对文章第一段提出的“如果中间间隔有图片，那么在css3动画的执行过程中还是会看到，比较不给力”问题，进行改进，以及实现自动轮播。
不知道是哪位大神写出来的，也不知道后续有没有更新解决方案，总之，没搜到，于是，献丑贴代码吧。

使用html5+css3来实现slider切换效果告别javascript+css链接描述

2.源码链接里有，这里只说改变的地方，和自己写的代码。

  2.1 将CSS样式处，#slidebrs .inner处的过渡动画取出，改为新的animated类，代码
@charset utf-8;
            /* common */
            
            body {
                background: #ffffd;
                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 ，手打代码，出错莫怪。

            
            
            
            
            
            

                

                    

                        
                        
                        
                        
                        
                    

                

            

            

                
                
                
                
                
            

            

                
                
                
                
                
            

        
$(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的灵活运用。

肯定还有其它解决思路，献丑，求抱大神大腿，求大神指点。
GPU云服务器 云服务器 轮播器 思路写清楚 jquery与css3 js写控件思路

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86697.html

相关文章

  • 少量JQuery+CSS3代码实现轮播器 (初次写文章，思路，文笔都不足，轻喷)

    摘要：主要工作，还是对文章第一段提出的如果中间间隔有图片，那么在动画的执行过程中还是会看到，比较不给力问题，进行改进，以及实现自动轮播。肯定还有其它解决思路，献丑，求抱大神大腿，求大神指点。 1.前言，看过很多的轮播器代码；但是心中，老想着有没有简单的办法来实现同样的效果。搜到这个（下方链接），眼前一亮，便动手实践改进。主要工作，还是对文章第一段提出的如果中间间隔有图片，那么在css3动画的...

    FleyX 评论0 收藏0

  • 【连载】前端个人文章整理-从基础到入门

    摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理 从最开始萌生写文章的想法，到着手...

    madthumb 评论0 收藏0

  • 兼容性较好的web html原生js轮播器

    摘要：第一步前端样式以及代码图片自行添加代码超出的图片垂直方向隐藏，水平方向也隐藏提供给子元素定位参照父元素进行绝对定位代码第二步给前一张，下一张添按钮添加事件下一页获取相册，便于移动相册框的图片前一张图片按钮下一页按 第一步：前端样式以及html代码（图片自行添加） css代码： #container{ width: 1200px; heig...

    avwu 评论0 收藏0

发表评论

登陆后可评论

0条评论

gotham

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<