初学js语言的朋友都知道,“轮播图”效果是我们必学的一大难点。既要用定时器实现自动播放功能,又要实现用户点击向左或向右的手动切换功能,还要实现指示图标的点击切换图片功能。要应用到的知识点很丰富。
实现轮播图的方法有多种。现在,本作把自己的代码放出来给有需要的朋友参考一下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>heartmv.com</title>
<style>
* {
margin: 0;
padding: 0
}
html {
font-size: 15px;
}
.box {
width: 50rem;
height: 32rem;
border: 3px dashed red;
margin: 15px 0;
position: relative;
left: 50%;
top: 5%;
transform: translate(-50%, 0);
overflow: hidden;
}
.box>ul {
width: 500%;
height: 32rem;
position: absolute;
}
.box>ul>li {
width: 50rem;
height: 32rem;
list-style: none;
float: left;
}
.box li img {
width: 50rem;
height: 32rem;
}
.box>ol {
position: absolute;
left: 50%;
bottom: 15px;
transform: translate(-50%, 0);
}
.box>ol>li {
width: 1.5rem;
height: 1.5rem;
list-style: none;
margin-left: 15px;
float: left;
border-radius: 1.5rem;
background: rgba(191, 0, 3, 0.5);
cursor: pointer;
}
.box>ol>li.now {
width: