今天小编我为大家分享一下用js实现轮播图
js效果如下
鼠标悬浮图片停止切换,移出图片继续切换,点击导航区实现对应的图片切换
js需要传递参数banner(String 容器ID,Array 图片地址)
以下js代码可直接使用
/*定义所需要的全局变量*/
var index = 0;
var imgContainer,imgArrNum,lis;
/*清除li的背景色*/
function removeALLClass(eles) {
for (var i = 0; i < eles.length; i++) {
eles[i].style.backgroundColor = "white";
}
}
/*让图片循环切换*/
function move() {
if (index >= imgArrNum - 1) {
index = 0;
imgContainer.style.transition = "none";
} else {
index++;
imgContainer.style.transition = "all 1s linear";
}
changeColor(index);
imgContainer.style.left = -(index * window.innerWidth) + "px";
}
/*导航区随图片变换而变色*/
function changeColor(index) {
if (index < lis.length) {
removeALLClass(lis);
lis[index].style.backgroundColor = "orange";
} else {
removeALLClass(lis);
lis[0].style.backgroundColor = "orange";
}
}
function banner(id, imgArr) { /*需要调用的函数*/
imgArr.push(imgArr[0]);
imgArrNum = imgArr.length;
/*1.设置container宽高*/
var container = document.getElementById(id);
container.style.width = "100%";
container.style.overflow = "hidden";
container.style.position = "relative";
container.style.height = "390px";
/*2.添加子元素 imgContainer*/
imgContainer = document.createElement("div");
imgContainer.style.width = (imgArrNum * 100) + "%";
imgContainer.style.height = "100%";
imgContainer.style.position = "absolute";
container.appendChild(imgContainer);
/*3.创建图片*/
for (var i = 0; i < imgArrNum; i++) {
var img = document.createElement("img");
img.src = imgArr[i];
img.style.width = 100 / imgArrNum + "%";
img.style.height = "100%";
imgContainer.appendChild(img);
}
/*4.图片移动*/
imgContainer.style.transition = "all 1s linear";
imgContainer.style.left = "0px";
var set = setInterval("move()", 2000);
imgContainer.onmouseover = function () {
clearInterval(set);
};
imgContainer.onmouseout = function () {
set = setInterval("move()", 2000);
};
/*5.创建导航区*/
var nav = document.createElement("div");
container.appendChild(nav);
var ul = document.createElement("ul");
nav.appendChild(ul);
for (var i = 0; i < imgArrNum - 1; i++) {
var li = document.createElement("li");
ul.appendChild(li);
li.style.cssText = "width: 60px;\n" +
" height: 10px;\n" +
" float: left;\n" +
" list-style: none;\n" +
" background-color: white;\n" +
" margin-right: 10px;\n" +
" cursor:pointer;\n" +
" border-radius:10px;";
}
nav.style.cssText = "position: absolute;\n" +
" bottom: 15px;\n" +
" left: 50%;\n";
nav.style.marginLeft = -(70 * (imgArrNum - 1)) / 2 + "px";
nav.onmouseover = function () {
clearInterval(set);
};
nav.onmouseout = function () {
set = setInterval("move()", 2000);
};
/*设置初始导航区颜色*/
lis = nav.children[0].children;
lis[0].style.backgroundColor = "orange";
/*6.给导航区添加点击事件*/
for (var i = 0; i < lis.length; i++) {
!function (i) {
lis[i].onclick = function () {
changeImg(i);
}
}(i);
}
/*点击切换到对应的图片*/
function changeImg(i) {
index = i;
changeColor(index);
imgContainer.style.transition = "none";
imgContainer.style.left = -(i * window.innerWidth) + "px";
}
}