初级JS实现轮播图功能

布满荆棘的人生 2022-05-29 11:35 201阅读 0赞

初学JS，经过几天的研究，初步实现轮播图功能，轮播图也是几乎涉及每个网站都有的功能，所以轮播图是必须掌握的JS技能之一，以下是我轮播图的代码，还请各位大佬提出改进的意见（带注释，方便阅读）

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>JS实现无缝轮播</title>  
<style>  
  \*\{margin: 0;padding: 0;\}  
  li\{list-style-type: none;\}  
  .carousel-wrap\{  
    position: relative;overflow: hidden;height: 454px;  
    width: 1200px;border: 1px solid \#CCC;  
    margin: 100px auto;  
  \}  
  .carousel\{width: 8400px;z-index: 9;position: absolute;left: -1200px;top: 0;\}  
  .carousel li \{float: left;width: 1200px;\}  
  .carousel img\{width: 100%;\}  
  .arrow\{z-index: 10;position: absolute;width: 30px;height: 50px;text-align: center;line-height: 50px;  
    top: 50%;margin-top: -25px;text-decoration: none;color: \#333;  
    font-family: '宋体';font-size: 30px;background: rgba(0,0,0,.2);font-weight: 600;  
  \}  
  .arrow-left\{left: 0;\}  
  .arrow-right\{right: 0\}  
  .indicators\{z-index: 10;position: absolute;right: 10px;bottom: 10px;\}  
  .indicator\{float: left;margin-right: 10px;width: 8px;height: 8px;border-radius: 50%; background: \#ccc;\}  
  .indicator.active\{background: \#333;\}  
</style>  
</head>  
  
  
<body>  
  
  
  <div class="carousel-wrap">  
    <ul class="carousel">  
      <li><img src="img/5.jpg" alt=""></li>  
      <li><img src="img/1.jpg" alt=""></li>  
      <li><img src="img/2.jpg" alt=""></li>  
      <li><img src="img/3.jpg" alt=""></li>  
      <li><img src="img/4.jpg" alt=""></li>  
      <li><img src="img/5.jpg" alt=""></li>  
      <li><img src="img/1.jpg" alt=""></li>  
    </ul>  
    <a class="arrow arrow-left" href=""><</a>  
    <a class="arrow arrow-right" href="">></a>  
    <ul class="indicators">  
      <li class="indicator active"></li>  
      <li class="indicator"></li>  
      <li class="indicator"></li>  
      <li class="indicator"></li>  
      <li class="indicator"></li>  
    </ul>  
  </div>  
  <script src="js/move.js"></script>  
  <script>  
    var carousel = document.getElementsByClassName('carousel')\[0\],  
        arrowLeft = document.getElementsByClassName('arrow-left')\[0\],  
        arrowRight = document.getElementsByClassName('arrow-right')\[0\],  
        indicators = document.getElementsByClassName('indicator'),  
        carouselWrap = document.getElementsByClassName('carousel-wrap')\[0\];  
  
  
    var num = 7,carouselWidth=1200,count=1,timer=null;  
    // 左箭头  设置点击事件  
    arrowLeft.onclick = function (e) \{  
      e = e || event  
      e.preventDefault()  
      var l = parseInt(getStyle(carousel, 'left'))  
  
      count++  
      l = -carouselWidth\*count  
      if(count===6)\{  
         move(carousel, \{left: l\}, function () \{  
           count = 1  
           carousel.style.left = -carouselWidth\*count + 'px'  
           setIndicatorStyle()  
         \})  
      \}else\{  
        move(carousel, \{left: l\})  
      \}  
       setIndicatorStyle()  
    \}  
    // 右箭头  实现点击事件  
    arrowRight.onclick = function (e) \{  
      e = e || event  
      e.preventDefault()  
      var l = parseInt(getStyle(carousel, 'left'))  
  
      count--  
      l = -carouselWidth\*count  
  
      if(count===0)\{  
          move(carousel, \{left: l\}, function () \{  
           count = 5  
           carousel.style.left = -carouselWidth\*count + 'px'  
           setIndicatorStyle()  
         \})  
      \}else\{  
        setIndicatorStyle()  
        move(carousel, \{left: l\})  
      \}  
    \}  
  
    // 右下方指示器  
    for(var i=0;i<num-2;i++)\{  
      indicators\[i\].index = i  
      indicators\[i\].onclick = function () \{  
        count = this.index + 1  
        setIndicatorStyle()  
        move(carousel, \{left: -carouselWidth\*count\})  
      \}  
    \}  
  
  
    interval()  // 自动轮播  
  
  
    // 鼠标移入  暂停 自动轮播  
    carouselWrap.onmouseover = function () \{  
      clearInterval(timer)

// 鼠标移开 记录轮播  
    carouselWrap.onmouseout = function () \{  
      interval()  
    \}  
  
    // 设置指示器样式  
    function setIndicatorStyle()\{  
      for(var j=0;j<num-2;j++)\{  
        indicators\[j\].className = "indicator"  
      \}  
      indicators\[count-1\].className = "indicator active"

// 自动轮播  
    function interval() \{  
      timer = setInterval(function () \{  
        count++  
        if(count === 6)\{  
          move(carousel, \{left: -carouselWidth\*count\}, function () \{  
            count = 1  
            carousel.style.left = -carouselWidth\*count + 'px'  
            setIndicatorStyle()  
          \})  
        \}else\{  
          move(carousel, \{left: -carouselWidth\*count\})  
          setIndicatorStyle()  
        \}  
      \}, 2000)  
    \}  
  </script>  
</body>

</html>