来源
Responsive CSS3 Slider Without Javascript
这是一篇使用css3 transition动画实现图片切换效果的文章，作者的功力实在让在下佩服，于是在下将这些样式图片效果都搬砖搬过来，然后再添加一些脚本改成组件。链接在后面放出。
核心代码
html
<%--Created by IntelliJ IDEA.User: AdministratorDate: 2015/9/17Time: 16:16To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>title><script src="/static/lib/jquery-1.11.0.min.js">script><script src="/static/lib/jquery-migrate-1.2.1.js">script><script src="/static/lib/hammer.min.js">script><script src="ISlider.js">script><link rel="stylesheet" type="text/css" href="islider.css"><style>#app{width: 600px;;}style>
head>
<body>
<h3>css3图片轮换组件。h3>
<div id="app"><div id="slider1" class="ui-slider slider-settings"><div class="slider-overflow"><div class="slider-inner"><article class="ui-slider-item"><a href="javascript:void(0)"><img src="images/alb1.png">a><div class="slider-desc">div>article><article class="ui-slider-item"><a href="javascript:void(0)"><img src="images/alb2.png">a><div class="slider-desc">div>article><article class="ui-slider-item"><a href="javascript:void(0)"><img src="images/alb3.png">a><div class="slider-desc">div>article><article class="ui-slider-item"><a href="javascript:void(0)"><img src="images/alb4.png">a><div class="slider-desc">div>article><article class="ui-slider-item"><a href="javascript:void(0)"><img src="images/alb5.png">a><div class="slider-desc">div>article>div>div><div class="slider-actives"><label>label><label>label><label>label><label>label><label>label>div>div>div>
<script type="text/javascript">var _slider=ISlider({container:$("#slider1"),selected:3,timeSep:5000});
script>
body>
html>
css
.slider-settings{width: 100%;overflow: hidden;}.ui-slider{}
.ui-slider .slider-overflow{overflow: hidden;width:100%;}
.ui-slider .slider-inner{width: 500%;/**下面定义属性变化时候的动画。**/-webkit-transform: translateZ(0);-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
.ui-slider .slider-inner:after{clear:both;display:block;visibility:hidden;height:0;line-height:0;content:'';}
.ui-slider .ui-slider-item{width: 20%;float: left;
}
/**这是下面的指示栏**/
.slider-actives{width: 100%;text-align: center;padding: 10px;
}
.slider-actives label {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;display: inline-block;width: 10px;height: 10px;background: #bbb;cursor: hand;/**设定动画。**/-webkit-transform: translateZ(0);-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
}
.slider-actives label.current-select {background: #333;border-color: #333 !important;
}js
//--slider组件。该组件依赖于jquery及 hammer.js 2.0.4
var ISlider=function(_opts){var settings={container:"",selected:1 //当前显示的图片。,autoPlay:true //是否定时自动播放图片,timeSep:5000 //播放图片的间隔。 毫秒为单位。,marginLeftPerImage:100 //每张图片位移的数量、。,marginLeftUnit:"%" //位移的数量的样式单位。};$.extend(settings,_opts);var _root=$(settings.container);var _actives_bar=_root.find(".slider-actives");var _actives_labels=_actives_bar.find("label");var _inner_slider=$(".slider-inner");var appData={imageCount:0,timmer:null,currentSelectedIndex:0 //当前选中了哪一个图片。};var app={init:function(){var me=this;me.initData();me.initEvents();if(settings.autoPlay){me.initTimmer();}me.setSelected(settings.selected);},initData:function(){//--appData.imageCount= _root.find(".ui-slider-item").length;},initEvents:function(){var me=this;_actives_labels.click(function(){var _index=$(this).index();var _imageNo=_index+1;me.setSelected(_imageNo);me.initTimmer();});//--触屏版事件。var hammertime = new Hammer(_inner_slider[0],{});hammertime.on('swipeleft', function(ev) {me.next();me.initTimmer();});hammertime.on("swiperight",function(ev){me.pre();me.initTimmer();});},next:function(){var me=this;var _next_imageNo=(appData.currentSelectedIndex+1)%appData.imageCount;if(_next_imageNo==0){_next_imageNo=appData.imageCount;}else{}me.setSelected(_next_imageNo);},pre:function(){var me=this;var _pre_imageNo=(appData.currentSelectedIndex+appData.imageCount-1)%appData.imageCount;if(_pre_imageNo==0){_pre_imageNo=appData.imageCount;}else{}me.setSelected(_pre_imageNo);},setSelected:function(ImageNo){var _el=_inner_slider;if(ImageNo>appData.imageCount){return;}appData.currentSelectedIndex=ImageNo;var _marginLeft=(ImageNo-1)*settings.marginLeftPerImage;_el.css("margin-left","-"+_marginLeft+""+settings.marginLeftUnit);var _activeLabels=_actives_labels;for(var i=0;i<_activeLabels.length;i++){var _labelEL=_activeLabels.get(i);if(i==(ImageNo-1)){if($(_labelEL).hasClass("current-select")==false){$(_labelEL).addClass("current-select");}}else{if($(_labelEL).hasClass("current-select")==true){$(_labelEL).removeClass("current-select");}}}},initTimmer:function(){var _me=this;if(appData.timmer!=null){clearInterval(appData.timmer);}appData.timmer=setInterval(function(){var _next_imageNo=(appData.currentSelectedIndex+1)%appData.imageCount;if(_next_imageNo==0){_next_imageNo=appData.imageCount;}else{}_me.setSelected(_next_imageNo);},settings.timeSep);}};app.init();var robj={setSelected:function(imageIndex){app.setSelected(imageIndex);}};return robj;
};效果
csdn没办法上传gif动画，也没办法录屏演示了，一张静态图片作效果图，代码在后面。
下载
为了满足一般搬砖的需要，特意将资源放出来打包：
下载资源
