js代碼編寫無縫輪播圖

更新時間：2020年09月13日 13:12:45 作者：Tales筱欣

這篇文章主要為大家詳細介紹了js代碼編寫無縫輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js編寫無縫輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

前言

這個是一個輪播圖

提示：

請讓最后一個img和第一個img是一張圖片相同
且 li數(shù)目為img數(shù)目-1；

一、無縫輪播圖

讓第一張和最后一張相同
type:第一張和最后一張相同；
在最后一張向下一張切換時，立刻跳到第一張然后向第二張正常切換

二、使用步驟

1.html代碼

代碼如下（示例）：

<div class="banner">
 <div class="qh">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>
 <div class="left"></div>
 <div class="right"></div>
 <ul class="banner_img clear">
  <li>
  <img src="img/1.png" alt="">
  </li>
  <li>
  <img src="img/2.png" alt="">
  </li>
  <li>
  <img src="img/3.png" alt="">
  </li>
  <li>
  <img src="img/4.png" alt="">
  </li>
  <li>
  <img src="img/5.png" alt="">
  </li>
  <li>
  <img src="img/6.png" alt="">
  </li>
  <li>
  <img src="img/7.png" alt="">
  </li>
  <li>
  <img src="img/1.png" alt="">
  </li>
 </ul>
</div>

css代碼

 *{
 margin:0;
 padding:0;
}
 .banner {
  position: relative;
  margin: auto;
  margin-top: 20px;
  width: 1140px;
  height: 600px;
  border: 1px solid #000;
  overflow: hidden;
 }

 .banner ul {
  position: relative;
  width: 10000px;
 }

 .banner ul li {
  width: 1140px;
  height: 100%;
  float: left;
 }

 .banner ul img {
  width: 1140px;
  height: 100%;
  object-fit: cover;
 }

 .banner>div {
  position: absolute;
 }

 .banner .qh {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 20px;
  z-index: 1;
 }

 .banner .qh div {
  margin-right: 10px;
  width: 10px;
  height: 10px;
  background: transparent;
  border: 1px solid #f0f;
  border-radius: 5px;
  float: left;
  z-index: 1;
 }
 .left{
  top: 0;
  bottom: 0;
  margin: auto;
  height: 40px;
  width: 20px;
  background: #f0f;
  left: 0;
  z-index: 1;
 }
 .right{
  top: 0;
  bottom: 0;
  margin: auto;
  height: 40px;
  background: #f0f;
  width: 20px;
  right: 0;
  z-index: 1;
 }

2.js代碼

代碼如下：

startMove是一個運動框架緩沖運動；當(dāng)然你也可以用其他的

var odiv = document.querySelector(".banner");
var oul = document.querySelector(".banner_img");
var aimg = oul.querySelectorAll("img");
var oqh = document.querySelector(".qh")
var aqh_div = oqh.querySelectorAll("div");
var alist = aimg[0].offsetWidth;
var i=0;
 init();
 function init(){
  for (var j=0; j<aimg.length-1;j++) {
  aqh_div[j].style.background="transparent";
  }
  if (i<aimg.length-1) {
  aqh_div[i].style.background="#f0f"; 
  }else{
  aqh_div[0].style.background="#f0f"; 
  }
 
 }
 function next() {//下一張
  i++;
  let left =i*(-alist);
  if (left <= -alist * (aimg.length)) {
  oul.style.left = "0px";
  i=1;
  left =-alist*i;
  }
  startMove(oul, { left: left });
  init();
 }
 function back() {//上一張
  i--;
  let left = i*(-alist);
  if(i<0) {
  oul.style.left = (aimg.length-1)* (-alist)+"px";
  i=aimg.length-2;
  left= i*(-alist);
  }
  startMove(oul, { left: left });
  init();
 }
 function move(i) {//跳到第i張 i從0開始
  window.i=i;
  left = i* (-alist);
  startMove(oul, { left: left });
  init();
 }
 for (let i in aqh_div) {
  aqh_div[i].onclick = function () {
  move(i);
  console.log(i);
  }
 }


//下面是一個移入div暫停計時器 移出打開計時器

 odiv.Interval = setInterval(next, 2000);
 odiv.onmouseenter = function () {
  clearInterval(odiv.Interval);
 };
 odiv.onmouseleave = function () {
  clearInterval(odiv.Interval);
  odiv.Interval = setInterval(next, 2000);
 };
//下面是兩個左右切換的按鈕
 var left_btn=document.querySelector(".left");
 var right_btn=document.querySelector(".right");
 left_btn.onclick=function(){
  back();
 }
 right_btn.onclick=function(){
  next();
 }



//下面是一個運動框架 第一個參數(shù)是運動的對象 第二個為json對象{要改變的屬性：值}
// 第三個為運動結(jié)束后要做到事情 參數(shù)是一個函數(shù)

 /**
 *
 * @param obj 運動的對象
 * @param json {width:400, height:400}
 * @param fnEnd回調(diào)
 */
 function startMove(obj, json, fn) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
  var bStop = true;
  for (attr in json) {
   // 1. 取得當(dāng)前的值（可以是widht，height，opacity等的值）
   var objAttr = 0;
   if (attr == "opacity") {
   objAttr = Math.round(parseFloat(getStyle(obj, attr)) * 100);
   } else {
   objAttr = parseInt(getStyle(obj, attr));
   }
   // 2.計算運動速度
   var iSpeed = (json[attr] - objAttr) / 50;//緩沖運動
   iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
   // 3. 檢測所有運動是否到達目標
   if (objAttr != json[attr]) {
   bStop = false;
   }
   if (attr == "opacity") {
   obj.style.filter = 'alpha(opacity=' + (objAttr + iSpeed) + ')';
   obj.style.opacity = (objAttr + iSpeed) / 100;
   } else {
   obj.style[attr] = objAttr + iSpeed + 'px';// 需要又.屬性名的形式改成[]
   }
  }
  if (bStop) { // 表示所有運動都到達目標值
   clearInterval(obj.timer);
   if (fn) {
   fn();
   }
  }
  }, 10);
 }


 /**
  * 獲取行間/內(nèi)聯(lián)/外部樣式，無法設(shè)置
  * @param obj
  * @param attr
  */
 function getStyle(obj, attr) {
  if (obj.currentStyle) {
  return obj.currentStyle[attr];
  } else {
  return getComputedStyle(obj, false)[attr];
  }
 }

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

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

您可能感興趣的文章: