zoukankan      html  css  js  c++  java
  • 原生态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省事啦!

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

  • 相关阅读:
    阿里巴巴图标库在项目中的用法
    js对象的深拷贝
    Ajax
    HTML5新增的canvas是什么--通过刮奖效果学习
    一些最基础的面试题
    微信小程序实现列表搜索功能
    vue的基础双向绑定
    ES6 Promise 的不完全实现
    JQ学习
    播放音乐进度条
  • 原文地址:https://www.cnblogs.com/pengfei-nie/p/6718818.html
Copyright © 2011-2022 走看看