手機(jī)版WPS 手機(jī)版wps免費(fèi)下載
2022-11-29
網(wǎng)站首頁
手機(jī)版
更新時(shí)間：2022-04-01 16:54:06作者：佚名
html如何實(shí)現(xiàn)簡(jiǎn)單酷炫的簡(jiǎn)單的漸變輪播插件呢？這篇文章能夠教你！感興趣的話請(qǐng)看下文。
話不多說，請(qǐng)看代碼：
<html>
<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>
<p id="carouselRoot"></p>
<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（"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",
text:"text-444"
},
{
title:"title-5",
text:"text-555"
},
]
}）；
</script>
</body>
</html>