前两天在github上逛发现slick排在了第一，正好是一个图片翻转的例子，所以把它clone下来，留着以后用！这里有源码。https://github.com/kenwheeler/slick.git
(function (factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else {
factory(jQuery);
}
}(function ($) {
'use strict';
var Slick = window.Slick || {};
Slick = (function () {
function Slick(element, settings) {
var _ = this, responsiveSettings, breakpoint;
_.defaults = {
//默认参数
};
_.initials = {
//初始化的一些属性
};
_.init();//初始化
}
return Slick;
}()); 下面就是Slick.prototype.[methods]和$.fn.slick等各种方法
slick主要是将Slick作为参数传入匿名函数中，利用回调函数的形式，将jQuery传给了Slick，在回调函数的最下面利用$.fn.slick 实现形如$(selector).slick(setting)的方法。
下面的例子是从stackoverflow上看到的，记录下来吧！原问题地址
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.Slider
{
width: 800px;
height: 350px;
overflow: hidden;
margin: 30px auto;
background-repeat: no-repeat;
background-position: center;
}
.Shadow
{
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSb6KDmhtvsBAzkpXLHcijTuE_gYERTMkx5xpkbUS0lwV8ByTFx);
background-repeat: no-repeat;
background-position: top;
width: 864px;
height: 144px;
margin: -60px auto;
}
.Slider img{
width: 800px;
height: 350px;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="jquery-ui.min.js"></script>
<script type="text/javascript">
function Slider()
{
$(".Slider #1").show("fade",500);
$(".Slider #1").delay(5500).hide("slide",{direction:'left'},500);
}
var slderCount=$(".Slider img").length;
var count=2;
setInterval(function(){
$(".Slider #"+count).show("slide",{direction:'right'},500);
$(".Slider #"+count).delay(5500).hide("slide",{direction:'left'},500);
if(count==3)
{
count=1;
}
else
{
count=count+1;
}
},6000);
//jquery ui
</script>
</head>
<body onload="Slider();">
<div class="Slider">
<img id="1" src="1.jpg" border="0" alt="Helping develop"/>
<img id="2" src="2.jpg" border="0" alt="Helping concrete" />
<img id="3" src="3.jpg" border="0" alt="no develop" />
</div>
<div class="Shadow"> </div>
</body>
</html>