zepto 追加 html,zepto.html

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

登录

• 
• 
• 
• 
• 
• 
• 
• 

• 

  商品分类

• 

  商品分类

• 

  商品分类

• 

  商品分类

• 

  商品分类

• 

  商品分类

• 

  商品分类

• 

  商品分类

圣诞节秒杀

0

0

:

0

0

:

0

0

:

0

0

过节...

• 

  ¥10.00

  ¥20.00

• 

  ¥10.00

  ¥20.00

• 

  ¥10.00

  ¥20.00

京东超市

京东超市

京东超市

$(function () {

var banner = $('.jd_banner');

var bannerWidth = banner.width();

var imgBox = $('.banner_img');

var circle = $('.banner_circle').find('li');

var first = imgBox.find('li:first-of-type');

var last = imgBox.find('li:last-of-type');

imgBox.append(first.clone());

last.clone().insertBefore(first);

var lis = imgBox.find('li');

var count = lis.length;

imgBox.width(bannerWidth * count);

lis.each(function (index, element) {

$(lis[index]).width(bannerWidth);

})

imgBox.css('left',-bannerWidth)

window.onresize = function () {

bannerWidth = banner.width();

imgBox.width(bannerWidth * count);

lis.each(function (index, element) {

$(lis[index]).width(bannerWidth);

})

imgBox.css('left',-bannerWidth)

}

var index = 1;

function imgAnimate() {

imgBox.animate(

{'left':-index * bannerWidth},

500,

'ease-in-out',

function () {

if (index == count -1) {

index = 1;

imgBox.css('left',-index * bannerWidth)

} else if (index == 0) {

index = count - 2;

imgBox.css('left',-index * bannerWidth)

}

circle.removeClass('active').eq(index - 1).addClass('active')

})

}

var timerId;

function startTime () {

timerId = setInterval(function () {

index++;

imgAnimate();

},2000)

}

startTime();

imgBox.on('swipeLeft',function () {

index++;

clearInterval(timerId);

imgAnimate();

startTime()

})

imgBox.on('swipeRight',function () {

index--;

clearInterval(timerId);

imgAnimate();

startTime()

})

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史