css3轮播不用jpuery_少量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 ，手打代码，出错莫怪。

Title1

Description1

Title2

Description2

Title3

Description3

Title4

Description4

Title5

Description5

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

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