html简单的渐变轮播插件 _网页设计

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"）；

html简单的渐变轮播插件

推荐阅读

sk-ll是什么档次skll适合多大年龄用

手机如何弄电子版照片

高铁上下车是一个门吗

訚字怎么读

银耳和什么一起吃好

新皮鞋有点紧该怎么办

三文鱼是主因吗

馍夹牛肉做法和配方牛肉夹馍的做法

咸阳仪凤西街棚户区会拆迁吗

刘备为什么投袁绍

最美四月天是指几月

高铁上为什么有人检票，为什么搭火车上车后车开了才检票呢

广州高铁南站至深圳北站时刻表查询电话，广州南站晚上十点多以后还有到深圳北的车吗

微信群折叠功能怎么打开

暗黑西游记神哪吒怎么过,西游传奇游戏介绍

飞影铠甲和严莉莉没有谈恋爱飞影铠甲扮演者