javascript写的轮播图

欢迎指点！

预览图：

 

 

 

可以通过 https://littlehiuman.github.io/08-Carousel/index-2.html 查看本页面效果。

还有另一种的效果：https://littlehiuman.github.io/08-Carousel/index.html。

代码在这里：https://github.com/littleHiuman/littleHiuman.github.io/tree/master/08-Carousel

https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~

 

 区别: 按钮组、左箭头、右箭头的实现是一样的。

index.html 通过改变left的值来进行图片轮播，所以布局上有两个外容器

index-2.html 通过获取索引来进行图片轮播，布局上只需要一个外容器

 

代码：

 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>轮播图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .containner {
      position: relative;
      overflow: hidden;
      width: 900px;
      height: 600px;
    }

    .containner:hover #prev,
    .containner:hover #next {
      display: block;
    }

    #prev,
    #next {
      display: none;
      position: absolute;
      top: 0;
      width: 15%;
      height: 100%;
      font-size: 50px;
      color: DodgerBlue;
      background: rgba(244, 50, 0, .1);
      text-align: center;
      cursor: pointer;
    }

    #prev {
      left: 0;
    }

    #next {
      right: 0;
    }

    .picGroup {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .picGroup img {
      display: block;
      width: 100%;
      height: 100%;
    }

    .titleGroup {
      position: absolute;
      top: 80%;
      width: 100%;
      height: 36px;
      line-height: 36px;
      background: rgba(0, 0, 0, .2);
      text-align: center;
      color: #fff;
    }

    .titleGroup p {
      display: none;
    }

    .btnGroup {
      position: absolute;
      top: 90%;
      left: 50%;
      transform: translateX(-50%);
    }

    .btnGroup li {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin: 4px;
      background: #fff;
      cursor: pointer;
    }

  </style>
</head>

<body onselectstart="return false;" style="-moz-user-select:none;">
  <div class="containner">
    <div class="picGroup">
      <img src="http://img3.imgtn.bdimg.com/it/u=1525767941,1365223150&fm=26&gp=0.jpg">
      <img src="http://img0.imgtn.bdimg.com/it/u=501564876,418990644&fm=26&gp=0.jpg">
      <img src="http://img0.imgtn.bdimg.com/it/u=2402875933,3197600583&fm=26&gp=0.jpg">
    </div>
    <div class="titleGroup">
      <p>标题1</p>
      <p>标题2</p>
      <p>标题3</p>
    </div>
    <ul class="btnGroup">
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <span id="prev"><</span>
    <span id="next">></span>
  </div>
</body>

<script>
  var current = 0;
  var picGroupItem = document.getElementsByClassName('picGroup')[0];
  var imgHeight = picGroupItem.offsetHeight;
  var ctrlLeft = document.getElementById('prev');
  var ctrlRight = document.getElementById('next');
  ctrlLeft.style.lineHeight = imgHeight+'px';
  ctrlRight.style.lineHeight = imgHeight+'px';

  var btnGroupItem = document.getElementsByClassName('btnGroup')[0];
  btnGroupItem.children[current].style.background = 'red';

  var titleGroupItem = document.getElementsByClassName('titleGroup')[0];
  titleGroupItem.children[current].style.display = 'block';

  var aLi = document.getElementsByTagName('li');
  var title = document.getElementsByTagName('p');
  var picLen = picGroupItem.children.length;

  var timer;

  for (var i = 0; i < aLi.length; i++) {
    aLi[i].index = [i];
    aLi[i].onclick = function () {

      clearInterval(timer);
      timer = setInterval(run, 2000);

      current = this.index;

      picGroupItem.style.top =  -imgHeight * current + 'px';
      otherChange();
    }
  }

  // 开始轮播
  timer = setInterval(run, 2000);
  function run() {
    current++
    current %= picLen
    picGroupItem.style.top =  -imgHeight * current + 'px';
    otherChange();
  }

  //按钮、title的事件
  function otherChange() {
    for (var i = 0; i < picLen; i++) {
      if (i == current) {
        aLi[i].style.background = "red";
        title[i].style.display = "block";
      } else {
        aLi[i].style.background = "";
        title[i].style.display = "";
      }
    }
  }

  ctrlLeft.onclick = function () {
    clearInterval(timer);
    timer = setInterval(run, 2000);

    --current;
    current = current<0?picLen+current:current;
    current %= picLen;

    picGroupItem.style.top =  -imgHeight * current + 'px';
    otherChange();
  }

  ctrlRight.onclick = function () {
    clearInterval(timer);
    timer = setInterval(run, 2000);

    ++current;
    current %= picLen;

    picGroupItem.style.top =  -imgHeight * current + 'px';
    otherChange();
  }
</script>
</body>

</html>
posted @ 2016-11-07 12:15  hiuman  阅读(198)  评论(0)  编辑  收藏  举报