多张图片轮播实现思路分析

判断按钮是否可点击的思路:

  1. 先获取图片的总数(length)
  2. 总页数 = 图片的总数 / 每页显示图片的个数
  3. 再对页数 通过Math.ceil()向上舍入获得整数
  4. 当页数等于总页数时,为第一页(左边按钮不可点)
  5. 页数为1时,为最后一页(右边按钮不可点)

每翻页一次 :
页数要递减(向左) 递增(向右)
同时修改left样式来控制滑动的方向 递减-100%(向左)递增100%(向右)移动

/*这是一个简单的自动轮播demo*/
!
function($) {

$.fn.slider = function(option) {

option = $.extend({
itemPage: 3,
btnPrev: 'prev',
btnNext: 'next'
},
option || {});

var idx = 0,
time = null,
self = $(this),
len = lens = Math.ceil(self.find('li').length / option.itemPage),
prev = $('.' + option.btnPrev),
next = $('.' + option.btnNext);

function times() {
time = setInterval(function() {
if (len == 1) {
return;
}
nextPage();
},
2e3) //e代表0 2e3就是2000 这样写是为了方便打字
}

function nextPage() {
if (len == 2) next.addClass('disabled');
if (len == 1) return;
prev.removeClass('disabled');
self.css('left', idx - 100 + '%');
idx = idx - 100;
len--;
}

function prevPage() {
if (len == lens - 1) prev.addClass('disabled');
if (len == lens) return;
next.removeClass('disabled');
self.css('left', idx + 100 + '%');
idx = idx + 100;
len++;
}

function init() {
self.css('width', self.find('li').length * self.find('li').eq(0).width());
self.show();
times();
self.parent().hover(function() {
clearInterval(time)
},
function() {
times();
}) next.click(nextPage);
prev.click(prevPage);
}
init();
}

} (jQuery);

$('#preview').slider();

查看完整demo:多张图片轮播实现示例
下载源码:下载源码

发表评论

电子邮件地址不会被公开。 必填项已用*标注