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

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

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

在这里插入图片描述

建一个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>