起初用bootstrap写的轮播图如下:
实现功能:
点击小圆圈切换页面
点击左右按钮切换页面
等待5s自动切换页面
鼠标放置在左右箭头会有阴影效果
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Document</title>
<style>
.item{
height: 900px;
}
</style>
</head>
<body>
<div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="小鸟.jpg" alt="First slide">
</div>
<div class="item">
<img src="林道.jpg" alt="Second slide">
</div>
<div class="item">
<img src="灯塔.jpg" alt="Third slide">
</div>
<div class="item">
<img src="雏鸟.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
效果图:
后面是用js和css写的轮播图效果不算太好还算凑合:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="base.css">
<script src="base.js"></script>
<title>Document</title>
</head>
<body>
<div class="base">
<ul class="list">
<li class="item active"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<ul class="pointList">
<li class="point active" data-index = 0></li>
<li class="point" data-index = 1></li>
<li class="point" data-index = 2></li>
<li class="point" data-index = 3></li>
</ul>
<button class="btn" id="lbtn"> < </button>
<button class="btn" id="rbtn"> > </button>
</div>
</body>
</html>
css、部分
.base{
width: 1200px;
height: 600px;
position: relative;
padding-left: 250px;
padding-top: 50px;
}
.list {
width: 1200px;
height: 600px;
position: relative;
padding-left: 0px;
}
.item {
width: 100%;
height: 100%;
list-style: none;
position: absolute;
left: 0;
opacity: 0;
}
.item:nth-child(1) {
background-image: url(雏鸟.jpg);
background-size: 1200px auto;
}
.item:nth-child(2) {
background-image: url(灯塔.jpg);
background-size: 1200px auto;
}
.item:nth-child(3) {
background-image: url(林道.jpg);
background-size: 1200px auto;
}
.item:nth-child(4) {
background-image: url(小鸟.jpg);
background-size: 1200px auto;
}
.item.active {
z-index: 10;
opacity: 1;
}
.btn {
width: 60px;
height: 100px;
z-index: 100;
top: 300px;
color: #040001;
opacity:0.5;
}
#lbtn {
left: 250px;
position: absolute; ;
}
#rbtn {
right: 0px;
position: absolute;
}
.pointList {
list-style: none;
padding-left: 0px;
position: absolute;
right: 20px;
bottom: 20px;
z-index: 200;
}
.point {
width: 10px;
height: 10px;
background-color: antiquewhite;
border-radius: 100%;
float: left;
margin-right: 8px;
border-style: solid;
border-width: 2px;
border-color: slategray;
cursor: pointer;
}
.point.active{
background-color: cadetblue;
}
li::marker{
content: none;
}
js部分
window.addEventListener('load',function() {
var items = document.querySelectorAll(".item");
var points = document.querySelectorAll(".point")
var left = document.getElementById("lbtn");
var right = document.getElementById("rbtn");
var all = document.querySelector(".base")
var index = 0;
var time = 0;
var clearActive = function () {
for (i = 0; i < items.length; i++) {
items[i].className = 'item';
}
for (j = 0; j < points.length; j++) {
points[j].className = 'point';
}
}
var goIndex = function () {
clearActive();
items[index].className = 'item active';
points[index].className = 'point active'
}
var Left = function () {
if (index == 0) {
index = 3;
} else {
index--;
}
goIndex();
}
var Right = function () {
if (index < 3) {
index++;
} else {
index = 0;
}
goIndex();
}
left.addEventListener('click', function () {
Left();
time = 0;
})
right.addEventListener('click', function () {
Right();
time = 0;
})
for(i = 0;i < points.length;i++){
points[i].addEventListener('click',function(){
var pointIndex = this.getAttribute('data-index')
index = pointIndex;
goIndex();
time = 0;
})
}
var timer;
function play(){
timer = setInterval(() => {
time ++;
if(time == 20 ){
goRight();
time = 0;
}
},100)
}
play();
all.onmousemove = function(){
clearInterval(timer)
}
all.onmouseleave = function(){
play();
}
})
详细介绍:
点击左右按钮切换图片
点击下面小圆点快速切换图片
等待2s自动切换图片