来源
Responsive CSS3 Slider Without Javascript
这是一篇使用css3 transition动画实现图片切换效果的文章，作者的功力实在让在下佩服，于是在下将这些样式图片效果都搬砖搬过来，然后再添加一些脚本改成组件。链接在后面放出。
核心代码
html
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2015/9/17 Time: 16:16 To 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); -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); }
.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
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动画，也没办法录屏演示了，一张静态图片作效果图，代码在后面。
下载
为了满足一般搬砖的需要，特意将资源放出来打包：
下载资源
京公网安备 11010802041100号