masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > js melaksanakan karusel imej kiri dan kanan dengan mengklik pada kemahiran it_javascript

js melaksanakan karusel imej kiri dan kanan dengan mengklik pada kemahiran it_javascript

WBOY
Lepaskan： 2016-05-16 15:50:47
asal
1345 orang telah melayarinya

Ini bersamaan dengan rangka kerja kecil, anda boleh menggunakannya dengan segera:

1. Fungsi:

Seperti yang ditunjukkan dalam gambar di atas: Klik dua butang di sebelah kiri dan kanan untuk menatal imej ke kiri dan kanan, atau tetapkan bilangan saat untuk menatal sendiri.

2. Mula-mula buat fail js bernama play.js (asalkan ia sama dengan pengenalan dalam HTML): 

var sina = {
  $: function(objName) {
    if (document.getElementById) {
      return eval('document.getElementById("' + objName + '")')
    } else {
      return eval('document.all.' + objName)
    }
  },
  isIE: navigator.appVersion.indexOf("MSIE") != -1 ? true : false,
  addEvent: function(l, i, I) {
    if (l.attachEvent) {
      l.attachEvent("on" + i, I)
    } else {
      l.addEventListener(i, I, false)
    }
  },
  delEvent: function(l, i, I) {
    if (l.detachEvent) {
      l.detachEvent("on" + i, I)
    } else {
      l.removeEventListener(i, I, false)
    }
  },
  readCookie: function(O) {
    var o = "",
      l = O + "=";
    if (document.cookie.length > 0) {
      var i = document.cookie.indexOf(l);
      if (i != -1) {
        i += l.length;
        var I = document.cookie.indexOf(";", i);
        if (I == -1) I = document.cookie.length;
        o = unescape(document.cookie.substring(i, I))
      }
    };
    return o
  },
  writeCookie: function(i, l, o, c) {
    var O = "",
      I = "";
    if (o != null) {
      O = new Date((new Date).getTime() + o * 3600000);
      O = "; expires=" + O.toGMTString()
    };
    if (c != null) {
      I = ";domain=" + c
    };
    document.cookie = i + "=" + escape(l) + O + I
  },
  readStyle: function(I, l) {
    if (I.style[l]) {
      return I.style[l]
    } else if (I.rentStyle) {
      return I.currentStyle[l]
    } else if (document.defaultView && document.defaultView.getComputedStyle) {
      var i = document.defaultView.getComputedStyle(I, null);
      return i.getPropertyValue(l)
    } else {
      return null
    }
  }
};

