jQuery UI商品图片展示及添加购物车结算代码

js代码

<script type=\"text/javascript\" src=\"js/jquery.min.js\"></script>
<script type=\"text/javascript\">
    var index = 0;
    var o = 0;
    var i = 1;
    // var money = $(\'.p\')
    // 预览图片往右
    $(\'.next\').click(function () {
        $(\'#shop ul\').css({transform:\'translateX(-300px)\'});
      
    })
    // 预览图片往左
    $(\'.pre\').click(function () {
        $(\'#shop ul\').css({transform:\'translateX(0px)\'});
     
    })
    //加数量
    $(\'.add\').click(function () {
        index++;
        $(\'#number\').val(index);
        $(\'.prices\').css({opacity:\'1\'});
        operation();
    })
    //减数量
    $(\'.reduce\').click(function () {
        index--;
        if (index<0) {
            return index=0;
        }
        $(\'#number\').val(index);
        operation();
    })
    //点击输入框时显示支付价格
    $(\'#number\').click(function () {
        $(\'.prices\').css({opacity:\'1\'});
    })
    //直接修改商品数量，失去焦点后计算总价
    $(\'#number\').blur( function () {
         var num = parseInt($(this).val())*18.88
         console.log(num)
        $(\'.prices\').text(num.toFixed(2));
    })
    //打开支付框
    $(\'.buy\').click(function () {
        $(\'main\').css({opacity:\'0.5\'});
        $(\'#pay\').css({zIndex:\'1\'});
        $(\'.pays\').text(\'You need to  \'+ $(\'.prices\').text() + \'  RMB\')
    })
    //关闭支付框
    $(\'.close\').click(function () {
        $(\'main\').css({opacity:\'1\'});
        $(\'#pay\').css({zIndex:\'-1\'});
    })

    
    //打开购物车
    $(\'#open\').click(function () {
        o++;
        if (o%2==0) {
        $(\'main\').css({width:\'400px\'});
        $(\'#cart\').css({width:\'0px\',transform:\'translateX(500px)\'});
        }else{
            $(\'main\').css({width:\'900px\'});
        $(\'#cart\').css({width:\'500px\',transform:\'translateX(0px)\'});
        }
    })
    //点击Add Carts 就往购物车添加商品
    $(\'.join\').click(function () {
        $(\'.num\').css({opacity:\'1\'})
        $(\'.num\').text(\'+\'+ i);
        $(\'#cart .cart-\'+i).css({display:\'block\'});
        i++;
       
    })
       //关闭添加的商品部份
       $(\'#cart .fa\').click(function () {
        i--;
        $(\'#cart .cart-\'+i).css({display:\'none\'});
      
    })



    //添加商品出现+1
    $(\'.join\').mouseleave(function () {
        $(\'.num\').css({opacity:\'0\'})
    })
 

    function operation() {//计算总价的方法
        var num = index * 18.88;
        $(\'.prices\').text(num.toFixed(2));
    }
    function close() {
        
    }
    // number();
</script>