islider实现图片轮播效果

来源：互联网发布：芗里芗亲app软件下载编辑：程序博客网时间：2024/06/09 21:11

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

0 0