使用原生javascript实现网页中banner滚动切换效果

最新推荐文章于 2023-03-31 00:05:42 发布

weixin_33704234

最新推荐文章于 2023-03-31 00:05:42 发布

阅读量385

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/yt4561761/p/6720132.html

版权

代码如下：

<!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>