html简单的渐变轮播插件

更新时间：2022-04-01 16:53:48作者：佚名

html简单的渐变轮播插件

　　html如何实现简单酷炫的简单的渐变轮播插件呢？这篇文章能够教你！感兴趣的话请看下文。

　　话不多说，请看代码：

　　<html>

　　<head>

　　<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>

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

　　_dotContainer.className = 'CreabineCarousel-dotContainer';

　　_root.appendChild（_dotContainer）；

　　for （var i = 0; i < imgPathList.length; i++） {

　　var _dot = document.createElement（"li"）；

　　_dot.className = "dot";

　　_dot.id = "item" + （i+1） + "dot";

　　_dotContainer.appendChild（_dot）；

　　var _item = document.createElement（"p"）；

　　_item.className = "CreabineCarousel-item"

　　_item.id = "item" + （i+1）；

　　_item.style.backgroundImage = "url（" + imgPathList[i] + "）";

　　_item.style.backgroundSize = "cover";

　　_item.style.backgroundRepeat = "no-repeat";

　　if（i == 0）{

　　_item.style.opacity = '0';

　　_item.style.zIndex = '1';

　　}

　　_root.appendChild（_item）；

　　var _h = document.createElement（"h1"）；

　　_h.innerText = textList[i].title;

　　_item.appendChild（_h）；

　　var _p = document.createElement（"p"）；

　　_p.innerText = textList[i].text;

　　_item.appendChild（_p）；

　　}

　　_dotContainer.addEventListener（"mouseover",function（e）{

　　if（ e.target && e.target.className == "dot" ）{

　　clearInterval（timer）；

　　var id = e.target.id.substring（0,5）；

　　CarouselHover（id）；

　　}

　　}）；

　　_dotContainer.addEventListener（"mouseout",function（e）{

　　if（ e.target && e.target.className == "dot" ）{

　　var id = e.target.id;

　　CarouselOut（id）；

　　}

　　}）；

　　if（_autoScroll）{

　　timer = setInterval（function（）{Carousel（）},_scrollDuration）；

　　}

　　function Carousel（）{

　　var all = document.getElementsByClassName（'CreabineCarousel-item'）；

　　for （var i = all.length - 1; i >= 0; i--） {

　　all[i].style.opacity = '0';

　　all[i].style.zIndex = '1';

　　}

　　var i=（（changeCount++%5）+1）；

　　var id = "item" + i;

　　document.getElementById（id）。style.opacity = '1';

　　document.getElementById（id）。style.zIndex = '10';

　　}

　　function CarouselHover（id）{

　　clearInterval（timer）；

　　var all = document.getElementsByClassName（'CreabineCarousel-item'）；

　　for （var i = all.length - 1; i >= 0; i--） {

　　all[i].style.opacity = '0';

　　all[i].style.zIndex = '1';

　　}

　　document.getElementById（id）。style.opacity = '1';

　　document.getElementById（id）。style.zIndex = '10';

　　}

　　function CarouselOut（id）{

　　var num = id.substring（4,5）；

　　num = parseInt（num）-1;

　　changeCount = num;

　　timer = window.setInterval（function（）{Carousel（）},_scrollDuration）；

　　}

　　initElements（）；

　　new CreabineCarousel（{

　　root:'carouselRoot',

　　autoScroll:true,

　　scrollDuration:3000,

　　height:700,

　　images:['https://cdn.worktile.com/images/index/index_all_bg_1.jpg?v=4.5.18','https://cdn.worktile.com/images/index/index_all_bg_2.jpg?v=4.5.18','https://cdn.worktile.com/images/index/index_all_bg_3.jpg?v=4.5.18','https://cdn.worktile.com/images/index/index_all_bg_4.jpg?v=4.5.18','https://cdn.worktile.com/images/index/index_all_bg_5.jpg?v=4.5.18'],

　　contant:[

　　{

　　title:"title-1",

　　text:"text-111"

　　{

　　title:"title-2",

　　text:"text-222"

　　{

　　title:"title-3",

　　text:"text-333"

　　{

　　title:"title-4",