发表于： 2017-03-22 22:10:43

任务十五

今天完成的事情

1. 搬家。好累。腿抽筋。
2.完成轮播图样式结构的编写。
2.完成轮播图的点击左右按钮滑动的效果。
附上简单的js相关代码（只实现了左右滑动）

window.onload=function() {
   //函数声明
   function $(id) {
      return document.getElementById(id);
   }
   function setCircle(obj) {
      for(var i=0;i<obj.length;i++){
         obj[i].className="slide-ctrl-con";
      }
   }
   //未完成
   function circleSlide() {
      var index=this.innerHTML;
      if(index>iNow){
         
      }
   }
   //变量声明
   var iNow=0;
   var slider_wrap=$("slide-wrap");
   var imgs=document.getElementsByClassName("slide-img");
   var ctrl_pre=$("slider_ctrl_prev");
   var ctrl_next=$("slider_ctrl_next");
   var slider_ctrl=$("slide_ctrl");
   var length=imgs.length;
   //生成小圆点按钮
   for(var i=0;i<length;i++){
      var span=document.createElement("span");
      slider_ctrl.appendChild(span);
      span.innerHTML=i;
      span.className="slide-ctrl-con";
   }
   //图片初始定位
   var scrollWidth=slider_wrap.clientWidth;
   for(var i=0;i<length;i++){
      imgs[i].style.left=scrollWidth+"px";
   }
   imgs[0].style.left=0;
   //左侧按钮
   ctrl_pre.onclick=function () {
      animate(imgs[iNow],{left: scrollWidth});
      --iNow<0?iNow=length-1:iNow;
      imgs[iNow].style.left=-scrollWidth+"px"
      animate(imgs[iNow],{left: 0});
   }
   //右侧按钮
   ctrl_next.onclick=function () {
      animate(imgs[iNow],{left: -scrollWidth});
      ++iNow>5?iNow=0:iNow;
      imgs[iNow].style.left=scrollWidth+"px"
      animate(imgs[iNow],{left: 0});
   }
   //底部小圆点
   for(var i=0;i<length;i++){
      slider_ctrl.children.addEventListener("click",circleSlide,false);
   }
}

效果参见下方效果展示。

明天计划的事情

1.完成轮播图自动播放的效果。
2.完成底部圆点随图片的切换而切换的效果。

遇到的问题

1.首先在布局上，因为布局使用的是绝对定位，外部div无法获取高度，解决方案是div内放置一张不绝对定位的图片，这样就可以撑起外部高度了。但是这样的话在html结构上就多了一张无意义的图片。网上找到的代码基本上都是固定宽高的，不能实现响应式。很想知道bootstrap的轮播插件在不放置多余图片的情况下是如何实现轮播效果并且支持响应式。

2.因为使用的是绝对定位，所以在加载页面时，图片一张一张重叠加载，而bootstrap加载的时候是直接加载的第一张图片。所以图片的布局要改一下，css代码如下：

.img-wrap{
  img{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 100%;
    &:first-child{
      top: 0;
      left: 0;
    }
  }