Heim > Artikel > Web-Frontend > Nativer JavaScript-Code implementiert ein Beispiel für den exquisiten Taobao-Karusselleffekt

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

黄舟Original: 2017-05-28 10:27:093411Durchsuche

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>

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;
}

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine Fallstudie einfacher dreistufiger Verknüpfungsfunktionen für Provinzen, Städte und Kreise, die in nativem JavaScript-Code implementiert sindNächster Artikel：Eine Fallstudie einfacher dreistufiger Verknüpfungsfunktionen für Provinzen, Städte und Kreise, die in nativem JavaScript-Code implementiert sind

In Verbindung stehende Artikel

Mehr sehen