2020 用html JavaScript实现广告轮播图切换鼠标悬浮下标且左右切换图片

秒速五厘米 2022-11-20 05:56 304阅读 0赞

## 用html JavaScript实现广告轮播图切换 鼠标悬浮下标且左右切换图片 ##

如图所示，左右有箭头可以切换照片，鼠标悬浮下标数字可跳转图片

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEyNDU3Nw_size_16_color_FFFFFF_t_70_pic_center]

建一个style.css文件

ul,li{ padding: 0;margin: 0; list-style: none;}
    .adver{ margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../img/adver01.jpg");}
    ul{ position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
    ul li{ display: inline-block; font-size: 10px; line-height: 20px; font-family: "微软雅黑"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
    .arrowLeft,.arrowRight{ 
        position: absolute;
        width: 30px;
        background:rgba(0,0,0,0.2);
        height: 50px;
        line-height: 50px;
        text-align: center;
        top:200px;
        z-index: 150;
        font-family: "微软雅黑";
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        
    }
    .arrowLeft{ left: 10px;}
    .arrowRight{ right: 10px;}
    li:nth-of-type(1){ 
        background: orange;
    }

html代码

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>图片轮播切换</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="js/jquery-3.5.1.js" type="text/javascript"></script>
        <script type="text/javascript">
        
        //by 夜林 2020.11.3
    	
      $(function () { 
        //记录当前位置
        var index = 0;
        //显示左右侧按钮
        $(".adver").hover(function () { 
          $(".arrowLeft,.arrowRight").toggle();
        })
        //左侧按钮
        $(".arrowLeft").click(function () { 
          index--;
          if (index < 0) { 
            index = 5;
          }
          $(".adver").css("background","url(img/adver0" + (index+1) + ".jpg)");
          $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black");
        });
        //右侧按钮
        $(".arrowRight").click(function () { 
          index++;
          if(index > 5) { 
            index = 0;
          }
          $(".adver").css("background","url(img/adver0" + (index+1) + ".jpg)");
          $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black");
        });
        //切换图片
        $("ul li").hover(function () { 
          index = $(this).index();
          $(".adver").css("background","url(img/adver0" + (index+1) + ".jpg)");
          $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black");
        });
      
        //移入暂停和移出恢复定时滚动
        $(".adver").mousemove().mouseout();
        
    
        
      })
    </script>
    </head>
    <body>
    <div class="adver">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <div class="arrowLeft"><</div><div class="arrowRight">></div>
    </div>
    </body>
    </html>