islider实现图片轮播效果
1. islider组件
官网：http://be-fe.github.io/iSlider/index.html
git地址：https://github.com/BE-FE/iSlider
从git下载demo，可以看到几种滑动效果，滑动方式主要有pic和dom
以下是官网的介绍：
iSlider是一个表现出众，无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素，例如图片或者DOM元素。它有如下特性：
性能极好，硬件加速，极小占用内存
能够自定义动画，自带的动画包括 default, rotate, depth, flow, flip, card
你能够简易地添加回调函数(onslidestart, onslide, onslideend, onslidechange)
我们还支持滑动衰减效果，循环效果，自动滑动效果，水平/垂直滑动
支持桌面鼠标动作，方便测试
支持图片预加载，改善用户体验
支持手势缩放，解决图片太大无法看清问题
2. 这里要实现类似webapp上图片轮播的效果，主要是自动播放，底部小圆点
使用dom方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
<link href="islider.css" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#iSlider {
position: absolute;
width: 100%;
height:62.5%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="iSlider"></div>
<script type="text/javascript" src="islider.js"></script>
<script>
var list = [
{
'content': '<div><a href="#"><img style="width:100%;height:100%;position:absolute" alt="" src="imgs/1.jpg"></a></div>'
},
{
'content': '<div><a href="#"><img style="width:100%;height:100%;position:absolute" alt="" src="imgs/2.jpg"></a></div>'
}, {
'content': '<div><a href="#"><img style="width:100%;height:100%;position:absolute" alt="" src="imgs/3.jpg"></a></div>'
}];
var islider = new iSlider({
data: list,
type: 'dom',
dom: document.getElementById("iSlider"),
duration: 1000,
isLooping: true,
isAutoPlay: true,
fixPage: true
});
islider.addDot();
</script>
</body>
</html>
为了使小圆点紧挨着图片底部显示，对官方样式做了一点修改：
.islider-dot-wrap {
width: 80%;
height: 10%;
margin: 0px auto;
position: absolute;
padding: 0px;
left: 0px;
top:63%;
right: 0px;
bottom: 0px;
z-index: 10000;
text-align: center;
}
.islider-dot {
position: relative;
display: inline-block;
width: 0.8em;
height: 0.8em;
border-radius: 50%;
border: 1px solid rgb(255, 255, 255);
list-style-type: none;
margin: 5px;
background-color: #dfdfdf;
}
.islider-dot.active {
background-color: rgba(34,131,255,.8);
}
width和height用百分比是为了自适应屏幕宽度，关于自适应网页设计，见：http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
demo地址：http://download.csdn.net/detail/welovesunflower/8728747
