islider实现图片轮播效果

最新推荐文章于 2022-08-22 08:52:23 发布

原创最新推荐文章于 2022-08-22 08:52:23 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

webapp 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了如何利用iSlider组件实现手机平台上的图片轮播效果，包括自动播放、底部小圆点指示器等功能。iSlider是一个高性能、无插件依赖的JavaScript滑动组件，支持多种自定义动画和回调函数，同时具备手势缩放和图片预加载等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.youkuaiyun.com/detail/welovesunflower/8728747