JavaScript原生代码实现精美的淘宝轮播图效果示例

来源：独树教育

这篇文章主要介绍了原生JavaScript实现精美的淘宝轮播图效果,结合完整实例形式详细分析了javascript实现淘宝轮播图功能的相关HTML布局、css及js核心功能代码,并附带demo源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了原生JavaScript实现的淘宝轮播图效果。分享给大家供大家参考，具体如下：

轮播图是我们学习原生js的必经之路

它包含很多基本知识的运用，像this的使用，DOM的操作，还有setInterval的使用和清除，浮动与定位等等，很好的考察了我们的基础知识牢不牢固，

话不多说，直接上图

HTML代码如下：

<!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样式如下：

/*
 第一步：设置外部框的样式
 第二步: 设置图片框的样式
 第三步: 设置箭头的样式
 第四步: 设置小圆点的样式
*/
#container {
 margin: 50px auto;
 position: relative;
 width: 520px;
 height: 280px;
 overflow: hidden;
}
#list {
 position: absolute;
 z-index: 1;
 width: 30px;
}
#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代码如下

显示全文

全部频道

JavaScript原生代码实现精美的淘宝轮播图效果示例