原生态JS实现banner图的常用所有功能

　　虽然，用jQuery实现banner图的各种效果十分简单快捷，但是我今天用css+js代码实现了几个banner图的常用功能，效果还不错。

此次，主要想实现以下功能：

　　1. banner图循环不间断切换

　　2. 通过自制按钮实现指定性banner图的切换

　　3. 通过方向按钮实现banner图左/右定向依次切换

　　4. 当banner图存在onmouseover事件时，停止banner切换，当存在onmouseout时继续切换

 

复制代码
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style type="text/css">
  7             #banner{
  8                 width: 716.8px;
  9                 height: 537.6px;
 10                 background-color: aquamarine;
 11                 margin: 100px auto;
 12                 position: relative;
 13                 font-size: 0px;        /*清除img图片间的回车符产生的间隔*/
 14                 overflow: hidden;
 15             }
 16             #banner #bannerImg{
 17                 width: 100%;
 18                 position: absolute;
 19                 top: 0px;
 20                 left: 0px;
 21                 white-space: nowrap;    /*使这个图片能一行显示*/
 22                 transition:all 1s linear;
 23             }
 24             #banner #bannerImg .img{
 25                 width: 100%;
 26             }
 27             #banner #bannerButton{
 28                 font-size: 16px;
 29                 color: white;
 30                 position: absolute;
 31                 bottom: 10px;
 32                 left: 20px;
 33             }
 34             #banner #bannerButton .Button{
 35                 border-radius: 9px;
 36                 border: none;
 37                 outline: none;
 38                 cursor: pointer;
 39                 background-color: #7FFFD4;
 40             }
 41             #banner #bannerButtonAside .div1{
 42                 position: absolute;
 43                 right: 10px;
 44                 top: 50%;
 45                 margin-top: -32px;
 46                 cursor: pointer;
 47             }
 48             
 49             #banner #bannerButtonAside .div2{
 50                 position: absolute;
 51                 left: 10px;
 52                 top: 50%;
 53                 margin-top: -32px;
 54                 cursor: pointer;
 55             }
 56         </style>
 57     </head>
 58     <body>
 59         <!--实现 左右按钮，1234，自动滑动，鼠标停上显示小手不动 暂停。-->
 60         <section id="banner" onmouseover="changeStop()" onmouseout="changeStart()">
 61             
 62             <!--以下是我们的banner图-->
 63             <div id="bannerImg">
 64                 <img class="img" src="../img/c95d7b9676ae739cccfc55457b93fe9c.jpg"/>
 65                 <img class="img" src="../img/5f5bdebddd8f1d276aeac8af5f8fa38d.jpg"/>
 66                 <img class="img" src="../img/5f5e5c091ecb0525fc8204f200670dd9.jpg"/>
 67                 <img class="img" src="../img/efa11cad9094f951061ee21324277efe.jpg"/>
 68                 <img class="img" src="../img/0b54c021bd4384c168d835dfc0908018.jpg"/>
 69                 <img class="img" src="../img/25d10d413faca3bdd7e2d88667f4298f_看图王.jpg"/>
 70                 <img class="img" src="../img/c95d7b9676ae739cccfc55457b93fe9c.jpg"/>    <!--第7张与第一张为同一图片，消除图片切换间断-->
 71             </div>
 72             
 73             <!--以下是我们左下方的banner图按钮-->
 74             <div id="bannerButton">
 75                 <button class="Button" onclick="buttonChange(0)">1</button>
 76                 <button class="Button" onclick="buttonChange(1)">2</button>
 77                 <button class="Button" onclick="buttonChange(2)">3</button>
 78                 <button class="Button" onclick="buttonChange(3)">4</button>
 79                 <button class="Button" onclick="buttonChange(4)">5</button>
 80                 <button class="Button" onclick="buttonChange(5)">6</button>
 81             </div>
 82             
 83             <!--以下是我们左右两个方向按钮-->
 84             <div id="bannerButtonAside">
 85                 <div class="div1" onclick="asideChange(1)">
 86                     <img src="../img/forword.png"/>
 87                 </div>
 88                 <div class="div2" onclick="asideChange(0)">
 89                     <img src="../img/back.png"/>
 90                 </div>
 91             </div>
 92         </section>
 93     </body>
 94     
 95     <script type="text/javascript">
 96         var bannerImg=document.getElementById("bannerImg");    /*取出img容器的节点*/
 97         var Button=document.getElementsByClassName("Button");    /*取出所有的button按钮*/
 98         var num=0;     /*定义全局变量num,控制banner的切换次序*/
 99         var aaa=0;     /*定义一个全局变量,用来取定时器函数,并在没有鼠标事件的时候清除定时器*/
100             
101         /*通过定时器实现banner图的每3000毫秒切换一次的效果的changeStart()函数*/
102         function changeStart(){
103                 aaa=setInterval(function(){
104                 if (num<=6) {
105                     bannerImg.style.transition="all 1s linear";
106                     bannerImg.style.left=(-716.8)*(num)+"px";
107                     num++;
108                 }else{
109                     bannerImg.style.transition="all 0s linear";        /*消除num=0时,bannerImg移动的过渡效果*/
110                     num=0;
111                     bannerImg.style.left=(-716.8)*(num)+"px";
112                     
113                 }
114                 console.log("哈哈哈继续");
115             },3000)
116         }
117         changeStart();
118         
119         /*以下是当鼠标悬浮在banner图上时,图片停止自动切换的changeStop()函数*/
120         function changeStop(){
121             clearInterval(aaa);    
122             console.log("停止他");
123         }
124         
125         /*以下是点击按钮实现对应banner图切换的change()函数*/
126         function buttonChange(Num){
127             num=Num+1;
128             bannerImg.style.transition="all 0s linear";
129             bannerImg.style.left=(-716.8)*(Num)+"px";
130         }
131         
132         /*以下是点击左右两个按钮实现banner图切换的buttonChange()函数*/
133         function asideChange(x){   /*通过传递形参x,判断往左/往右切换banner图*/
134             if (num!=6&&x==1) {
135                 num++;
136             }else if(num==6&&x==1){
137                 num=0;
138             }else if(num!=0&&x==0){
139                 num--;
140             }
141             else if(num==0&&x==0){
142                 num=5;
143             }
144             bannerImg.style.transition="all 0s linear";
145             bannerImg.style.left=(-716.8)*(num)+"px";
146         }
147     </script>
148 </html>
复制代码

 

　　但是经过博主的测试，发现程序存在一定的瑕疵，第一张图片的保留时间比其他图片长，而且每次重新开启定时器均存在这个问题。暂时博主还没有比较简单

省事的方法改良他，所以仅供参考思路，以后要用，当然还是jQuery省事啦！

　　如果存在错误，欢迎朋友们指出，我们一起探讨，改良代码！

 

posted @   Mr.聂  阅读(4383)  评论(4)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
AI IDE Trae