黑马商城项目_商城主页_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>