Nativer JavaScript-Code implementiert ein Beispiel für den exquisiten Taobao-Karusselleffekt-js-Tutorial-php.cn

Nativer JavaScript-Code implementiert ein Beispiel für den exquisiten Taobao-Karusselleffekt

黄舟

Freigeben： 2017-05-28 10:27:09

Original

3450 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das native JavaScript zur Realisierung des exquisiten Taobao-Karusselleffekts vorgestellt und das vollständige Beispielformular mit einer detaillierten Analyse der JavaScript-Implementierung der Taobao-Karussellfunktion HTML-Layout , CSS und js Kernfunktionscode und wird mit Demo-Quellcode geliefert, den Leser als Referenz herunterladen können

Dieser Artikel beschreibt den von Native implementierten Taobao-Karusselleffekt JavaScript. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Karusselldiagramm ist für uns die einzige Möglichkeit, natives JS zu lernen

Es enthält die Anwendung vieler Grundkenntnisse, wie z Verwendung davon, DOM-Operation, sowie die Verwendung und Löschung von

setIntervall, float und Positionierung usw., was ein guter Test dafür ist, ob unser Grundwissen solide ist,

reicht nicht aus Um mehr zu sagen, gehen Sie direkt zum Bild

HTML-Code wie folgt:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>淘宝轮播图</title>
  <link rel="stylesheet" href="css/initialize.css" rel="external nofollow" />
  <link rel="stylesheet" href="css/tblunbotu.css" rel="external nofollow" />
</head>
<body>
<p id="container" class="clearFix">
  <p id="list" class="clearFix" style="left: -520px">
    <img src="img/5.jpg" alt=""/>
    <img src="img/1.jpg" alt=""/>
    <img src="img/2.jpg" alt=""/>
    <img src="img/3.jpg" alt=""/>
    <img src="img/4.jpg" alt=""/>
    <img src="img/5.jpg" alt=""/>
    <img src="img/1.jpg" alt=""/>
  </p>
  <p id="buttons" class="clearFix">
    <span class="on"></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="prev" class="arrow"><</a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next" class="arrow">></a>
</p>
<script type="text/javascript" src="js/tblunbotu.js"></script>
</body>
</html>

Nach dem Login kopieren

CSS-Stil lautet wie folgt:

/*
  第一步：设置外部框的样式
  第二步: 设置图片框的样式
  第三步: 设置箭头的样式
  第四步: 设置小圆点的样式
*/
#container {
  margin: 50px auto;
  position: relative;
  width: 520px;
  height: 280px;
  overflow: hidden;
}
#list {
  position: absolute;
  z-index: 1;
  width: 3640px;
}
#list img {
  float: left;
  width: 520px;
  height: 280px;
}
#buttons {
  height: 10px;
  width: 100px;
  position: absolute;
  left: 0;/*设置水平垂直居中*/
  right: 0;/*设置水平垂直居中*/
  margin: 0 auto;/*设置水平垂直居中*/
  bottom: 20px;
  z-index: 2;
}
#buttons span {
  float: left;
  margin-right: 5px;
  width: 10px;
  height: 10px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  background: #333;
  cursor: pointer;
}
#buttons .on {
  background: orangered;
}
.arrow {
  width: 40px;
  height: 40px;
  display: none;
  position: absolute;
  top: 0; /*设置水平垂直居中*/
  bottom: 0; /*设置水平垂直居中*/
  margin: auto 0; /*设置水平垂直居中*/
  font-size: 36px;
  font-weight: bold;
  line-height: 39px;
  text-align: center;
  color: #fff;
  background-color: RGBA(0, 0, 0, .3);
  cursor: pointer;
  z-index: 2;
}
.arrow:hover{
  background-color: RGBA(0, 0, 0, .7);
}
#container:hover .arrow {
  display: block;
}
#prev{
  left: 10px;
}
#next{
  right: 10px;
}

Nach dem Login kopieren

Javascript-Code ist wie folgt

Das obige ist der detaillierte Inhalt vonNativer JavaScript-Code implementiert ein Beispiel für den exquisiten Taobao-Karusselleffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!