zoukankan      html  css  js  c++  java
  • jajx交互部分蘑菇街实例

    $(document).ready(function(){

    //today 轮播
    $.get("time_banner.json",function(data,status){    //找文件
    console.log(data)
    console.log(data.data[19221].list);        
    $.each(data.data[19221].list,function(i,el){  //循坏
    console.log(el.image);           //查看元素图片
    var b = "<img src="+el.image+">";      //定义变量   图片拼接
    $(".carsoul .swiper-wrapper").append(b);            //为防止轮播图冲突 用父级来找
    $(".carsoul .swiper-wrapper img").attr("class","swiper-slide");          //给设置本身就有的class swiper slider
    });

    var mySwiper = new Swiper ('.carsoul .swiper-container', {     效果
    direction: 'horizontal', // 垂直切换选项
    autoplay: {
    delay: 2000,
    },
    loop: true, // 循环模式选项
    })

    //鼠标停止
    $("#bb").mouseover(function(){                        轮播停止
    mySwiper.autoplay.stop();
    });
    $("#bb").mouseout(function(){                        轮播开始
    mySwiper.autoplay.start();
    });

    //banner shop

    思路:找json文件找出来图片,然后添加空的div,设置空的div来添加东西,给div设置类名和属性,因为拿的东西太多,用循坏来添加每个的, swiperslider的宽高不用来设置由内容来撑开,设置swiperslider的页数和间距  
    });
    $.get("today_have1.json",function(data){
    var dil = (data.data[98662].list)
    console.log(data);

    循坏
    $.each(data.data[98662].list,function(i,el){
    $(".banner-shop .swiper-wrapper").append("<div></div>");          //新建div
    $(".banner-shop .swiper-wrapper div").attr("class","swiper-slide");  //设置属性和值

    })

    //循环
    for (var i=0; i<dil.length; i++){
    var c = "<img src='"+dil[i].itemImage+"'/>";       //图片
    $(".banner-shop .swiper-slide").eq(i).append(c);
    var size ="<p>"+dil[i].title+"</p>";      //文字
    $(".banner-shop .swiper-slide").eq(i).append(size);
    var size1 ="<span>"+"¥"+dil[i].salePrice+"</span>"+"<span>"+"¥"+dil[i].price+"</span>";   //左右的字
    $(".banner-shop .swiper-slide").eq(i).append(size1);

    }
    var mySwiper = new Swiper ('.banner-shop .swiper-container', {
    slidesPerView : 4,              //重点
    slidesPerGroup : 4,
    spaceBetween : 30,
    direction: 'horizontal', // 垂直切换选项
    loop: true, // 循环模式选项
    autoplay: {
    delay: 2000,
    },
    navigation: {
    nextEl: '.swiper-button-next',                    //左右按钮
    prevEl: '.swiper-button-prev',
    },
    })

    });

    //hotwords
    $.get("select_hot.json",function(data,status){
    console.log(data.data.hotWord.data);
    $.each(data.data.hotWord.data,function(i,el){
    var a = "<a style='color:"+el.color+";'>"+el.frontword+"</ a>";
    $("#hotwords").append(a)
    })
    //jinribiqiang
    $.get("today_have.json",function(data){
    // console.log(data.data[98662].list[0].endTime);
    var today =new Date(1538236799)*1000;
    console.log(today);
    setInterval(function () {
    var nowtime = new Date();
    var time = today - nowtime;
    var hour = parseInt(time / 1000 / 60 / 60 % 24);
    var minute = parseInt(time / 1000 / 60 % 60);
    var seconds = parseInt(time / 1000 % 60);
    if (hour <10) hour = '0' + hour;
    if (minute <10) minute = '0' + minute;
    if (seconds <10 )seconds = '0' + seconds;
    $("#time_h").html(hour);
    $("#time_m").html(minute);
    $("#time_s").html(seconds);
    }, 1000);
    })
    })

    });

  • 相关阅读:
    iframe脸面的页面和父页面之间的交互方法
    iframe高度自适应
    获取html元素所在页面的坐标
    自制的几个jquery插件
    将DataTable转换成Json格式
    QL 获取当前日期,年、月、日、周、时、分、秒
    DropdownList异步刷新GridView数据
    图片热区——map的用法
    Chart控件文档
    母版页改变被嵌套的页面中的控件ID的解决方法
  • 原文地址:https://www.cnblogs.com/lh0127/p/9722349.html
Copyright © 2011-2022 走看看