![html简单的渐变轮播插件](/images/defaultpic.gif)
html如何实现简单酷炫的简单的渐变轮播插件呢?这篇文章能够教你!感兴趣的话请看下文 。
话不多说,请看代码:
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<style>
.CreabineCarousel{
width: 100%;
height: 700px;
background-size: cover;
position: relative;
}
.CreabineCarousel .CreabineCarousel-dotContainer{
position:absolute;
bottom: 5%;
margin:0 auto;
z-index: 100;
list-style-type: none;
width: 100%;
text-align: center;
left: 0;
padding: 0;
}
.CreabineCarousel .CreabineCarousel-dotContainer .dot{
width: 30px;
height: 4px;
border-radius:3px;
background-color:#fff;
display: inline-block;
margin:0 5px;
opacity: 0.7;
}
.CreabineCarousel .CreabineCarousel-dotContainer .dot:hover{
opacity: 1;
}
.CreabineCarousel .CreabineCarousel-item{
position:absolute;
width: 100%;
height: 100%;
transition:all 0.8s;
}
.CreabineCarousel .CreabineCarousel-item h1{
max-width: 600px;
text-align: center;
font-size: 5rem;
line-height: 1.3;
color: #fff;
padding: 300px 50px 0 50px;
margin:0 auto;
}
.CreabineCarousel .CreabineCarousel-item p{
max-width: 600px;
text-align: center;
font-size: 1.4rem;
line-height: 1.4;
color: #fff;
padding-top: 10px 50px 0 50px;
margin:0 auto;
}
</style>
</head>
<body>
<p id="carouselRoot"></p>
<script>
function CreabineCarousel(options){
var imgPathList = options.images;
var textList = options.contant;
if (!options.root) {
throw "require root to this CreabineCarousel";
}
if (!imgPathList) {
throw "must provide parameter images";
}
if (imgPathList.length != textList.length) {
throw "images are not equal to contants";
}
var changeCount = 0;
var timer;
var _autoScroll = options.autoScroll || false;
var _scrollDuration = options.scrollDuration || 4000;
var _height = options.height || 700;
function initElements() {
var _root = document.getElementById(options.root);
if (!_root) {
throw "no exist called this name element,please create element called this name";
}
_root.className = "CreabineCarousel";
_root.style.height = _height + "px";
var _dotContainer = document.createElement("ul");
推荐阅读
- AsyncTask的三个属性值和四个步骤
- 建设商城类的网站应做好五个方面
- 2017 年网页设计的十大趋势
- 关于待机图片制作和修改的几点经验
- 伤口引流管拔出很痛怎么办 拔伤口上的引流管疼吗?
- 女性大肠癌的早期症状? 女性大肠癌的早期症状
- 胰十二指肠切除手术后注意哪些饮食 胰十二指肠切除术后的饮食
- 女性胃癌的早期症状后背疼怎么回事 女性胃癌的早期症状后背疼?
- 为什么玩083冒险岛在进下个地图的时候电脑自动关机?为
- 每天油脂类的摄入量不应超过每天油脂类的摄入量是多少