简单html实现图片轮播,JavaScript实现简易轮播图

JavaScript实现简易轮播图

Html代码块：

CSS代码：

* {

margin: 0;

padding: 0;

}

.container {

overflow-x: hidden;

}

.box {

height: 260px;

display: flex;

left: 0;

position: relative;

}

.box img {

flex: 1;

}

我这里使用的是弹性布局，更简洁的将图片排列，不会像float和inline-block一些问题。

JS代码：

var imgList = document.getElementsByTagName("img");//获取所有图片NodeList一个集合

var imgLength = imgList.length;//拿到集合的长度大小

var container = document.querySelector(".container");

var box = document.querySelector(".box");

var width = 360;//定义一个宽度,原本想直接获取但是发现弹性布局默认会让宽度为浏览器宽度

var timer;//设置一个全局变量的计时器

var index = 1;//索引

container.style.width = width + 'px';//设置容器的宽度

box.style.width = width * imgLength + 'px';//动态设置盒子的宽度

function startImg() {

timer = setInterval(function() {

if (index <= 5) {

box.style.left = box.offsetLeft - width + "px";

box.style.transition = ".4s";

if(index == 5){

//当index==5时候这一遍代码都会执行,所以这里单独设置当index==5时候,setTimeOut等待动画结束后触发,从而衔接.

setTimeout(function(){

box.style.left = "0px";

box.style.transition = "0s";

index = 1;

},400)}

}

index ++;

}, 3000);

}

//为容器设置鼠标移动事件

container.addEventListener("mousemove",function(){

if(timer){

clearInterval(timer);

}

})

//为容器设置鼠标移出事件

container.addEventListener("mouseleave",function(){

startImg();

})

//默认开始执行函数

startImg();

在宽度动态获取这里做的不够好，如果有小伙伴给我提个意见可好。谢谢大家欣赏！