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简单的渐变轮播插件

推荐阅读

适合宝妈做的小生意有哪些适合宝妈做的小生意

苹果13面容识别不了怎么回事面容识别不了怎么回事

电话录音怎么保存电话录音怎么保存起来

蛋炒饭到底怎么做是先炒鸡蛋还是先炒米饭

玩转局域网网内互访六大经典问题

客厅窗帘什么风格好客厅窗帘选什么颜色好

dhcp服务器怎么设置

松油门有异响给油不响

妙蛙种子是什么梗

和包收款怎么申请

华为nova9系列手机怎么样华为nova9系列

孕妇吃南瓜利尿吗

油桃批发价格「市面上油桃多少钱一斤」

难忘那竹林初三作文

哪个烤箱的牌子好,需要买多大的

与你为邻高一作文