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:093383Durchsuche
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 vonsetIntervall, 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!