提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、轮播图是什么
- 二、使用步骤
- 1.首先将我们需要的页面进行简单的布局
- 2.然后利用CSS对body内容进行定位和样式的编写
- 3.接下来是用Javascript对事件进行绑定
前言
在前端的初级学习过程中，学会制作一些简单的小页面显得尤为重要，下面我们将一起学习利用Html css和Javascript如何制作一个简单的轮播图。
一、轮播图是什么
轮播图：在一个模块或者说窗口，通过电脑上鼠标点击、手机上手指滑动后，可以看到多张图片。这些图片就都是轮播图，这个模块就叫做轮播模块。
二、使用步骤
1.首先将我们需要的页面进行简单的布局
代码如下：
<body>
<div class="box">
<ul class="ul1" id="ul1">
<li><img src="images/1.jpg" width="520px" height="280px"></li>
<li><img src="images/2.jpg" width="520px" height="280px"></li>
<li><img src="images/3.jpg" width="520px" height="280px"></li>
<li><img src="images/4.jpg" width="520px" height="280px"></li>
<li><img src="images/5.jpg" width="520px" height="280px"></li>
</ul>
<div class="left-button indexs" id = "left-button"><</div>
<div class="right-button indexs" id = "right-button">></div>
<ul class="ul2 indexs" id="ul2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>2.然后利用CSS对body内容进行定位和样式的编写
代码如下：
<style type = "text/css">
/*设置整体字体大小为12px*/
*{
font-size: 12px;
}
/*消除默认样式*/
ul{
margin: 0;
padding: 0;
list-style: none;
}
/*设置容器大小以及居中显示*/
.box{
width: 520px;
height: 280px;
position: relative;
border: 1px red solid;
margin: 50px auto;
}
/*对图片的位置进行定位*/
.ul1{
width: 100%;
height: 100%;
}
.ul1>li{
position: absolute;
top: 0;
left: 0;
}
/*对左右两侧按钮进行定位并设置样式*/
.left-button{
width: 35px;
height: 70px;
background-color: #00000050;
color: #fff;
font-size: 28px;
text-align: center;
line-height: 70px;
position: absolute;
top:50%;
left: 0;
margin-top: -35px;
border-radius: 0 5px 5px 0;
}
.left-button:hover{
cursor: pointer;
}
.right-button{
width: 35px;
height: 70px;
background-color: #00000050;
color: #fff;
font-size: 28px;
text-align: center;
line-height: 70px;
position: absolute;
top:50%;
right:0;
margin-top: -35px;
border-radius: 5px 0 0 5px;
}
.right-button:hover{
cursor: pointer;
}
/*对图片下方圆点进行定位及设置样式*/
.ul2{
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -50px;
}
.ul2>li{
width: 20px;
height: 20px;
background-color: white;
text-align: center;
line-height: 20px;
float: left;
border-radius: 100%;
margin-right: 10px;
}
.ul2>li:hover{
background-color: red;
color: #fff;
cursor: pointer;
}
.ul2>li:nth-child(1){
background-color: red;
color: #fff;
}
/*令第一张图片显示在页面，其他图片隐藏*/
.ul1>li:nth-child(1){
z-index: 100;
}
/*让下方圆点显示在图片之上*/
.indexs{
z-index: 1000;
}
</style>3.接下来是用Javascript对事件进行绑定
1. 设计定时器，令图片2秒钟换一次
代码如下：
dingshiqi = setInterval(function(){
index++;
if(index == imgs.length){
index = 0;
}
for(var i = 0; i <imgs.length; i++){
imgs[i].style.cssText="z-index:0;";
button[i].style.cssText="background-color:#fff;color:#000;";
}
imgs[index].style.cssText="z-index:100;";
button[index].style.cssText="background-color: red;color:white";
},2000);2. 对左右两边按钮进行绑定事件，点击左边按钮，展示上一张图片，点击右边按钮，展示下一张图片
代码如下：
leftButton.onclick = function(){
clearInterval(dingshiqi);
index--;
if(index < 0){
index = imgs.length - 1;
}
for(var i = 0; i<imgs.length; i++){
imgs[i].style.cssText = "z-index:0;";
button[i].style.cssText="background-color:#fff;color:#000;";
}
imgs[index].style.cssText = "z-index:100;"
button[index].style.cssText="background-color: red;color:white";
congqi();
}
rightButton.onclick = function(){
clearInterval(dingshiqi);
index++;
if(index > imgs.length - 1){
index = 0;
}
for(var i = 0; i<imgs.length; i++){
imgs[i].style.cssText = "z-index:0;";
button[i].style.cssText="background-color:#fff;color:#000;";
}
imgs[index].style.cssText = "z-index:100;"
button[index].style.cssText="background-color: red;color:white";
congqi();
}3.图片下方5个按钮绑定事件，点击哪个按钮，跳转至相应图片及按钮
代码如下：
button[0].onclick = function(){
clearInterval(dingshiqi);
index = 0;
for(var i = 0; i<imgs.length; i++){
imgs[i].style.cssText = "z-index:0;";
button[i].style.cssText = "background-color:#fff;color:#000;";
}
imgs[index].style.cssText = "z-index:100;"
button[0].style.cssText = "background-color:red;color:white";
congqi();
}
button[1].onclick = function(){
clearInterval(dingshiqi);
index = 1;
for(var i = 0; i<imgs.length; i++){
imgs[i].style.cssText = "z-index:0;";
button[i].style.cssText = "background-color:#fff;color:#000;";
}
imgs[index].style.cssText = "z-index:100;"
button[1].style.cssText = "background-color:red;color:white";
congqi();
}
button[2].onclick = function(){
clearInterval(dingshiqi);
index = 2;
for(var i = 0; i<imgs.length; i++){
imgs[i].style.cssText = "z-index:0;";
button[i].style.cssText = "background-color:#fff;color:#000;";
}
imgs[index].style.cssText = "z-index:100;"
button[2].style.cssText = "background-color:red;color:white";
congqi();
}
button[3].onclick = function(){
clearInterval(dingshiqi);
index = 3;
for(var i = 0; i<imgs.length; i++){
imgs[i].style.cssText = "z-index:0;";
button[i].style.cssText = "background-color:#fff;color:#000;";
}
imgs[index].style.cssText = "z-index:100;"
button[3].style.cssText = "background-color:red;color:white";
congqi();
}
button[4].onclick = function(){
clearInterval(dingshiqi);
index = 4;
for(var i = 0; i<imgs.length; i++){
imgs[i].style.cssText = "z-index:0;";
button[i].style.cssText = "background-color:#fff;color:#000;";
}
imgs[index].style.cssText = "z-index:100;"
button[4].style.cssText = "background-color:red;color:white";
congqi();
}4.对Javascript部分代码进行合并
代码如下：
<script type="text/javascript">
var imgs = document.getElementById("ul1").children;
var button = document.getElementById("ul2").children;
var leftButton = document.getElementById("left-button");
var rightButton = document.getElementById("right-button")
var index = 0;
var dingshiqi;
congqi();
function congqi(){
dingshiqi = setInterval(function(){
index++;
if(index == imgs.length){
index = 0;
}
for(var i = 0; i <imgs.length; i++){
imgs[i].style.cssText="z-index:0;";
button[i].style.cssText="background-color:#fff;color:#000;";
}
imgs[index].style.cssText="z-index:100;";
button[index].style.cssText="background-color: red;color:white";
},2000);
}
leftButton.onclick = function(){
clearInterval(dingshiqi);
index--;
if(index < 0){
index = imgs.length - 1;
}
for(var i = 0; i<imgs.length; i++){
imgs[i].style.cssText = "z-index:0;";
button[i].style.cssText="background-color:#fff;color:#000;";
}
imgs[index].style.cssText = "z-index:100;"
button[index].style.cssText="background-color: red;color:white";
congqi();
}
rightButton.onclick = function(){
clearInterval(dingshiqi);
index++;
if(index > imgs.length - 1){
index = 0;
}
for(var i = 0; i<imgs.length; i++){
imgs[i].style.cssText = "z-index:0;";
button[i].style.cssText="background-color:#fff;color:#000;";
}
imgs[index].style.cssText = "z-index:100;"
button[index].style.cssText="background-color: red;color:white";
congqi();
}
button[0].onclick = function(){
clearInterval(dingshiqi);
index = 0;
for(var i = 0; i<imgs.length; i++){
imgs[i].style.cssText = "z-index:0;";
button[i].style.cssText = "background-color:#fff;color:#000;";
}
imgs[index].style.cssText = "z-index:100;"
button[0].style.cssText = "background-color:red;color:white";
congqi();
}
button[1].onclick = function(){
clearInterval(dingshiqi);
index = 1;
for(var i = 0; i<imgs.length; i++){
imgs[i].style.cssText = "z-index:0;";
button[i].style.cssText = "background-color:#fff;color:#000;";
}
imgs[index].style.cssText = "z-index:100;"
button[1].style.cssText = "background-color:red;color:white";
congqi();
}
button[2].onclick = function(){
clearInterval(dingshiqi);
index = 2;
for(var i = 0; i<imgs.length; i++){
imgs[i].style.cssText = "z-index:0;";
button[i].style.cssText = "background-color:#fff;color:#000;";
}
imgs[index].style.cssText = "z-index:100;"
button[2].style.cssText = "background-color:red;color:white";
congqi();
}
button[3].onclick = function(){
clearInterval(dingshiqi);
index = 3;
for(var i = 0; i<imgs.length; i++){
imgs[i].style.cssText = "z-index:0;";
button[i].style.cssText = "background-color:#fff;color:#000;";
}
imgs[index].style.cssText = "z-index:100;"
button[3].style.cssText = "background-color:red;color:white";
congqi();
}
button[4].onclick = function(){
clearInterval(dingshiqi);
index = 4;
for(var i = 0; i<imgs.length; i++){
imgs[i].style.cssText = "z-index:0;";
button[i].style.cssText = "background-color:#fff;color:#000;";
}
imgs[index].style.cssText = "z-index:100;"
button[4].style.cssText = "background-color:red;color:white";
congqi();
}
</script>
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
# 总结
以上就是利用Html，css和Javascript制作简单的轮播图的面向过程方法。方法非常的简单，代码也容易理解。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
