js 13完整的轮播图

我就是我 2022-03-11 08:54 180阅读 0赞

<!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: \#DB192A;  
    \}

\#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="images/1.jpg" width="500" height="200"/></li>  
      <li><img src="images/2.jpg" width="500" height="200"/></li>  
      <li><img src="images/3.jpg" width="500" height="200"/></li>  
      <li><img src="images/4.jpg" width="500" height="200"/></li>  
      <li><img src="images/5.jpg" width="500" height="200"/></li>  
    </ul>  
    <ol>  
    </ol>  
  </div>  
  <div id="arr"><span id="left"><</span><span id="right">></span></div>  
</div>  
<script src="common.js"></script>  
<script>  
  //获取最外面的div  
  var box = my$("box");  
  //获取相框  
  var screen = box.children\[0\];  
  //获取相框的宽度  
  var imgWidth = screen.offsetWidth;  
  //获取ul  
  var ulObj = screen.children\[0\];  
  //获取ul中的所有的li  
  var list = ulObj.children;  
  //获取ol  
  var olObj = screen.children\[1\];  
  //焦点的div  
  var arr = my$("arr");

//克隆一个ul中第一个li,加入到ul中的最后=====克隆  
  ulObj.appendChild(ulObj.children\[0\].cloneNode(true));

//自动播放  
 var timeId= setInterval(clickHandle,1000);

//鼠标进入到box的div显示左右焦点的div  
  box.onmouseover = function () \{  
    arr.style.display = "block";  
    //鼠标进入废掉之前的定时器  
    clearInterval(timeId);  
  \};  
  //鼠标离开到box的div隐藏左右焦点的div  
  box.onmouseout = function () \{  
    arr.style.display = "none";  
    //鼠标离开自动播放  
    timeId= setInterval(clickHandle,1000);  
  \};  
  //右边按钮  
  my$("right").onclick =clickHandle;  
  function clickHandle() \{  
    //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,  
    //所以,如果用户再次点击按钮,用户应该看到第二个图片  
    if (pic == list.length - 1) \{  
      //如何从第6个图,跳转到第一个图  
      pic = 0;//先设置pic=0  
      ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置  
    \}  
    pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了  
    animate(ulObj, -pic \* imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片  
    //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,  
    if (pic == list.length - 1) \{  
      //第五个按钮颜色干掉  
      olObj.children\[olObj.children.length - 1\].className = "";  
      //第一个按钮颜色设置上  
      olObj.children\[0\].className = "current";  
    \} else \{  
      //干掉所有的小按钮的背景颜色  
      for (var i = 0; i < olObj.children.length; i++) \{  
        olObj.children\[i\].removeAttribute("class");  
      \}  
      olObj.children\[pic\].className = "current";  
    \}

\};  
  //左边按钮  
  my$("left").onclick = function () \{  
    if (pic == 0) \{  
      pic = 5;  
      ulObj.style.left = -pic \* imgWidth + "px";  
    \}  
    pic--;  
    animate(ulObj, -pic \* imgWidth);  
    //设置小按钮的颜色---所有的小按钮干掉颜色  
    for (var i = 0; i < olObj.children.length; i++) \{  
      olObj.children\[i\].removeAttribute("class");  
    \}  
    //当前的pic索引对应的按钮设置颜色  
    olObj.children\[pic\].className = "current";

\};

//设置任意的一个元素,移动到指定的目标位置  
  function animate(element, target) \{  
    clearInterval(element.timeId);  
    //定时器的id值存储到对象的一个属性中  
    element.timeId = setInterval(function () \{  
      //获取元素的当前的位置,数字类型  
      var current = element.offsetLeft;  
      //每次移动的距离  
      var step = 10;  
      step = current < target ? step : -step;  
      //当前移动到位置  
      current += step;  
      if (Math.abs(current - target) > Math.abs(step)) \{  
        element.style.left = current + "px";  
      \} else \{  
        //清理定时器  
        clearInterval(element.timeId);  
        //直接到达目标  
        element.style.left = target + "px";  
      \}  
    \}, 10);  
  \}  
</script>

//  var num=0;  
  //  function f1()\{  
  //  
  //    num=1000;  
  //  \}  
  //  f1();  
  //  console.log(num);  
</script>  
</body>  
</html>