利用原生JS实现网页1920banner图滚动效果
Posted 矩阵鱼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用原生JS实现网页1920banner图滚动效果相关的知识，希望对你有一定的参考价值。
内容描述：随着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>
以上是关于利用原生JS实现网页1920banner图滚动效果的主要内容，如果未能解决你的问题，请参考以下文章
原生JS实现各种经典网页特效——Banner图滚动选项卡切换广告弹窗等