html渐变轮播,html简单的渐变轮播插件

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

话不多说，请看代码：

Example

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

}

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"

},

{

title:"title-4",

text:"text-444"

},

{

title:"title-5",

text:"text-555"

},

]

})；