html简单的渐变轮播插件

作者：袖梨 2022-06-25

话不多说，请看代码：

代码如下复制代码

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Exampletitle>

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

<div id="carouselRoot">div>

<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");

_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("div");

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