简单的渐变轮播插件
程序员文章站
2022-06-13 14:55:22
话不多说，请看代码：
...
话不多说，请看代码：
<html lang="en">
<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>
<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"
},
{
title:"title-4",
text:"text-444"
},
{
title:"title-5",
text:"text-555"
},
]
});
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！