欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何使用原生的javascript來(lái)實(shí)現(xiàn)輪播圖

這篇文章主要介紹如何使用原生的javascript來(lái)實(shí)現(xiàn)輪播圖，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),柴桑企業(yè)網(wǎng)站建設(shè),柴桑品牌網(wǎng)站建設(shè),網(wǎng)站定制,柴桑網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,柴桑網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

具體代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }
    .all {
      width: 500px;
      height: 200px;
      padding: 7px;
      border: 1px solid #ccc;
      margin: 100px auto;
      position: relative;
    }
    .screen {
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    .screen li {
      width: 500px;
      height: 200px;
      overflow: hidden;
      float: left;
    }
    .screen ul {
      position: absolute;
      left: 0;
      top: 0px;
      width: 3000px;
    }
    .all ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }
    .all ol li {
      float: left;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }
    .all ol li.current {
      background: yellow;
    }
    #arr {
      display: none;
    }
    #arr span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑體';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }
    #arr #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div class="all" id='box'>
  <div class="screen">
    <ul>
      <li><img src="images/1.jpg" width="500" height="200"/></li>
      <li><img src="images/2.jpg" width="500" height="200"/></li>
      <li><img src="images/3.jpg" width="500" height="200"/></li>
      <li><img src="images/4.jpg" width="500" height="200"/></li>
      <li><img src="images/5.jpg" width="500" height="200"/></li>
    </ul>
    <ol>
    </ol>
  </div>
  <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script>
  function $(element) {
    return document.getElementById(element);
  }
  var box = $("box");
  var screen = box.children[0];
  var ul = screen.children[0];
  var ulLis = ul.children;
  var ol = screen.children[1];
  var arr = $("arr");
  var left = $("left");
  var right = $("right");
  //動(dòng)態(tài)創(chuàng)建小圖標(biāo)
  for (var i = 0; i < ulLis.length; i++) {
    var li = document.createElement("li");
    li.innerHTML = i + 1;
    ol.appendChild(li);
  }
  //設(shè)置這些個(gè)小圖標(biāo)
  var olLis = ol.children;
  var imgWidth = screen.offsetWidth;
  for (var j = 0; j < olLis.length; j++) {
    olLis[j].index = j;
    olLis[j].onmouseover = function () {
      //排他思想
      for (var i = 0; i < olLis.length; i++) {
        olLis[i].className = "";
      }
      this.className = "current";
      var target = -imgWidth * this.index;
      cutton(ul, target, 20);
      //為了讓點(diǎn)擊事件和小面的小圖標(biāo)能夠一一對(duì)應(yīng)，設(shè)置他們的索引值相同
      pic = square = this.index;
    }
  }
  //給小圖標(biāo)設(shè)置一個(gè)初始樣式
  ol.children[0].className = "current";
  //給ul追加一張圖
  ul.appendChild(ul.children[0].cloneNode(true));
  //設(shè)置箭頭的顯示與隱藏
  box.onmouseover = function () {
    arr.style.display = "block";
    //鼠標(biāo)放上去的時(shí)候，不再自動(dòng)滾動(dòng)
    clearInterval(timer);
  }
  box.onmouseout = function () {
    arr.style.display = "none";
    //鼠標(biāo)離開(kāi)的時(shí)候，繼續(xù)自動(dòng)滾動(dòng)
    timer = setInterval(playNext, 1000);
  }
  //設(shè)置點(diǎn)擊左右小箭頭的事件且要求小圖標(biāo)要跟著變化
  //1.設(shè)置點(diǎn)擊右側(cè)箭頭
  var pic = 0;//記錄當(dāng)前為第幾項(xiàng)用
  var square = 0;//記錄小圖標(biāo)的索引值
  /* right.onclick = function () {//存在的問(wèn)題是當(dāng)移動(dòng)到最后一張的時(shí)候，無(wú)法跳轉(zhuǎn)到第一張
   pic++;
   var target = -pic * imgWidth;
   cutton(ul, target, 20);
   }*/
  //方法改進(jìn)
  /*right.onclick = function () {
   //先對(duì)pic做一個(gè)判斷，當(dāng)pic的值為5的時(shí)候，實(shí)現(xiàn)一個(gè)跳轉(zhuǎn)
   if (pic == ulLis.length - 1) {
   ul.style.left = 0;
   pic = 0;
   }
   pic++;
   var target = -pic * imgWidth;
   cutton(ul, target, 20);
   if (square == olLis.length - 1) {
   square = -1;//下面會(huì)加一，就變成了0
   }
   square++;
   //排他思想
   for (var i = 0; i < olLis.length; i++) {
   olLis[i].className = "";
   }
   olLis[square].className = "current";
   }*/
  //使用封裝函數(shù)
  right.onclick = function () {
    playNext();
  }
  //2.設(shè)置點(diǎn)擊左側(cè)箭頭
  left.onclick = function () {//要判斷一下當(dāng)pic為零時(shí)的情況
    if (pic == 0) {
      ul.style.left = -imgWidth * (ulLis.length - 1) + "px";//要記得加單位
      pic = ulLis.length - 1;//給pic重新賦一個(gè)值
    }
    pic--;
    var target = -pic * imgWidth;
    cutton(ul, target, 20);
    //設(shè)置小圖標(biāo)樣式
    if (square == 0) {
      square = olLis.length;
    }
    square--;
    for (var i = 0; i < olLis.length; i++) {
      olLis[i].className = "";
    }
    olLis[square].className = "current";
  }
  //設(shè)置自動(dòng)滾動(dòng)
  //1.封裝點(diǎn)擊右側(cè)小箭頭事件
  function playNext() {
    //先對(duì)pic做一個(gè)判斷，當(dāng)pic的值為5的時(shí)候，實(shí)現(xiàn)一個(gè)跳轉(zhuǎn)
    if (pic == ulLis.length - 1) {
      ul.style.left = 0;
      pic = 0;
    }
    pic++;
    var target = -pic * imgWidth;
    cutton(ul, target, 20);
    if (square == olLis.length - 1) {
      square = -1;//下面會(huì)加一，就變成了0
    }
    square++;
    //排他思想
    for (var i = 0; i < olLis.length; i++) {
      olLis[i].className = "";
    }
    olLis[square].className = "current";
  }
  //2.調(diào)用這個(gè)封裝的函數(shù)，并且設(shè)置一個(gè)間歇性計(jì)時(shí)器
  var timer = null;
  timer = setInterval(playNext, 1000);
  //封裝函數(shù)
  function cutton(obj, target, stp) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
      var step = stp;
      step = obj.offsetLeft > target ? -step : step;
      if (Math.abs(obj.offsetLeft - target) >= Math.abs(step)) {
        obj.style.left = obj.offsetLeft + step + "px";
      } else {
        obj.style.left = target + "px";
        clearInterval(obj.timer);
      }
    }, 15)
  }
