内容描述：随着PC设备硬件性能的进步和分辨率的不断提高，现在主流网站逐渐开始采用1920banner图，为适应这一趋势，博主设计了1920banner图的滚动效果，代码利用了原生JS实现了1920banner图的切换效果，并针对低分辨率电脑设备进行了适配，实现了JS代码与HTML代码的完全分离，符合w3c的标准使用规范，希望能给各位开发者朋友以帮助和参考。如发现有缺陷和不足，欢迎大家予以指正，如有更好的意见或解决方法，可在评论区交流互动。一下为代码内容：
<!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;
position: relative;
}
#banner #inside{
width: 9600px;
position: relative;
left: 50%;
margin-left: -960px;
transition: all 1s ease;
}
#banner img{
width: 1920px;
height: 500px;
}
#bannerNum{
padding: 0px;
list-style: none;
overflow: hidden;
width: 160px;
position: absolute;
bottom: 30px;
right: 50px;
}
#bannerNum li{
width: 30px;
height: 30px;
background-color: white;
text-align: center;
line-height: 30px;
margin: 0px 5px;
float: left;
cursor: pointer;
}
</style>
<script>
var num = 1;
var inside;
window.onload = function(){
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";
break;
case 5:
inside.style.marginLeft = (-960-1920*4)+"px";
num = 0;
break;
default:
break;
}
},2000);
}
function changeBanner(num1){
inside.style.transition = "none";
switch (num1){
case 1:
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";
break;
default:
break;
}
num = num1-1;
}
</script>
</head>
<body>
<div id="banner">
<div id="inside">
<img src="img/20160919090419962.jpg" id="img1" /
><img src="img/20170120045915164.png" id="img2" /
><img src="img/20170125042305221.jpg" id="img3" /
><img src="img/f2_img4.jpg" id="img4" /
><img src="img/20160919090419962.jpg" id="img5" />
</div>
<ul id="bannerNum">
<li onclick="changeBanner(1)">1</li>
<li onclick="changeBanner(2)">2</li>
<li onclick="changeBanner(3)">3</li>
<li onclick="changeBanner(4)">4</li>
</ul>
</div>
</body>
</html>
时间： 2024-12-25 11:48:44