利用iscroll4实现轮播图效果实例代码

使用iscroll4实现轮播图效果，可以提高用户的交互体验，下面是实现该效果的攻略：

使用iscroll4实现轮播图效果，可以提高用户的交互体验，下面是实现该效果的攻略：

步骤一：导入iscroll4

在页面中引入iscroll4的js和css文件，可以从以下地址下载：

https://github.com/cubiq/iscroll/archive/v4.2.5.zip

步骤二：页面结构

在页面中添加一个div元素，用于包含轮播图的图片，HTML代码如下：

<div id="slider">
    <ul>
        <li><img src="image1.jpg"></li>
        <li><img src="image2.jpg"></li>
        <li><img src="image3.jpg"></li>
        <li><img src="image4.jpg"></li>
        <li><img src="image5.jpg"></li>
    </ul>
</div>

步骤三：设置样式

为包含轮播图的div元素和其中的ul、li、img元素设置样式，可以根据需要自行调整，以下是展示5张图片，每张图片宽度为300px，高度为200px，代码如下：

#slider {
    width: 300px;
    height: 200px;
    overflow: hidden;
}
#slider ul {
    list-style: none;
    width: 1500px;
    height: 200px;
    padding: 0;
    margin: 0;
}
#slider ul li {
    float: left;
    width: 300px;
    height: 200px;
}
#slider ul li img {
    width: 300px;
    height: 200px;
}

步骤四：编写JavaScript代码

在页面中添加JavaScript代码，获取轮播图的div元素，创建iscroll实例对象，设置其相关属性，启动iscroll，实现轮播图效果，代码如下：

var myScroll;
(function($) {
    myScroll = new iScroll('slider', {
        snap: true,
        momentum: false,
        hScrollbar: false,
        vScrollbar: false,
        onScrollEnd: function() {
            document.querySelector('.indicator > li.active').className = '';
            document.querySelector('.indicator > li:nth-child(' + (this.currPageX+1) +')').className = 'active';
        }
    });
})(jQuery);

示例1：自动循环播放

添加以下JavaScript代码，实现轮播图自动循环播放效果：

var scroller = document.getElementById("slider");
var currentIndex = 0;
var timer = setInterval(function(){
    if(currentIndex >= 4){
        currentIndex = 0;
    } else {
        currentIndex ++;
    }
    myScroll.scrollTo(-currentIndex * 300, 0, 400);
}, 2000);

示例2：轮播图添加分页效果

在轮播图下面添加分页效果，以便用户可以快速切换到指定图片，HTML代码如下：

<div class="indicator">
    <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

添加以下JavaScript代码，实现分页效果：

var indicator = $('.indicator li');
indicator.on('click', function(){
    var index = $(this).index();
    $('.indicator li').removeClass('active');
    $(this).addClass('active');
    myScroll.scrollToElement('#slider ul li:nth-child(' + (index+1) + ')', 400);
});

至此，就完成了使用iscroll4实现轮播图效果的攻略。