快捷導(dǎo)航

原生js實現(xiàn)無縫輪播圖效果

更新時間：2021年01月28日 11:02:46 作者：搬磚大法

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

原生js實現(xiàn)輪播圖效果(無縫滾動) ，供大家參考，具體內(nèi)容如下

效果圖：

代碼：

<!DOCTYPE html>
<html lang="en">
<!-- day07 7-10-14 -->
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script src="./images1/20.animate.js"></script>
 <style>
 * {
  margin: 0;
  padding: 0;
 }
 
 li {
  list-style: none;
 }
 
 .focus {
  /*overflow: hidden;*/
  position: absolute;
  top: 100px;
  left: 200px;
  width: 721px;
  height: 455px;
  background-color: brown;
 }
 
 .prev,
 .next {
  display: none;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  width: 20px;
  height: 30px;
  background-color: rgba(0, 0, 0, .3);
  text-decoration: none;
  color: #fff;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  z-index: 2;
 }
 
 .focus ul {
  /* 引入動畫js文件要求必須有定位 */
  position: absolute;
  width: 600%;
 }
 
 .focus ul li {
  float: left;
 }
 
 .prev {
  left: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
 }
 
 .next {
  right: 0;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
 }
 
 .promo-nav {
  position: absolute;
  bottom: 10px;
  left: 60px;
  width: 200px;
  height: 18px;
  border-radius: 9px;
 }
 
 .promo-nav li {
  float: left;
  width: 10px;
  height: 10px;
  background-color: #fff;
  margin: 2px;
  border-radius: 50%;
 }
 
 .promo-nav .current {
  background-color: orange;
 }
 .focus ul li a img {
  width: 721px;
  height: 455px;
 }
 </style>
</head>
 
<body>
 <div class="focus">
 <ul>
  <li>
  <a href="#" ><img src="images1/focu01.jpg" alt=""></a>
  </li>
  <li>
  <a href="#" ><img src="images1/focu02.jpg" alt=""></a>
  </li>
 
  <li>
  <a href="#" ><img src="images1/focu03.jpg" alt=""></a>
  </li>
  <li>
  <a href="#" ><img src="images1/focu04.jpg" alt=""></a>
  </li>
 
 </ul>
 <!-- 左側(cè)按鈕 -->
 <a href="javascript:;" class="prev">&lt;</a>
 <!-- 右側(cè)按鈕 -->
 <a href="javascript:;" class="next">&gt;</a>
 
 <ol class="promo-nav">
 
 </ol>
 </div>
 <script>
 window.addEventListener('load', function() {
  var focus = document.querySelector('.focus');
  var prev = document.querySelector('.prev');
  var next = document.querySelector('.next');
  var focusWidth = focus.offsetWidth;
  //鼠標(biāo)經(jīng)過
  focus.addEventListener('mouseenter', function() {
   prev.style.display = 'block';
   next.style.display = 'block';
   clearInterval(timer);
   timer = null; //清除定時器變量
 
  })
  //鼠標(biāo)離開
  focus.addEventListener('mouseleave', function() {
   prev.style.display = 'none';
   next.style.display = 'none';
   timer = setInterval(function() {
   next.click();
   }, 2000)
 
  })
  //3.動態(tài)生成小圓圈 有幾張圖片 就生成幾個小圓圈
  var ul = focus.querySelector('ul');
  var ol = focus.querySelector('.promo-nav');
  // console.log(ul.children.length); 4
  for (var i = 0; i < ul.children.length; i++) {
  //創(chuàng)建一個li
  var li = document.createElement('li');
  //記錄當(dāng)前小圓圈的索引號 通過自定義屬性來做
  li.setAttribute('index', i);
  //插入到ol后面
  ol.appendChild(li);
  //4.鼠標(biāo)點擊小圓圈小圓圈變色(給小圓圈添加current類其余小圓圈移除這個類)(排他思想)
  //在生成小圓圈的同時直接綁定點擊事件
  li.addEventListener('click', function() {
   for (var i = 0; i < ol.children.length; i++) {
   ol.children[i].className = '';
   }
   this.className = 'current';
 
 
   //5.點擊小圓點 移動圖片 移動的是ul
   //ul移動的距離 小圓圈的索引號乘以圖片寬度 注意是負(fù)值
   //當(dāng)我們點擊了某個小li就得到了當(dāng)前小li的索引號
   var index = this.getAttribute('index');
   //當(dāng)我們點擊了某個li就把li的索引號給num
   num = index;
   //當(dāng)我們點擊了某個li就把li的索引號給index
   circle = index;
   console.log(index);
 
   animate(ul, -index * focusWidth, );
  })
 
  }
  //把ol里面的第一個li北京顏色設(shè)置成白色
  ol.children[0].className = 'current';
  //6. 克隆第一張li放到ul后面
  var first = ul.children[0].cloneNode(true);
  ul.appendChild(first);
  //7.點擊右側(cè)按鈕圖片滾動一張
  var num = 0;
  var circle = 0;
  var flag = true;
  //右側(cè)按鈕
  next.addEventListener('click', function() {
   if (flag) {
   flag = false; //先關(guān)閉節(jié)流閥
   //5.如果走到最后一張復(fù)制圖片此時ul快速復(fù)原 left改為0(無縫滾動)
   if (num == ul.children.length - 1) {
    ul.style.left = 0;
    num = 0;
   }
   num++;
   animate(ul, -num * focusWidth, function() {
    flag = true;
   });
   //8.點擊右側(cè)按鈕小圓圈跟隨一起變化 聲明一個變量控制小圓圈變化
   circle++;
   //如果 circle等于4說明做到最后克隆的這張圖片了 我們就復(fù)原
   if (circle == ol.children.length) {
    circle = 0;
   }
   // //清除其余小圓圈類名
   // for (var i = 0; i < ol.children.length; i++) {
   // ol.children[i].className = '';
   // }
   // //留下當(dāng)前小圓圈current類名
   // ol.children[circle].className = 'current';
   circleChange();
   }
  })
  //左側(cè)按鈕
  prev.addEventListener('click', function() {
  if (flag) {
   flag = false;
   //5.如果走到最后一張復(fù)制圖片此時ul快速復(fù)原 left改為0(無縫滾動)
   if (num == 0) {
   num = ul.children.length - 1;
   ul.style.left = -num * focusWidth + 'px';
 
   }
   num--;
   animate(ul, -num * focusWidth, function() {
   flag = true;
   });
   //8.點擊右側(cè)按鈕小圓圈跟隨一起變化 聲明一個變量控制小圓圈變化
   circle--;
   //如果 circle小于0小圓圈要改為第四個小圓圈
   if (circle < 0) {
   circle = ol.children.length - 1;
   }
   // 清除其余小圓圈類名
   // for (var i = 0; i < ol.children.length; i++) {
   // ol.children[i].className = '';
   // }
   // 留下當(dāng)前小圓圈current類名
   // ol.children[circle].className = 'current';
   circleChange();
  }
  })
 
  function circleChange() {
  //清除其余小圓圈類名
  for (var i = 0; i < ol.children.length; i++) {
   ol.children[i].className = '';
  }
  //留下當(dāng)前小圓圈current類名
  ol.children[circle].className = 'current';
  }
 
  //10.自動播放輪播圖
  var timer = setInterval(function() {
  next.click();
  }, 2000)
 
 })
 </script>
</body>
 
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: