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

来源：互联网发布：淘宝恒天然wpc80分装编辑：程序博客网时间：2024/05/17 23:13

来源

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.4var 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动画，也没办法录屏演示了，一张静态图片作效果图，代码在后面。
这里写图片描述

下载

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

下载资源

0 0