H5+C3+ajax+fullPage+jquery商城首页

动态页面 H5+C3

商城首页

轮播图

 //轮播图操作
  function bannerOption() {
   
    var swiper = document.getElementById("swiper"); //获取轮播图包裹层元素
    var swiperItem = swiper.getElementsByClassName("swiper-item"); //获取轮播图列表
    var prev = document.getElementsByClassName("prev")[0]; //获取上一张按钮
    var next = document.getElementsByClassName("next")[0]; //获取下一张按钮
    var indicators = document.getElementsByClassName("indicator"); //获取圆点列表
    var index = 0; //当前轮播图索引，默认第一章
    var timer = null; //定时器

    //设置轮播图的透明度和位移
    for (var i = 0; i < swiperItem.length; i++) {
   
      if (index == i) {
   
        swiperItem[i].style.opacity = 1;
      } else {
   
        swiperItem[i].style.opacity = 0;
      }
      swiperItem[i].style.transform = "translateX(" + (-i * swiperItem[0].offsetWidth) + "px)";
    }

    //给圆点添加点击事件
    for (var k = 0; k < indicators.length; k++) {
   
      indicators[k].onclick = function () {
   
        clearInterval(timer);
        var clickIndex = parseInt(this.getAttribute("data-index"));
        index = clickIndex;
        changeImg();
      }
    }
    //上一张按钮
    prev.onclick = function () {
   
      clearInterval(timer);
      index--;
      changeImg();
    }
   //下一张按钮
    next.onclick = function () {
   
      clearInterval(timer);
      index++;
      changeImg();
    }
    //鼠标经过停止播放
    swiper.addEventListener("mouseover", function () {
   
      clearInterval(timer);
    }, false);
    //鼠标移出后自动播放
    swiper.addEventListener("mouseout", function () {
   
      autoChange();
    }, false)

    //更换图片