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


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

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

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

  2.1 将CSS样式处,#slidebrs .inner处的过渡动画取出,改为新的animated类,代码
.animated {
transiton: all 1s linear;
-webkit-transition: all 1s linear;}
也有其它有些小样式变化,比如,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($prevIndex = $input.length-1){
              $input.eq(prevIndex).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的灵活运用。

肯定还有其它解决思路,献丑,求抱大神大腿,求大神指点。

发表评论

电子邮件地址不会被公开。

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>