中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

原生JS輪播圖插件

代碼分兩個部分：1、HTML部分，根據(jù)注釋處理即可；2、play.js插件部分，引到HTML里面即可。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、西盟網(wǎng)站維護(hù)、網(wǎng)站推廣。

1、HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>/*style標(biāo)簽及其內(nèi)的內(nèi)容，在實(shí)際項(xiàng)目中可以不要*/
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<!--body標(biāo)簽里的內(nèi)容，沒說可以增減或更改的，不要增減或更改-->
<div id="box">
  <div>
    <!--以下是可增減區(qū)域-->
    <div><img src="img/banner1.jpg" alt=""/></div>
    <div><img src="img/banner2.jpg" alt=""/></div>
    <div><img src="img/banner3.jpg" alt=""/></div>
    <div><img src="img/banner4.jpg" alt=""/></div>
    <div><img src="img/banner5.jpg" alt=""/></div>
    <div><img src="img/banner6.jpg" alt=""/></div>
    <div><img src="img/banner7.jpg" alt=""/></div>
    <!--以上是可增減區(qū)域-->
  </div>
</div>
<script src="play.js"></script>
<script>
  var play= new Banner('1000px', '500px');
  /*這兩個參數(shù)分別是輪播區(qū)的寬和高，可以根據(jù)需要更改*/
</script>
</body>
</html>

2、play.js插件部分

