js实现图片无缝循环轮播

本文实例为大家分享了js实现图片无缝循环轮播的具体代码,供大家参考,具体内容如下

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

#container{

overflow:hidden;

width:400px;

height:300px;

margin:auto;

}

#front,#container{

display:flex;

flex-direction:row;

}

#container img{

width:400px;

height:300px;

}

</style>

</head>

<body>

<div id="container">

<div id="front">

<img src="k2.jpg" alt="">

<img src="k1.jpg" alt="" >

<img src="k3.jpg" alt="">

<img src="k4.jpg" alt="">

</div>

<div id="back"><img src="k5.jpg" alt=""></div>

</div>

</body>

<script>

front.style="position:relative;left:0px;";

back.style="position:relative;left:0px;";

setInterval(moveimg,100);

var fleft,bleft;

function moveimg(){

fleft = parseInt(front.style.left);

bleft = parseInt(back.style.left);

if(fleft == -1600){

front.style.left = 400+"px";

fleft = parseInt(front.style.left);

}

if(bleft == -2000) {

back.style.left = 0+"px";

bleft = parseInt(back.style.left);

}

front.style.left = (fleft-10)+"px";

back.style.left = (bleft-10)+"px";

}

</script>

</html>

更多关于轮播图效果的专题,请点击下方链接查看学习

javascript图片轮播效果汇总

jquery图片轮播效果汇总

Bootstrap轮播特效汇总

以上是 js实现图片无缝循环轮播 的全部内容, 来源链接: utcz.com/z/357694.html

回到顶部