1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <title>其他事件</title>
    5.     <meta charset="utf-8" />
    6.     <style type="text/css">
    7.       .msg{
    8.         width:600px;
    9.           margin:100px auto 0px auto;
    10.           color:#ff0000;
    11.       }
    12.       #view_box{
    13.           position:relative;
    15.         width:600px;
    16.           height:300px;
    17.           margin:10px auto;
    19.           background-color:#000000;
    20.           background-image:url("res/lianxi/sheji/bg1.jpg");
    21.           background-position:center;
    22.           background-repeat:no-repeat;
    23.           background-size:cover;
    24.       }
    25.     </style>
    27.   </head>
    28.   <body>
    30.     <div class="msg">提示：利用鼠标滚轮切换图片</div>
    32.     <div id="view_box">
    34.     </div>
    35.     <script type="text/javascript">
    37.       var index = 1;//图片id
    39.       //添加滚轮事件
    40.       document.getElementById("view_box").addEventListener('DOMMouseScroll',mousewheel,false);//firefox
    41.       document.getElementById("view_box").onmousewheel = mousewheel;//chrome
    43.     function mousewheel(e){
    44.         e.preventDefault();//通知浏览器不执行默认的动作
    45.         if(e.wheelDelta){
    46.             //IE/Opera/Chrome
    47.             if(e.wheelDelta < 0){
    48.                 //下
    49.                 index++;
    50.               }
    51.               else{
    52.                 //上
    53.                 index--;
    54.               }
    55.           }
    56.           else if(e.detail){
    57.               //Firefox
    58.               if(e.detail < 0){
    59.                 //上
    60.                 index--;
    61.               }
    62.               else{
    63.                 //下
    64.                 index++;
    65.               }
    66.           }
    67.           setAnimate();
    68.       }
    70.       //切换图片
    71.       function setAnimate(){
    72.           if(index > 8){
    73.               index = 1;
    74.           }
    75.           if(index < 1){
    76.               index = 8;
    77.           }
    78.           //设置view_box背景图片
    79.           document.getElementById("view_box").style.backgroundImage = "url('res/lianxi/sheji/bg"+index+".jpg')";
    80.       }
    81.     </script>
    82.   </body>
    83. </html>

    2021-09-26_195229.jpg