HTMLElement.prototype.creatTurnPage = function (ImageArray) {
//====生成dom元素==============
var DocUl = '<ul class ="sliderPage">'
doated = '<div class ="sliderIndex">',
length = ImageArray.length;
//插入图片
for (var i = 0; i < length; i++) {
DocUl += `<li>
<img src = "` + ImageArray[i] + `">
</li>`
//控制点
doated += `<span></span>`
}
//要将第一张图片再多插入一次
DocUl += `<li>
<img src = "` + ImageArray[0] + `">
</li>
</ul>`
//插入左右两侧的按钮
btn = `<div class = "btn btnLeft"><</div>
<div class ="btn btnRight">></div>`
//插入轮播图的控制
doated += '</div>'
this.innerHTML = DocUl + btn + doated;
//====样式设置================
var sliderPage = document.getElementsByClassName('sliderPage')[0],
Oli = sliderPage.getElementsByTagName('li'),
Oimg = sliderPage.getElementsByTagName('img'),
Obtn = document.getElementsByClassName('btn'),
sliderIndex = document.getElementsByClassName('sliderIndex')[0],
Ospan = sliderIndex.getElementsByTagName('span');
//给wrapper
原生JS轮播图插件(兼容IE)
最新推荐文章于 2024-07-03 12:55:44 发布
本文介绍了一种使用原生JavaScript编写的轮播图插件,该插件具有良好的浏览器兼容性,包括对Internet Explorer的支持。通过简单的HTML结构和CSS样式,结合JavaScript代码,实现了轮播图的动态切换效果。
摘要由CSDN通过智能技术生成