</script>
</body>
</html>

補(bǔ)充：原生javascript實(shí)現(xiàn)banner圖自動(dòng)輪播切換

一般在做banner輪播圖的時(shí)候都是用jquery，因?yàn)榇a少，方便，不需要花費(fèi)很長(zhǎng)的時(shí)間去獲取某個(gè)元素作為變量，然后再進(jìn)行操作，只要一個(gè)$就搞定了。但是今天我用原生的javascript做了一下這個(gè)輪播效果，感覺(jué)還行，以下是部分js源代碼，僅供參考！文章底部查看效果演示。

1、鼠標(biāo)離開(kāi)banner圖，每隔2s切換一次；

2、鼠標(biāo)滑過(guò)下方的小按鈕，可以切換圖片；

3、鼠標(biāo)點(diǎn)擊左右按鈕，可以切換圖片。

var oPic,oLi,anniu,aLi,aLength,num,timer,oG,_index,oSpan;
window.onload = function(){
  oPic = document.getElementsByClassName("pic")[0];
  oLi = oPic.getElementsByTagName("li");
  anniu = document.getElementsByClassName("anniu")[0];
  aLi = anniu.getElementsByTagName("li");
  aLength = aLi.length;
  num = 0;
  oG = document.getElementsByClassName("g")[0];
  oSpan = oG.getElementsByTagName("span");
  oLeft = oSpan[0];
  oRight = oSpan[1];
  start();
  oG.onmouseover = end;
  oG.onmouseout = start;
  for(var j=0; j<aLength; j++){
    aLi[j].index = j;
    aLi[j].onmouseover = change;
  }
  oRight.onclick = time;
  oLeft.onclick = times;
}
//自動(dòng)輪播開(kāi)始或結(jié)束
function start(){
    timer = setInterval(time,2000);
    hide();
}
function end(){
  clearInterval(timer);
  show();
}
//圖片切換++
function time(){
  for(var i=0; i<aLength; i++){
    oLi[i].style.display = "none";
    aLi[i].className = "";
  }
  num++;
  num = num % 4;
  oLi[num].style.display = "block";
  aLi[num].className = "on";
}
//圖片切換--
function times(){
  for(var i=0; i<aLength; i++){
    oLi[i].style.display = "none";
    aLi[i].className = "";
  }
  num--;
  num = (num+4)%4;
  oLi[num].style.display = "block";
  aLi[num].className = "on";
}
//鼠標(biāo)滑過(guò)按鈕，圖片輪播
function change(){
  _index = this.index;
  for(var k=0; k<aLength; k++){
    aLi[k].className = "";
    oLi[k].style.display = "none";
  }
  aLi[_index].className = "on";
  oLi[_index].style.display = "block";
}
//左右按鈕顯示或隱藏
function show(){
  oSpan[0].style.display = "block";
  oSpan[1].style.display = "block";
}
function hide(){
  oSpan[0].style.display = "none";
  oSpan[1].style.display = "none";
}

以上是“如何使用原生的javascript來(lái)實(shí)現(xiàn)輪播圖”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：如何使用原生的javascript來(lái)實(shí)現(xiàn)輪播圖
文章鏈接：http://chinadenli.net/article24/pijoce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、商城網(wǎng)站、動(dòng)態(tài)網(wǎng)站、網(wǎng)站維護(hù)、網(wǎng)站營(yíng)銷、網(wǎng)站導(dǎo)航

廣告

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

h5響應(yīng)式網(wǎng)站建設(shè)