简单的渐变轮播插件
话不多说，请看代码：
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Example</title>
<style>
.CreabineCarousel{
width:100%;
height:700px;
background-size:cover;
position:relative;
}
.CreabineCarousel.CreabineCarousel-dotContainer{
position:absolute;
bottom:5%;
margin:0auto;
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:05px;
opacity:0.7;
}
.CreabineCarousel.CreabineCarousel-dotContainer.dot:hover{
opacity:1;
}
.CreabineCarousel.CreabineCarousel-item{
position:absolute;
width:100%;
height:100%;
transition:all0.8s;
}
.CreabineCarousel.CreabineCarousel-itemh1{
max-width:600px;
text-align:center;
font-size:5rem;
line-height:1.3;
color:#fff;
padding:300px50px050px;
margin:0auto;
}
.CreabineCarousel.CreabineCarousel-itemp{
max-width:600px;
text-align:center;
font-size:1.4rem;
line-height:1.4;
color:#fff;
padding-top:10px50px050px;
margin:0auto;
}
</style>
</head>
<body>
<divid="carouselRoot"></div>
<script>
functionCreabineCarousel(options){
varimgPathList=options.images;
vartextList=options.contant;
if(!options.root){
throw"requireroottothisCreabineCarousel";
}
if(!imgPathList){
throw"mustprovideparameterimages";
}
if(imgPathList.length!=textList.length){
throw"imagesarenotequaltocontants";
}
varchangeCount=0;
vartimer;
var_autoScroll=options.autoScroll||false;
var_scrollDuration=options.scrollDuration||4000;
var_height=options.height||700;
functioninitElements(){
var_root=document.getElementById(options.root);
if(!_root){
throw"noexistcalledthisnameelement,pleasecreateelementcalledthisname";
}
_root.className="CreabineCarousel";
_root.style.height=_height+"px";
var_dotContainer=document.createElement("ul");
_dotContainer.className='CreabineCarousel-dotContainer';
_root.appendChild(_dotContainer);
for(vari=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);
varid=e.target.id.substring(0,5);
CarouselHover(id);
}
});
_dotContainer.addEventListener("mouseout",function(e){
if(e.target&&e.target.className=="dot"){
varid=e.target.id;
CarouselOut(id);
}
});
if(_autoScroll){
timer=setInterval(function(){Carousel()},_scrollDuration);
}
}
functionCarousel(){
varall=document.getElementsByClassName('CreabineCarousel-item');
for(vari=all.length-1;i>=0;i--){
all[i].style.opacity='0';
all[i].style.zIndex='1';
}
vari=((changeCount++%5)+1);
varid="item"+i;
document.getElementById(id).style.opacity='1';
document.getElementById(id).style.zIndex='10';
}
functionCarouselHover(id){
clearInterval(timer);
varall=document.getElementsByClassName('CreabineCarousel-item');
for(vari=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';
}
functionCarouselOut(id){
varnum=id.substring(4,5);
num=parseInt(num)-1;
changeCount=num;
timer=window.setInterval(function(){Carousel()},_scrollDuration);
}
initElements();
newCreabineCarousel({
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"
},
]
});
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！