function ScrollPic(scrollContId, arrLeftId, arrRightId, dotListId) {
  this.scrollContId = scrollContId;
  this.arrLeftId = arrLeftId;
  this.arrRightId = arrRightId;
  this.dotListId = dotListId;
  this.dotClassName = "dotItem";
  this.dotOnClassName = "dotItemOn";
  this.dotObjArr = [];
  this.pageWidth = 0;
  this.frameWidth = 0;
  this.speed = 10;
  this.space = 10;
  this.pageIndex = 0;
  this.autoPlay = true;
  this.autoPlayTime = 5;
  var _autoTimeObj, _scrollTimeObj, _state = "ready";
  this.stripDiv = document.createElement("DIV");
  this.listDiv01 = document.createElement("DIV");
  this.listDiv02 = document.createElement("DIV");
  if (!ScrollPic.childs) {
    ScrollPic.childs = []
  };
  this.ID = ScrollPic.childs.length;
  ScrollPic.childs.push(this);
  this.initialize = function() {
    if (!this.scrollContId) {
      throw new Error("必须指定scrollContId.");
      return
    };
    this.scrollContDiv = sina.$(this.scrollContId);
    if (!this.scrollContDiv) {
      throw new Error("scrollContId不是正确的对象.(scrollContId = \"" + this.scrollContId + "\")");
      return
    };

    this.scrollContDiv.style.width = this.frameWidth + "px";
    this.scrollContDiv.style.overflow = "hidden";
    this.listDiv01.innerHTML = this.listDiv02.innerHTML = this.scrollContDiv.innerHTML;
    this.scrollContDiv.innerHTML = "";
    this.scrollContDiv.appendChild(this.stripDiv);
    this.stripDiv.appendChild(this.listDiv01);
    this.stripDiv.appendChild(this.listDiv02);
    this.stripDiv.style.overflow = "hidden";
    this.stripDiv.style.zoom = "1";
    this.stripDiv.style.width = "32766px";
    this.listDiv01.style.cssFloat = "left";
    this.listDiv02.style.cssFloat = "left";
    sina.addEvent(this.scrollContDiv, "mouseover", Function("ScrollPic.childs[" + this.ID + "].stop()"));
    sina.addEvent(this.scrollContDiv, "mouseout", Function("ScrollPic.childs[" + this.ID + "].play()"));
    if (this.arrLeftId) {
      this.arrLeftObj = sina.$(this.arrLeftId);
      if (this.arrLeftObj) {
        sina.addEvent(this.arrLeftObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].rightMouseDown()"));
        sina.addEvent(this.arrLeftObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"));
        sina.addEvent(this.arrLeftObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"))
      }
    };
    if (this.arrRightId) {
      this.arrRightObj = sina.$(this.arrRightId);
      if (this.arrRightObj) {
        sina.addEvent(this.arrRightObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].leftMouseDown()"));
        sina.addEvent(this.arrRightObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"));
        sina.addEvent(this.arrRightObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"))
      }
    };
    if (this.dotListId) {
      this.dotListObj = sina.$(this.dotListId);
      if (this.dotListObj) {
        var pages = Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4),
          i, tempObj;
        for (i = 0; i < pages; i++) {
          tempObj = document.createElement("span");
          this.dotListObj.appendChild(tempObj);
          this.dotObjArr.push(tempObj);
          if (i == this.pageIndex) {
            tempObj.className = this.dotClassName
          } else {
            tempObj.className = this.dotOnClassName
          };
          tempObj.title = "第" + (i + 1) + "页";
          sina.addEvent(tempObj, "click", Function("ScrollPic.childs[" + this.ID + "].pageTo(" + i + ")"))
        }
      }
    };
    if (this.autoPlay) {
      this.play()
    }
  };
  this.leftMouseDown = function() {
    if (_state != "ready") {
      return
    };
    _state = "floating";
    _scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveLeft()", this.speed)
  };
  this.rightMouseDown = function() {
    if (_state != "ready") {
      return
    };
    _state = "floating";
    _scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveRight()", this.speed)
  };
  this.moveLeft = function() {
    if (this.scrollContDiv.scrollLeft + this.space >= this.listDiv01.scrollWidth) {
      this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + this.space - this.listDiv01.scrollWidth
    } else {
      this.scrollContDiv.scrollLeft += this.space
    };
    this.accountPageIndex()
  };
  this.moveRight = function() {
    if (this.scrollContDiv.scrollLeft - this.space <= 0) {
      this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - this.space
    } else {
      this.scrollContDiv.scrollLeft -= this.space
    };
    this.accountPageIndex()
  };
  this.leftEnd = function() {
    if (_state != "floating") {
      return
    };
    _state = "stoping";
    clearInterval(_scrollTimeObj);
    var fill = this.pageWidth - this.scrollContDiv.scrollLeft % this.pageWidth;
    this.move(fill)
  };
  this.rightEnd = function() {
    if (_state != "floating") {
      return
    };
    _state = "stoping";
    clearInterval(_scrollTimeObj);
    var fill = -this.scrollContDiv.scrollLeft % this.pageWidth;
    this.move(fill)
  };
  this.move = function(num, quick) {
    var thisMove = num / 5;
    if (!quick) {
      if (thisMove >
        this.space) {
        thisMove = this.space
      };
      if (thisMove < -this.space) {
        thisMove = -this.space
      }
    };
    if (Math.abs(thisMove) < 1 && thisMove != 0) {
      thisMove = thisMove >= 0 &#63; 1 : -1
    } else {
      thisMove = Math.round(thisMove)
    };
    var temp = this.scrollContDiv.scrollLeft + thisMove;
    if (thisMove > 0) {
      if (this.scrollContDiv.scrollLeft + thisMove >= this.listDiv01.scrollWidth) {
        this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + thisMove - this.listDiv01.scrollWidth
      } else {
        this.scrollContDiv.scrollLeft += thisMove
      }
    } else {
      if (this.scrollContDiv.scrollLeft - thisMove <= 0) {
        this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - thisMove
      } else {
        this.scrollContDiv.scrollLeft += thisMove
      }
    };
    num -= thisMove;
    if (Math.abs(num) == 0) {
      _state = "ready";
      if (this.autoPlay) {
        this.play()
      };
      this.accountPageIndex();
      return
    } else {
      this.accountPageIndex();
      setTimeout("ScrollPic.childs[" + this.ID + "].move(" + num + "," + quick + ")", this.speed)
    }
  };
  this.next = function() {
    if (_state != "ready") {
      return
    };
    _state = "stoping";
    this.move(this.pageWidth, true)
  };
  this.play = function() {
    if (!this.autoPlay) {
      return
    };
    clearInterval(_autoTimeObj);
    _autoTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].next()", this.autoPlayTime * 1000)
  };
  this.stop = function() {
    clearInterval(_autoTimeObj)
  };
  this.pageTo = function(num) {
    if (_state != "ready") {
      return
    };
    _state = "stoping";
    var fill = num * this.frameWidth - this.scrollContDiv.scrollLeft;
    this.move(fill, true)
  };
  this.accountPageIndex = function() {
    this.pageIndex = Math.round(this.scrollContDiv.scrollLeft / this.frameWidth);
    if (this.pageIndex > Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4) - 1) {
      this.pageIndex = 0
    };
    var i;
    for (i = 0; i < this.dotObjArr.length; i++) {
      if (i == this.pageIndex) {
        this.dotObjArr[i].className = this.dotClassName
      } else {
        this.dotObjArr[i].className = this.dotOnClassName
      }
    }
  }
};
Salin selepas log masuk

3. Cipta fail HTML: 

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>实现滚动轮播的效果</title>
    <style type="text/css">
      .nav {
        width: 1100px;
        height: 160px;
        /*border: 1px solid red;*/
        margin-left: 140px;
        position: relative;
        cursor: pointer;
        margin-top: 15px;
        overflow: hidden;
        border: 1px solid red
      }
      .nav #nav-all {
        width: auto;
        height: 160px;
        position: absolute;
        left: -30px;
      }
      .nav .nav-i {
        width: 194px;
        height: 158px;
        background: #fff;
        border: 1px solid #d8d8d8;
        float: left;
        margin-left: 30px;
      }
      .nav .nav-img {
        text-align: center;
        padding-top: 50px;
      }
      .nav .nav-name {
        width: 192px;
        height: 30px;
        background: #f2f2f2;
        margin-top: 33px;
        line-height: 30px;
      }
      .nav .nav-name a {
        font-size: 16px;
        font-family: '微软雅黑';
        padding-left: 10px;
        cursor: pointer;
      }
      .nav .nav-name a:hover {
        color: #4a7abe;
      }
      #last {
        position: absolute;
        left: 0;
        top: 50px;
      }
      #next {
        position: absolute;
        right: 0;
        top: 50px;
      }
      .last-next {
        /*display: none;*/
        
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="nav" id="nav">
      <div id="nav-all">
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统1</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统2</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统3</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统4</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统5</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统6</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统7</a>
          </div>
        </div>
      </div>
      <a class="last-next" id="last">
        <img src="img/last.png" />
      </a>
      <a class="last-next" id="next">
        <img src="img/next.png" />
      </a>
    </div>
    <script src="play.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
      var scrollPic_02 = new ScrollPic();
      scrollPic_02.scrollContId = "nav-all";//存放所有轮播元素的div
      scrollPic_02.arrLeftId = "last"; //左箭头ID
      scrollPic_02.arrRightId = "next"; //右箭头ID
      scrollPic_02.frameWidth = 1102; //显示框宽    sfdasdfakfl;jlkajka;d度
      scrollPic_02.pageWidth = 226; //翻页宽度
      scrollPic_02.speed = 10; //移动速度(毫秒，越小越快)
      scrollPic_02.space = 20; //每次移动像素(单位px，越大越快)
      scrollPic_02.autoPlay = true; //自动播放:true|false
      scrollPic_02.autoPlayTime = 2; //自动播放间隔时间(秒)
      scrollPic_02.initialize(); //初始化
       //--><!]]>
    </script>
  </body>

</html>
Salin selepas log masuk

Antaranya: nyahpepijat gaya sendiri, perkara yang paling penting ialah skrip di bahagian bawah, tetapkan ini untuk mencapai kesan.

Jika anda ingin menulis karusel lain kali, anda hanya perlu menukar gaya dan menukar beberapa data dalam skrip.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Label berkaitan：
js 图片 轮播
sumber：php.cn
Artikel sebelumnya：Pengesahan bentuk mudah dilaksanakan dalam kemahiran javascript_javascript Artikel seterusnya：jQuery animasi asli effect_jquery
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bolehkah kumpulan pekerja yang diisytiharkan dalam berbilang laluan masih mengekalkan penggunaan cpunya tanpa mengambil berat tentang ambang Saya berharap untuk mencari sistem node.js dengan kumpulan pekerja untuk mengendalikan tug...
daripada 2024-04-06 19:54:23
0
1
444
Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...
daripada 2024-04-06 18:16:26
0
1
403
Tunjukkan panel sisi tersembunyi: ditandai Saya ingin mempunyai menu navigasi dalam panel sisi dengan keupayaan untuk beralih kepada ...
daripada 2024-04-06 15:49:33
0
1
319
Patutkah kita menggunakan SSG untuk menggunakan papan pemuka yang dibuat dengan Nuxt.js? Kami akan membangunkan papan pemuka untuk kegunaan dalaman menggunakan Nuxt.js. Memandangk...
daripada 2024-04-06 13:17:44
0
1
493
Elektron mendapat AppData pada pramuat Bagaimana untuk mendapatkan direktori AppData yang dipramuat? Background.js[...]asyncfunct...
daripada 2024-04-06 11:05:31
0
1
417
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan