JavaScript简易轮播图实现及页面数据分离

具体实现步骤:

1 创建一个外部div:outer 用来设置轮播图在网页上的位置并设置overflow: hidden将多余图片先隐藏
2 创建一个内部div:inner 用来存放图片并设置position: absolute以便之后通过设置left值来改变位置以显示图片
3 并且设置transition: all 1s可以使图片切换跟顺畅
4 在JS中创建一个对象数组imgCollection保存图片的src数据
5 然后在JS中动态创建img元素使用 var chil = document.createElement(‘img’)
6 并设置其属性
chil.setAttribute(‘src’, imgCollection[i].src)
chil.setAttribute(‘alt’, i)
chil.setAttribute(‘id’, i + 1)
7 然后将其添加为inner的子元素 par.appendChild(chil)
8 最后创建两个click函数来完成切换功能

1.html:

  <div class="outer">
    <div id="inner"></div>
    <div class="controlLeft">
      <i class="fa fa-arrow-left" onclick="changePrev()"></i>
    </div>
    <div class="controlRight">
      <i class="fa fa-arrow-right" onclick="c