html简单的渐变轮播插件( 二 ) _网页设计

_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',

html简单的渐变轮播插件( 二 )

推荐阅读

月经第五天能泡温泉吗月经干净三天后才可泡温泉

手机有电流声怎么回事

10和28的最小公倍数 10和28的最小公倍数是多少

原神新人怎么玩原神新手使用技巧分享

李佳琦的新助理会是谁呢？是庆庆的可能性大吗？

三年级语文主要学习什么内容

情侣杯子上刻什么字防绿茶

土豆的茎为什么在土里

微信拉黑对方发消息给对方能看到吗

相亲男服装搭配技巧

iqooneo5跑分多少。

刘洪章大校怎么评价刘洪章

白羊男消失又突然找你，会突然消失的3星座

高中英语名词性从句名词性从句练习题

索尼镜头2470f4色彩怎么样,准备入手索尼镜头

理肤泉特安霜瓶子里的东西怎么弄