当前位置：Gxlcms > JavaScript > JS、HTML、CSS实现轮播效果

JS、HTML、CSS实现轮播效果

时间：2021-07-01 10:21:17 帮助过：10人阅读

在前端开发中JS、HTML、CSS这三门语言离开谁都无法实现非常好的开发，本文主要为大家详细介绍了JS+HTML+CSS实现轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

1.lunbo.html代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>大轮播</title> 
  <link rel="stylesheet" type="text/css" href="CSS/lunbo.css"/> 
  <script src="JS/lunbo.js" type="text/javascript"></script> 
</head> 
 
<body> 
<p id="container"> 
  <p id="list" style="left: -1350px;"> 
    <img src="image/banner_3.jpg"/> 
    <img src="image/banner_1.jpg"/> 
    <img src="image/banner_2.jpg"/> 
    <img src="image/banner_3.jpg"> 
    <img src="image/banner_1.jpg"/></p> 
  <p id="buttons"> 
    <span index="1"></span> 
    <span index="2"></span> 
    <span index="3"></span> 
  </p> 
  <a href="javascript:;" id="prev" class="arrow" style="font-size:100px; text-align:center;"><</a> 
  <a href="javascript:;" id="next" class="arrow" style="font-size:100px; text-align:center;">></a></p> 
</body> 
 
</html>

2.CSS/lunbo.css代码：

body { 
  margin: 0px; 
  padding: 0px; 
  width: 1350px; 
  height: 618px; 
} 
 
a { 
  text-decoration: none; 
} 
 
#container { 
  width: 1350px; 
  height: 618px; 
  overflow: hidden; 
  position: relative; 
  border-top: 1px solid #ac6a0a; 
} 
 
#list { 
  width: 6750px; 
  height: 618px; 
  position: absolute; 
  z-index: 1; 
} 
 
#list img { 
  float: left; 
  width: 1350px; 
  height: 618px; 
} 
 
#buttons { 
  position: absolute; 
  height: 20px; 
  width: 60px; 
  z-index: 2; 
  bottom: 20px; 
  left: 50%; 
} 
 
#buttons span { 
  cursor: pointer; 
  float: left; 
  border: 1px solid #ad6a0a; 
  width: 10px; 
  height: 10px; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  border-radius: 50%; 
  margin-right: 5px; 
} 
 
#buttons .on { 
  background: orangered; 
} 
 
.arrow { 
  cursor: pointer; 
  display: none; 
  line-height: 100px; 
  text-align: center; 
  width: 40px; 
  height: 40px; 
  position: absolute; 
  z-index: 2; 
  top: 180px; 
  background-color: RGBA(0, 0, 0, 0); 
  color: #fff; 
} 
 
.arrow:hover { 
  background-color: RGBA(0, 0, 0, 0); 
} 
 
#container:hover .arrow { 
  display: block; 
} 
 
#prev { 
  left: 10px; 
  color: #ffffff; 
} 
 
#next { 
  right: 10px; 
  color: #ffffff; 
}

3.JS/lunbo.js代码：

JS、HTML、CSS实现轮播效果

人气教程排行