banner.js 1.5 KB
/*
 * author: chenglong
 */

var Slide = require('../common/yohoui/YH.slide');
var $ = require('yoho.jquery');

var $contain = $('.sale-list-banner');
var $item = $contain.find('li');
var index = 0;
var pagationStr = '';
var pagationBoxStr = '';
var i;
var current = true;
var slide;

for (i = 0; i < $item.length; i++) {

    if (i === 0) {
        pagationStr += '<span class="active"></span>';
    } else {
        pagationStr += '<span></span>';
    }
}

pagationBoxStr = '<div class="sale-list-pagation"><div>' + pagationStr + '</div></div>';

$contain.append($(pagationBoxStr));

slide = new Slide({
    length: $item.length,
    loop: true,
    auto: true,
    timeout: 2,
    index: 0
});


slide.on('change', function(data) {
    if (current) {
        current = false;
    } else {
        return;
    }
    index++;


    $('.sale-list-pagation').find('span').removeClass('active');
    $item.eq(data.from).animate({
        opacity: 0
    }, 300);
    $item.eq(data.to).css({
        zIndex: index
    }).animate({
        opacity: 1
    }, 300, function() {
        current = true;
    });

    $('.sale-list-pagation').find('span').eq(data.to).addClass('active');

});

$contain.hover(function() {
    if (current) {
        slide.pause();
    }

}, function() {
    slide.resume();
});

$('.sale-list-pagation span').click(function() {

    var index = $(this).index();

    if (current) {
        slide.go(index);
    }
});

slide.init();