html中的轮播图有效果的,html中使用JS实现图片轮播效果

HTML 部分

• 1
• 2
• 3
• 4

css

.main_center_bannar {

width:100%;

position: relative;

}

.main_center_bannar img {

width: 100%;

}

.main_center_bannar ul {

list-style: none;

display: flex;

position: absolute;

left:130px;

bottom: 10px;

z-index: 2;

}

js部分

var bannner = document.getElementById("bannner");

var pic = bannner.getElementsByTagName("img");

var dot = document.getElementById("ulli").getElementsByTagName("li");

var index = 0;

var timer = null;

/*定义图片切换函数*/

function changePic(curIndex) {

for (var i = 0; i < pic.length; ++i) {

pic[i].style.display = "none";

}

pic[curIndex].style.display = "block";

}

/*index超出图片总量时归零*/

function autoPlay() {

if (+index >= pic.length) {

index = 0;

}

changePic(index);

index++;

}

/*定义并调用自动播放函数*/

timer = setInterval(autoPlay, 1500);

/*鼠标划过整个容器时停止自动播放*/

bannner.onmouseover = function () {

clearInterval(timer);

}

/*鼠标离开整个容器时继续播放下一张*/

bannner.onmouseout = function () {

timer = setInterval(autoPlay, 1500);

}

/*遍历所有数字导航实现划过切换至对应的图片*/

for (var i = 0; i < dot.length; i++) {

dot[i].onmouseover = function () {

clearInterval(timer);

index = this.innerText - 1;

changePic(index)

}

}