轮播图

最新推荐文章于 2024-05-17 14:37:34 发布

dianyaopeng2968

最新推荐文章于 2024-05-17 14:37:34 发布

阅读量132

点赞数

原文链接：http://www.cnblogs.com/Biu-HB/p/10286188.html

版权

PC端：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }

    .all {
      width: 500px;
      height: 200px;
      padding: 7px;
      border: 1px solid #ccc;
      margin: 100px auto;
      position: relative;
    }

    .screen {
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }

    .screen li {
      width: 500px;
      height: 200px;
      overflow: hidden;
      float: left;
    }

    .screen ul {
      position: absolute;
      left: 0;
      top: 0px;
      width: 3000px;
    }

    .all ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }

    .all ol li {
      float: left;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }

    .all ol li.current {
      background: yellow;
    }

    #arr {
      display: none;
    }

    #arr span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }

    #arr #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div class="all" id='box'>
  <div class="screen">
    <ul>
      <li><img src="1.jpg" width="500" height="200"/></li>
      <li><img src="2.jpg" width="500" height="200"/></li>
      <li><img src="4.jpg" width="500" height="200"/></li>
    </ul>
    <ol>
    </ol>
  </div>
  <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>

<script>
  //要做事先找人
  var box = document.getElementById("box");
  var screen = box.children[0];
  var ul = screen.children[0];
  var ol = screen.children[1];
  var ulLis = ul.children;//所有的图片
  var imgWidth = screen.offsetWidth;
  var arr = document.getElementById("arr");
  var arrRight = document.getElementById("right");
  var arrLeft = document.getElementById("left");
  var timer = null;
  //alert(imgWidth);

  //1.动态生成结构
  //1.1根据图片的数量动态生成按钮
  for (var i = 0; i < ulLis.length; i++) {
    //动态生成按钮
    var li = document.createElement("li");
    //给li添加序号
    //索引号是从0开始的
    //序号=索引号+1
    li.innerHTML = i + 1;
    //追加到ol下面
    ol.appendChild(li);
  }
  var olLis = ol.children;//必须生成之后才能获取到
  olLis[0].className = "current";

  //1.2把第一张图片追加到最后
  //复制第一张图片
  var firstImg = ulLis[0].cloneNode(true);
  //追加到ul后面
  ul.appendChild(firstImg);

  //2.鼠标经过按钮
  //循环遍历 给每一个按钮绑定鼠标经过事件
  for (var j = 0; j < olLis.length; j++) {
    olLis[j].index = j;
    olLis[j].onmouseover = function () {
      //按钮排他
      //干掉所有人
      for (var k = 0; k < olLis.length; k++) {
        olLis[k].className = "";
      }
      //留下我自己
      this.className = "current";
      //根据索引号 通过动画函数移动ul
      //图片移动的位置 和 当前按钮索引号 和 图片宽度有关 而且是负数
      var target = -this.index * imgWidth;
      animate(ul, target);

      //将应该显示的图片的索引号 和 鼠标经过的按钮的索引号 进行统一
      pic = this.index;
      //将应该亮起的按钮的索引号 和 鼠标经过的按钮的索引号 进行统一
      square = this.index;
    }
  }

  //3.鼠标点击箭头
  //鼠标经过box显示arr 清理定时器停止自动播放
  box.onmouseover = function () {
    arr.style.display = "block";
    clearInterval(timer);
  }
  //鼠标离开box隐藏arr 设置定时器继续自动播放
  box.onmouseout = function () {
    arr.style.display = "none";
    timer = setInterval(playNext, 1000);
  }

  //点击 右箭头 显示下一张
  var pic = 0;//pic表示当前图片的索引
  var square = 0;//square表示当前按钮的索引
  arrRight.onclick = function () {
    playNext();
  }
  arrLeft.onclick = function () {
    //判断当前图片的索引pic是否等于最后一张图片的索引ulLis.length-1
    if (pic == 0) {
      pic = ulLis.length - 1;
      ul.style.left = -(ulLis.length - 1) * imgWidth + "px";
    }
    pic--;
    //通过动画函数对ul进行移动
    //target 和 图片索引 和 图片宽度 有关 而且是负数
    var target = -pic * imgWidth;
    animate(ul, target);

    //按钮也应该自动播放
    //如果当前按钮的索引号square大于第一个按钮的索引号0 就--
    if (square > 0) {
      square--;
    } else {
      //如果square等于零 说明到第一个了 这时就应该把他变成最后一个
      square = olLis.length - 1;
    }
    //干掉所有人
    for (var i = 0; i < olLis.length; i++) {
      olLis[i].className = "";
    }
    //留下我自己
    olLis[square].className = "current";
  }

  //4.添加自动滚动
  timer = setInterval(playNext, 1000)

  function playNext() {
    //先判断当前图片的索引pic是否等于最后一张图片的索引ulLis.length-1
    //如果相等马上跳过去然后在执行动画效果 从而实现无缝滚动
    //并且把索引号也归零
    if (pic == ulLis.length - 1) {
      ul.style.left = 0;
      pic = 0;
    }
    pic++;//pic++相当于 pic=pic+1;
    //通过动画函数对ul进行移动
    //target 和 图片索引 和 图片宽度 有关 而且是负数
    var target = -pic * imgWidth;
    animate(ul, target);

    //按钮也应该自动播放
    //如果当前按钮的索引号square小于最后一个按钮的索引号olLis.length - 1 就++
    if (square < olLis.length - 1) {
      square++;
    } else {
      square = 0;
    }

    //干掉所有人
    for (var i = 0; i < olLis.length; i++) {
      olLis[i].className = "";
    }
    //留下我自己
    olLis[square].className = "current";
  }

  //5.完善鼠标经过


  function animate(obj, target) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
      var step = 25;
      //left值越小越靠左
      //obj.offsetLeft小于target
      //obj在target的左侧
      //应该向右走
      //向右走step是正
      /*if (obj.offsetLeft < target) {
       step = 9;
       }
       if (obj.offsetLeft > target) {
       //向左走是负
       step = -9;
       }*/
      var step = obj.offsetLeft < target ? step : -step;

      //Math.abs(obj.offsetLeft - target) 这个表示对象到目标的距离
      //如果对象到目标的距离比一步迈出的距离要大 我就要继续走

      if (Math.abs(obj.offsetLeft - target) > Math.abs(step)) {
        obj.style.left = obj.offsetLeft + step + "px";
      } else {
        //再迈一步就超过目标了
        obj.style.left = target + "px";//手动把对象放置到目标上
        clearInterval(obj.timer);//清理定时器
      }
    }, 15)
  }
