效果描述:
轮播图,默认情况下循环向左轮播,点击左右箭头实现切换到上一张以及下一张,点击小圆点将直接显示单击的那张图片。
实现代码:
使用bootstrap中的Carousel插件实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>轮播图</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<style>
body{
padding: 30px;
}
#myCarousel{
width: 550px;
}
h3,p{
color: yellow;
}
img{
width: 100%;
}
/*修改插件中的样式