js實現(xiàn)輪播圖制作方法

更新時間：2021年06月25日 13:36:22 作者：一個愛前端開發(fā)的小朋友

這篇文章主要為大家詳細介紹了js實現(xiàn)輪播圖的制作方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)輪播圖展示的具體代碼，供大家參考，具體內容如下

效果如圖所示

代碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  
  <style type="text/css">
   
   * {
    padding: 0;
    margin: 0;
   }
   .container {
    position: relative;
    width: 600px;
    height: 300px;
    margin:  30px auto;
    overflow: hidden;
   }
       .left {
     display: none;
     position: absolute;
     top: 50%;
     left: -20px;
     transform: translateY(-50%);
     width:50px;
     height: 50px;
     border-top-right-radius: 50%;
     border-bottom-right-radius: 50%;
     background-color: rgba(0,0,0,0.5);
     z-index: 999;
    }
    .left i {
    display: block;
       margin-top: 10px;
    margin-left: 20px;
    width: 30px;
    height: 30px;
    background: url(img/left.png) no-repeat;
    background-size: 30px 30px;
    }
   .right {
    display: none;
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    width:50px;
    height: 50px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
   }
   .right i {
     display: block;
     margin-top: 10px;
     margin-right: 20px;
     width: 30px;
     height: 30px;
     background: url(img/right.png) no-repeat;
     background-size: 30px 30px;
    }
   
   ul li,ol li {
    list-style: none;
   }
   .picture {
    position: absolute;
   }
   .list {
    position: absolute;
    bottom: 10px;
    left: 10px;
   }
      .list li {
    float: left;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.5);
    cursor: pointer;
   }
   .list .current {
    background-color: #fff;
   }
   .picture li {
    position: absolute;
    width: 600px;
    height: 300px;
   }
   img {
    width: 100%;
    height: 100%;
   }
   
  </style>
 </head>
 <body>
  <div class="container">
   <span class="left"><i></i></span>
   <span class="right"><i></i></span>
   <ul class="picture">
    <li><img src="img/1.jpg" ></li>
    <li><img src="img/2.jpg" ></li>
    <li><img src="img/3.jpg" ></li>
    <li><img src="img/4.jpg" ></li>
    <li><img src="img/5.jpg" ></li>
   </ul>
   <ol class="list">
   </ol>
  </div>
  <script type="text/javascript">
   var picture = document.querySelector('.picture');
   var list = document.querySelector('.list');
   var num=0;
   var circle=0;
   for (i=0;i<picture.children.length;i++)
   {   
    // 設置圖片的位置
    picture.children[i].style.left = i*600 + 'px';
    // 自動生成有序列表
    var  li = document.createElement('li');
    li.setAttribute('index',i);
    
    list.appendChild(li);
    // 給li添加點擊事件
    li.addEventListener('click',function () {
     for (var i=0;i<list.children.length;i++) {
      list.children[i].className = '';
     }
     this.className = 'current';
     var index = this.getAttribute('index');
     num = index;
     circle = index;
     animate(picture,-index*600);
    })
   }
   // 設置第一個ol孩子的類名
   list.children[0].className = 'current';
   var left = document.querySelector('.left');
   var right = document.querySelector('.right');
   var container = document.querySelector('.container');
   // 設置鼠標經(jīng)過離開事件
   container.addEventListener('mouseover',function () {
    left.style.display = 'block';
    right.style.display = 'block';
    clearInterval(timer)
    timer = null;
   })
   container.addEventListener('mouseleave',function () {
    left.style.display = 'none';
    right.style.display = 'none';
    timer = setInterval(function () {
     right.click();
    },1000);
   })
   
   // js動畫函數(shù)
   function animate (obj,target,callback) {
    clearInterval(obj.timer) 
    obj.timer = setInterval(function () {
     var step = (target - obj.offsetLeft)/10;
     step = step > 0 ? Math.ceil(step) : Math.floor(step);
     if(obj.offsetLeft == target) {
      clearInterval(obj.timer);
      if (callback) {
       callback();
      }
     }
     obj.style.left = obj.offsetLeft + step  + 'px';
    },15)
   }
   
   var first = picture.children[0].cloneNode(true);
   picture.appendChild(first);
   picture.lastChild.style.left = (picture.children.length-1)*600 + 'px';
   //右側點擊事件
      right.addEventListener('click',function () {
    if (num==picture.children.length-1) {
     picture.style.left = 0;
     num = 0;
    }
    num++;
    animate(picture,-num*600);
    circle ++;
    if (circle == list.children.length) {
     circle = 0;
    }
    
    for (var i = 0;i<list.children.length;i++) {
     list.children[i].className  = '';
    }
    list.children[circle].className  = 'current';
   })
   // 左側點擊事件
   left.addEventListener('click',function () {
    if (num==0) {
     picture.style.left = -(picture.children.length-1)*600 +'px';
     num = picture.children.length-1;
    }
    num--;
    animate(picture,-num*600);
    circle --;
    if (circle < 0) {
     circle = list.children.length-1;
    }
    
    for (var i = 0;i<list.children.length;i++) {
     list.children[i].className  = '';
    }
    list.children[circle].className  = 'current';
   })
   
   var timer = setInterval(function () {
    // 手動調用
    right.click();
   },1000);
  </script>
 </body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: