黑马商城项目_商城主页_zepto应用

zepto中文网

1、 Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。

2、插件



3、优点

（1）zepto的选择器功能强大

（2）zepto提供animate方法直接设置动画参数

（3）zepto提供css方法直接样式

（4）zepto封装了手指滑动swipe和触碰tap事件

4、优化后代码

<!--引用核心文件-->
<script src="js/zepto/zepto.min.js"></script>
<!--引用扩展性选择器-->
<script src="js/zepto/selector.js"></script>
<!--引用动画模块-->
<script src="js/zepto/fx.js"></script>
<!--引用移动touch-->
<script src="js/zepto/touch.js"></script>
<script>
$(function(){
/*banner*/
var $banner = $('.hm_banner');
var width = $banner.width();

/*图片盒子*/
var imageBox = $banner.find('ul:eq(0)');
/*点盒子*/
var pointBox = $banner.find('ul:eq(1)');
/*所有的点*/
var points = pointBox.find('li');

var animateFuc = function(){
imageBox.animate({'transform':'translateX('+(-index*width)+'px)'},200,'ease',function(){
if(index >= 9){
index = 1;
/*瞬间定位*/
imageBox.css({'transform':'translateX('+(-index*width)+'px)'});
}else if(index <= 0){
index = 8;
imageBox.css({'transform':'translateX('+(-index*width)+'px)'});
}
/*点盒子 对应*/
points.removeClass('now').eq(index-1).addClass('now');
});
};

var index =1;
var timer = setInterval(function(){
index ++;
/*做动画*/
animateFuc();
},5000);

imageBox.on('swipeLeft',function(){
index ++;
animateFuc();
});

imageBox.on('swipeRight',function(){
index --;
animateFuc();
});

});
</script>