这篇文章主要为大家详细介绍了原JS实现banner图的常用功能，，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
虽然，用jQuery实现banner图的各种效果十分简单快捷，但是我今天用css+js代码实现了几个banner图的常用功能，效果还不错。
此次，主要想实现以下功能：
1. banner图循环不间断切换
2. 通过自制按钮实现指定性banner图的切换
3. 通过方向按钮实现banner图左/右定向依次切换
4. 当banner图存在onmouseover事件时，停止banner切换，当存在onmouseout时继续切换
#banner{ width: 716.8px; height: 537.6px; background-color: aquamarine; margin: 100px auto; position: relative; font-size: 0px; /*清除img图片间的回车符产生的间隔*/ overflow: hidden; } #banner #bannerImg{ width: 100%; position: absolute; top: 0px; left: 0px; white-space: nowrap; /*使这个图片能一行显示*/ transition:all 1s linear; } #banner #bannerImg .img{ width: 100%; } #banner #bannerButton{ font-size: 16px; color: white; position: absolute; bottom: 10px; left: 20px; } #banner #bannerButton .Button{ border-radius: 9px; border: none; outline: none; cursor: pointer; background-color: #7FFFD4; } #banner #bannerButtonAside .div1{ position: absolute; right: 10px; top: 50%; margin-top: -32px; cursor: pointer; } #banner #bannerButtonAside .div2{ position: absolute; left: 10px; top: 50%; margin-top: -32px; cursor: pointer; }
但是经过博主的测试，发现程序存在一定的瑕疵，第一张图片的保留时间比其他图片长，而且每次重新开启定时器均存在这个问题。暂时博主还没有比较简单
省事的方法改良他，所以仅供参考思路，以后要用，当然还是jQuery省事啦！
如果存在错误，欢迎朋友们指出，我们一起探讨，改良代码！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是原JS实现banner图的常用功能的详细内容，更多请关注本站其它相关文章！
