JS、HTML、CSS实现轮播效果

来源：动视网责编：小OO 时间：2020-11-27 20:10:31

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>；<。

推荐度：

点击下载本文 文档为doc格式

导读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>；<。

在前端开发中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实现轮播效果

推荐度：

点击下载本文 文档为doc格式

标签：轮播 js 效果

热门焦点

JS、HTML、CSS实现轮播效果

JS、HTML、CSS实现轮播效果

JS、HTML、CSS实现轮播效果

最新推荐

猜你喜欢

热门推荐