</script>

</body>
</html>


移动端：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>无缝滚动轮播图</title>
  <style>
    *{
      margin:0;
      padding:0;
      list-style: none;
    }
    #box{
      width:16rem;
      height: 7.5rem;
      overflow: hidden;
      position: relative;
      margin:0 auto;
    }
    #box ul{
      width:96rem;
      height: 7.5rem;
      transform: translateX(-16rem);

    }
    #box ul li{
      width:16rem;
      height:7.5rem;
      float: left;
      font-size:2rem;
      color: #fff;
      line-height: 7.5rem;
      text-align: center;
    }
  </style>
  <script>

    //这是用js 监听屏幕的大小来改变根元素的font-size
    (function(win,doc){
      function change(){
        doc.documentElement.style.fontSize = doc.documentElement.clientWidth*20/320 +'px';
      }
      change();
      win.addEventListener('resize',change,false);
    })(window,document);
  </script>
  <script>
    document.addEventListener('DOMContentLoaded',function(){
      var oBox = document.getElementById('box');
      var oUl = document.querySelector('#box ul');
      var aLi = oUl.children;
      var iNow = 1;
      var x = -iNow*aLi[0].offsetWidth;
      //在这里设置一个开关,是css运动结束后解锁
      var bReady = true;
      oUl.addEventListener('touchstart',function(ev){
        if(bReady==false){return;}
        bReady = false;
        oUl.style.transition = 'none';
        var disX = ev.targetTouches[0].pageX - x;
        var downX = ev.targetTouches[0].pageX;
        function fnMove(ev){
          x = ev.targetTouches[0].pageX - disX;
          oUl.style.transform = 'translate3d('+x+'px,0,0)';
        }
        function fnEnd(ev){
          var upX = ev.changedTouches[0].pageX;
          //判断是否移动距离大于50
          if(Math.abs(upX - downX)>50){
            //左边移动
            if(upX - downX<0){
              iNow++;
              if(iNow==aLi.length){iNow=aLi.length-1;}
            }else{
              //右边移动
              iNow--;
              if(iNow==-1){iNow=0;}
            }
          }
          //储存此时ul的位置
          x = -iNow*aLi[0].offsetWidth;
          oUl.style.transform = 'translate3d('+x+'px,0,0)';
          oUl.style.transition = '200ms all ease';

          //监听li 当移动到两端的li时  瞬间移回
          function tEnd(){
            if(iNow==5){
              iNow=1;
            }
            if(iNow==0){iNow=4;}
            oUl.style.transition = 'none'
            x = -iNow*aLi[0].offsetWidth;
            oUl.style.transform = 'translate3d('+x+'px,0,0)';
            bReady = true;
          }
          oUl.addEventListener('transitionend',tEnd,false);
          //释放内存
          document.removeEventListener('touchend',fnEnd,false);
          document.removeEventListener('touchmove',fnMove,false);
        }

        document.addEventListener('touchmove',fnMove,false);
        document.addEventListener('touchend',fnEnd,false);
        //阻止默认事件
        ev.preventDefault();
      },false);
    },false);
  </script>
</head>
<body>
<div id="box">
  <ul>
    <li style ="background:green">3</li>
    <li style="background: red;">0</li>
    <li style="background: yellow;">1</li>
    <li style="background: blue;">2</li>
    <li style ="background:green">3</li>
    <li style="background: red;">0</li>
  </ul>
</div>
</body>
</html>