使用原生javascript实现网页中banner滚动切换效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用原生javascript实现网页中banner滚动切换效果相关的知识，希望对你有一定的参考价值。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#banner{
width: 100%;
overflow: hidden;
white-space: nowrap;
}
#banner #inside{
width: 9600px;
position: relative;
left: 50%;
margin-left: -960px;
transition: all 1s ease;
}
#banner img{
width: 1920px;
}
</style>
<script>
var num = 0;
window.onload = function(){
var inside = document.getElementById("inside");
var interval = setInterval(function(){
inside.style.transition = "all 1s ease";
num++;
switch (num){
case 1:
inside.style.transition = "none";
inside.style.marginLeft = (-960)+"px";
break;
case 2:
inside.style.marginLeft = (-960-1920)+"px";
break;
case 3:
inside.style.marginLeft = (-960-1920*2)+"px";
break;
case 4:
inside.style.marginLeft = (-960-1920*3)+"px";
num = 0;
break;
default:
break;
}
},2000);
}
</script>
</head>
<body>
<div id="banner">
<div id="inside"><img src="img/1920x450_Demmo.jpg" id="img1" /><img src="img/1920x450_doublebing_170307.jpg" id="img2" /><img src="img/1920x450_Gravity_Rush2_170228.jpg" id="img3" /><img src="img/1920x450_Last_Guardian_170302.jpg" id="img4" />
</div>
</div>
</body>
</html>
以上是关于使用原生javascript实现网页中banner滚动切换效果的主要内容，如果未能解决你的问题，请参考以下文章
原生JS实现各种经典网页特效——Banner图滚动选项卡切换广告弹窗等
原生JS实现各种经典网页特效——Banner图滚动选项卡切换广告弹窗等
JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)