您的位置：首页 > Web前端 > CSS

【翻译搬运】一个基于css3的图片轮换程序

2015-09-17 18:29 811 查看

来源

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); /* 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;
}

//--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动画，也没办法录屏演示了，一张静态图片作效果图，代码在后面。

下载

为了满足一般搬砖的需要，特意将资源放出来打包：

下载资源

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航