function Banner(width, height) {/*類*/
  /*以下最外層div*/
  var that = this;
  this.width = width;
  this.height = height;
  this.oBox = document.getElementById("box");
  this.oBox.style.width = width;
  this.oBox.style.height = height;
  this.oBox.style.margin = "0 auto";
  this.oBox.style.overflow = "hidden";
  this.oBox.style.position = "relative";
  /*以下輪播區(qū)的div*/
  this.oBoxInner = this.oBox.getElementsByTagName('div')[0];
  this.oBoxInner.style.height = height;
  this.oBoxInner.style.position = "absolute";
  this.oBoxInner.style.left = 0;
  this.oBoxInner.style.right = 0;
  this.aDiv = this.oBoxInner.getElementsByTagName('div');//單個輪播圖
  this.oBoxInner.innerHTML/* 輪播區(qū)的內(nèi)部后面*/ += this.aDiv[0].outerHTML/*第一個輪播圖片的外部*/;
  this.oBoxInner.style.width = parseFloat(width) * this.aDiv.length + "px";//輪播區(qū)的寬度
  for (var i = 0; i < this.aDiv.length; i++) {/*遍歷輪播區(qū)的每個div及其內(nèi)部的圖片*/
    this.aDiv[i].style.width = width;
    this.aDiv[i].style.height = height;
    this.aDiv[i].style.float = "left";
    this.aDiv[i].aImg = this.aDiv[i].getElementsByTagName('img')[0];
    this.aDiv[i].aImg.style.width = "100%";
    this.aDiv[i].aImg.style.height = "100%";
  }
  /*以下是焦點(diǎn)區(qū)部分（定位在輪播區(qū)的右下方）*/
  var oUl=document.createElement('ul');
  for(i=0; i<this.aDiv.length-1; i++){
    oUl.innerHTML+='<li class='+i+'===1?"on":null></li>';
  }
  this.oBox.appendChild(oUl);
  this.oUl = this.oBox.getElementsByTagName('ul')[0];
  this.oUl.style.position = "absolute";
  this.oUl.style.right = "10px";
  this.oUl.style.bottom = "10px";
  this.aLi = this.oUl.getElementsByTagName('li');
  for (i = 0; i < this.aLi.length; i++) {/*遍歷焦點(diǎn)區(qū)的每個焦點(diǎn)*/
    this.aLi[i].style.width = "18px";
    this.aLi[i].style.height = "18px";
    this.aLi[i].style.float = "left";
    this.aLi[i].style.listStyle = "none";
    this.aLi[i].style.background = "green";
    this.aLi[i].style.borderRadius = "50%";
    this.aLi[i].style.marginLeft = "10px";
    this.aLi[i].style.cursor = "pointer";
  }
  /*以下是向左向右兩個箭頭式按鈕*/
  for(i=0; i<2; i++){
    var oA=document.createElement('a');
    oA.href="javascript:;" rel="external nofollow" 
    this.oBox.appendChild(oA);
  }
  /*以下是左按鈕（點(diǎn)擊它，圖片向左運(yùn)動）*/
  this.oBtnL = this.oBox.getElementsByTagName('a')[0];
  this.oBtnL.style.width = "30px";
  this.oBtnL.style.height = "30px";
  this.oBtnL.style.position = "absolute";
  this.oBtnL.style.top = (parseFloat(this.height) / 2 - 15) + "px";
  this.oBtnL.style.left = "30px";
  this.oBtnL.style.border = "10px solid red";
  this.oBtnL.style.borderLeft = "none";
  this.oBtnL.style.borderBottom = "none";
  this.oBtnL.style.opacity = "0.3";
  this.oBtnL.style.filter = "alpha(opacity=30)";
  this.oBtnL.style.display = "none";
  this.oBtnL.style.transform = "rotate(-135deg)";
  this.oBtnL.onclick = function () {
    if (that.step <= 0) {
      that.step = that.aDiv.length - 1;
      that.css(that.oBoxInner, 'left', -that.step * parseFloat(that.width));
    }
    that.step--;
    that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)});
    that.bannerTip();
  };
  /*以下是右按鈕（點(diǎn)擊它，圖片向右運(yùn)動）*/
  this.oBtnR = this.oBox.getElementsByTagName('a')[1];
  this.oBtnR.style.width = "30px";
  this.oBtnR.style.height = "30px";
  this.oBtnR.style.position = "absolute";
  this.oBtnR.style.top = (parseFloat(this.height) / 2 - 15) + "px";
  this.oBtnR.style.right = "30px";
  this.oBtnR.style.border = "10px solid red";
  this.oBtnR.style.borderLeft = "none";
  this.oBtnR.style.borderBottom = "none";
  this.oBtnR.style.opacity = "0.3";
  this.oBtnR.style.filter = "alpha(opacity=30)";
  this.oBtnR.style.display = "none";
  this.oBtnR.style.transform = "rotate(45deg)";
  this.oBtnR.onclick = function () {
    if (that.step >= that.aDiv.length - 1) {
      that.step = 0;
      that.css(that.oBoxInner, 'left', 0)
    }
    that.step++;
    that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)}, 1000);
    that.bannerTip();
  };
  /*以下是其它*/
  this.step = 0;//記錄每次運(yùn)動
  this.timer = null;//定時器
  this.init();//初始化輪播圖
}
Banner.prototype = {//類的原型
  constructor: Banner,
  /*getCss：獲取元素的屬性值*/
  getCss: function (curEle, attr) {
    var val = null;
    var reg = null;
    if (getComputedStyle) {//標(biāo)準(zhǔn)瀏覽器
      val = getComputedStyle(curEle, false)[attr];
    } else {//非標(biāo)準(zhǔn)瀏覽器
      if (attr === 'opacity') {
        val = curEle.currentStyle.filter; //'alpha(opacity=10)'
        reg = /^alpha\(opacity[=:](\d+)\)$/i;
        return reg.test(val) ? reg.exec(val)[1] / 100 : 1;
      }
      val = curEle.currentStyle[attr];
    }
    reg = /^[+-]?((\d|([1-9]\d+))(\.\d+)?)(px|pt|rem|em)$/i;
    return reg.test(val) ? parseInt(val) : val;
  },
  /*setCss：設(shè)置元素的屬性值*/
  setCss: function (curEle, attr, value) {
    if (attr === 'float') {
      curEle.style.cssFloat = value;
      curEle.style.styleFloat = value;
      return;
    }
    if (attr === 'opacity') {
      curEle.style.opacity = value;
      curEle.style.filter = 'alpha(opacity=' + (value * 100) + ')';
      return;
    }
    var reg = /^(width|height|top|right|bottom|left|((margin|padding)(top|right|bottom|left)?))$/i;
    if (reg.test(attr)) {
      if (!(value === 'auto' || value.toString().indexOf('%') !== -1)) {
        value = parseFloat(value) + 'px';
      }
    }
    curEle.style[attr] = value;
  },
  /*setGroupCss：設(shè)置元素的一組屬性值*/
  setGroupCss: function (curEle, options) {
    if (options.toString() !== '[object Object]') return;
    for (var attr in options) {
      this.setCss(curEle, attr, options[attr]);
    }
  },
  /*css：getCss、setCss、setGroupCss的合寫*/
  css: function () {
    if (typeof arguments[1] === 'string') {
      if (typeof arguments[2] === 'undefined') {
        return this.getCss(arguments[0], arguments[1]);//當(dāng)?shù)谌齻€參數(shù)不存在，是獲??；
      } else {
        this.setCss(arguments[0], arguments[1], arguments[2]);//當(dāng)?shù)谌齻€參數(shù)存在時，是設(shè)置；
      }
    }
    if (arguments[1].toString() === '[object Object]') {
      this.setGroupCss(arguments[0], arguments[1]);//設(shè)置元素的一組屬性值
    }
  },
  /*animate：輪播圖動畫函數(shù)*/
  animate: function (curEle, target, duration) {
    /*1.定義動畫的運(yùn)行軌跡*/
    function tmpEffect(t, b, c, d) {
      return b + c / d * t;//開始時的位置+總變化/總時間*已經(jīng)過去的時間
    }
    /*2.為公式的每個參數(shù)做準(zhǔn)備*/
    var begin = {};
    var change = {};
    for (var attr in target) {
      begin[attr] = this.css(curEle, attr);
      change[attr] = target[attr] - begin[attr];
    }
    duration = duration || 700;
    var time = 0;
    var that = this;
    /*3.開啟一個定時器，讓時間不斷累加；根據(jù)時間和公式，求出最新的位置；*/
    clearInterval(curEle.timer); //開起一個定時器前，先關(guān)閉沒用的定時器
    curEle.timer = setInterval(function () {
      time += 10;
      /*4.定時器停止運(yùn)動的條件（time>=duration）*/
      if (time >= duration) {
        that.css(curEle, target);
        clearInterval(curEle.timer);
        return;
      }
      /*5.拿到每個屬性的最新值，并且賦值給元素對應(yīng)的屬性；*/
      for (var attr in target) {
        var curPos = tmpEffect(time, begin[attr], change[attr], duration);
        that.css(curEle, attr, curPos);
      }
    }, 10)
  },
  /*初始化輪播圖*/
  init: function () {
    var _this = this;
    /*1.開啟自動輪播*/
    this.timer = setInterval(function () {
      _this.autoMove();
    }, 2000);
    /*2.開啟焦點(diǎn)，每個焦點(diǎn)與每張輪播圖對應(yīng)*/
    this.bannerTip();
    /*3.鼠標(biāo)移入輪播區(qū)，輪播暫停；鼠標(biāo)移出輪播區(qū)，輪播恢復(fù)*/
    this.over_out();
    /*4.點(diǎn)擊焦點(diǎn)，響應(yīng)對應(yīng)的輪播圖片*/
    this.handleChange();
  },
  handleChange: function () {
    for (var i = 0; i < this.aLi.length; i++) {
      this.aLi[i].index = i;
      var that = this;
      this.aLi[i].onclick = function () {
        that.step = this.index;
        that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)});
        that.bannerTip();
      }
    }
  },
  autoMove: function () {
    if (this.step >= this.aDiv.length - 1) {
      this.step = 0;
      this.css(this.oBoxInner, 'left', 0)
    }
    this.step++;
    this.animate(this.oBoxInner, {left: -this.step * parseFloat(this.width)}, 1000);
    this.bannerTip();
  },
  bannerTip: function () {
    var tmpStep = this.step >= this.aLi.length ? 0 : this.step;
    for (var i = 0; i < this.aLi.length; i++) {
      this.aLi[i].className = i === tmpStep ? 'on' : null;
      if (this.aLi[i].className === "on") {
        this.aLi[i].style.background = "red";
      } else {
        this.aLi[i].style.background = "green";
      }
    }
  },
  over_out: function () {
    var _this = this;
    _this.oBox.onmouseover = function () {
      clearInterval(_this.timer);
      _this.oBtnL.style.display = 'block';
      _this.oBtnR.style.display = 'block';
    };
    _this.oBox.onmouseout = function () {
      _this.timer = setInterval(function () {
        _this.autoMove()
      }, 2000);
      _this.oBtnL.style.display = 'none';
      _this.oBtnR.style.display = 'none';
    }
  }
};

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持創(chuàng)新互聯(lián)！

網(wǎng)站名稱：原生JS輪播圖插件
轉(zhuǎn)載來源：http://www.rwnh.cn/article24/pgsgje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、用戶體驗(yàn)、標(biāo)簽優(yōu)化、手機(jī)網(wǎng)站建設(shè)、ChatGPT、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)
穆棱市| 康乐县| 全南县| 延吉市| 郯城县| 日喀则市| 中超| 宾川县| 凤山县| 常德市| 苏尼特左旗| 霍邱县| 崇阳县| 阳谷县| 勃利县| 德清县| 武隆县| 东阳市| 西昌市| 新绛县| 安多县| 潞西市| 宜良县| 扎兰屯市| 临海市| 九龙城区| 浮梁县| 潢川县| 阿荣旗| 平乐县| 年辖：市辖区| 南平市| 呈贡县| 昌邑市| 通城县| 永新县| 晋中市| 三穗县| 安塞县| 绥滨县| 湘潭县|